\r\n {this.state.actionOnTextClick === '' ? \r\n \r\n
\r\n\r\n );\r\n }\r\n}\r\n\r\nexport default Marquee;\r\n","import React from 'react'\r\nimport Parser from 'html-react-parser'\r\nimport PropTypes from 'prop-types'\r\n\r\nconst CaseStudyContainer = (props) =>\r\n\t{ marquee } \r\n \r\n
\r\n : \r\n \r\n { marquee } \r\n }\r\n \r\n \r\n\r\n\t\t
\r\n\r\n\r\nexport default CaseStudyContainer\r\n\r\nCaseStudyContainer.propTypes = {\r\n\tcontent: PropTypes.shape({\r\n\t\ttitle: PropTypes.string.isRequired,\r\n\t\tcompany: PropTypes.string.isRequired,\r\n\t\tindustry: PropTypes.string.isRequired,\r\n\t\temployees: PropTypes.string.isRequired,\r\n\t\tobjectives: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n\t\tsolution: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n\t\tstats: PropTypes.arrayOf(PropTypes.object).isRequired,\r\n\t\tquote: PropTypes.shape({\r\n\t\t\tsource: PropTypes.string.isRequired,\r\n\t\t\tposition: PropTypes.string.isRequired,\r\n\t\t\tcompany: PropTypes.string.isRequired\r\n\t\t})\r\n\t})\r\n}\r\n","import axios from 'axios'\r\nimport { env, ROOT_URL } from 'Constants'\r\nimport { func } from 'prop-types';\r\nimport { RootRef } from '@material-ui/core';\r\n\r\n//user manager\r\nexport const TOP_DETAILS_LOADING = 'TOP_DETAILS_LOADING';\r\nexport const TOP_DETAILS_SUCCESS = 'TOP_DETAILS_SUCCESS';\r\nexport const TOP_DETAILS_FAILURE = 'TOP_DETAILS_FAILURE';\r\nexport const RESET_ERROR = 'RESET_ERROR';\r\nexport const GET_YOURFILE_DETAILS_SUCCESS = 'GET_YOURFILE_DETAILS_SUCCESS';\r\nexport const GET_YOURFILE_DETAILS_FAILURE = 'GET_YOURFILE_DETAILS_FAILURE';\r\nexport const GET_YOURFILE_DETAILS_LOADING = 'GET_YOURFILE_DETAILS_LOADING';\r\nexport const DEFINESCOPE_FAILURE = 'DEFINESCOPE_FAILURE';\r\nexport const DEFINESCOPE_SUCCESS = 'DEFINESCOPE_SUCCESS';\r\nexport const DEFINESCOPE_LOADING = 'DEFINESCOPE_LOADING';\r\nexport const GET_DETAILEDFILE_FAILURE = 'GET_DETAILEDFILE_FAILURE';\r\nexport const GET_DETAILEDFILE_SUCCESS = 'GET_DETAILEDFILE_SUCCESS';\r\nexport const GET_DETAILEDFILE_LOADING = 'GET_DETAILEDFILE_LOADING';\r\nexport const GET_RESULT_FAILURE = 'GET_RESULT_FAILURE';\r\nexport const GET_RESULT_SUCCESS = 'GET_RESULT_SUCCESS';\r\nexport const GET_RESULT_LOADING = 'GET_RESULT_LOADING';\r\nexport const SET_POPUP_TAB_LOADING_STATUS = 'SET_POPUP_TAB_LOADING_STATUS';\r\nexport const CURRENT_ACTIVE_REQUEST = 'CURRENT_ACTIVE_REQUEST'\r\nexport const GET_DETAILEDFILEROWINSERTED_FAILURE = 'GET_DETAILEDFILEROWINSERTED_FAILURE';\r\nexport const GET_DETAILEDFILEROWINSERTED_SUCCESS = 'GET_DETAILEDFILEROWINSERTED_SUCCESS';\r\nexport const GET_DETAILEDFILEROWINSERTED_LOADING = 'GET_DETAILEDFILEROWINSERTED_LOADING';\r\nexport const SCOPESUMMARY_FAILURE = 'SCOPESUMMARY_FAILURE';\r\nexport const SCOPESUMMARY_SUCCESS = 'SCOPESUMMARY_SUCCESS';\r\nexport const SCOPESUMMARY_LOADING = 'SCOPESUMMARY_LOADING';\r\nexport const SCOPESUMMARYBUYPROCESS_FAILURE = 'SCOPESUMMARYBUYPROCESS_FAILURE';\r\nexport const SCOPESUMMARYBUYPROCESS_SUCCESS = 'SCOPESUMMARYBUYPROCESS_SUCCESS';\r\nexport const SCOPESUMMARYBUYPROCESS_LOADING = 'SCOPESUMMARYBUYPROCESS_LOADING';\r\nexport const GET_SELECTED_COLUMNS_FAILURE = 'GET_SELECTED_COLUMNS_FAILURE';\r\nexport const GET_SELECTED_COLUMNS_SUCCESS = 'GET_SELECTED_COLUMNS_SUCCESS';\r\nexport const GET_SELECTED_COLUMNS_LOADING = 'GET_SELECTED_COLUMNS_LOADING';\r\nexport const ADD_SELECTED_COLUMNS_FAILURE = 'ADD_SELECTED_COLUMNS_FAILURE';\r\nexport const ADD_SELECTED_COLUMNS_SUCCESS = 'ADD_SELECTED_COLUMNS_SUCCESS';\r\nexport const ADD_SELECTED_COLUMNS_LOADING = 'ADD_SELECTED_COLUMNS_LOADING';\r\nexport const ADD_FAVORITE_FIELD_LOADING = 'ADD_FAVORITE_FIELD_LOADING';\r\nexport const ADD_FAVORITE_FIELD_SUCCESS = 'ADD_FAVORITE_FIELD_SUCCESS';\r\nexport const GET_FAVORITE_FIELD_LOADING = 'GET_FAVORITE_FIELD_LOADING';\r\nexport const GET_FAVORITE_FIELD_SUCCESS = 'GET_FAVORITE_FIELD_SUCCESS';\r\nexport const EDIT_FAVORITE_FIELD_LOADING = 'EDIT_FAVORITE_FIELD_LOADING';\r\nexport const EDIT_FAVORITE_FIELD_SUCCESS = 'EDIT_FAVORITE_FIELD_SUCCESS';\r\nexport const DELETE_FAVORITE_FIELD_LOADING = 'DELETE_FAVORITE_FIELD_LOADING';\r\nexport const DELETE_FAVORITE_FIELD_SUCCESS = 'DELETE_FAVORITE_FIELD_SUCCESS';\r\nexport const REMOVE_COLUMNS_LOADING = 'REMOVE_COLUMNS_LOADING';\r\nexport const REMOVE_COLUMNS_SUCCESS = 'REMOVE_COLUMNS_SUCCESS';\r\nexport const GET_INPUTANDCLASSIFICATION_LOADING = 'GET_INPUTANDCLASSIFICATION_LOADING';\r\nexport const GET_INPUTANDCLASSIFICATION_SUCCESS = 'GET_INPUTANDCLASSIFICATION_SUCCESS';\r\nexport const GET_INPUTANDCLASSIFICATION_FAILURE = 'GET_INPUTANDCLASSIFICATION_FAILURE';\r\nexport const GET_CAPIQDATA_BLANK = 'GET_CAPIQDATA_BLANK';\r\nexport const GET_SPCAPITALIQ_LOADING = 'GET_SPCAPITALIQ_LOADING';\r\nexport const GET_SPCAPITALIQ_SUCCESS = 'GET_SPCAPITALIQ_SUCCESS';\r\nexport const GET_SPCAPITALIQ_FAILURE = 'GET_SPCAPITALIQ_FAILURE';\r\nexport const GET_SPCAPITALIQULTIMATEPARENT_LOADING = 'GET_SPCAPITALIQULTIMATEPARENT_LOADING';\r\nexport const GET_SPCAPITALIQULTIMATEPARENT_SUCCESS = 'GET_SPCAPITALIQULTIMATEPARENT_SUCCESS';\r\nexport const GET_SPCAPITALIQULTIMATEPARENT_FAILURE = 'GET_SPCAPITALIQULTIMATEPARENT_FAILURE';\r\nexport const STORE_SUPPLIER_SKEY = 'STORE_SUPPLIER_SKEY';\r\nexport const STORE_VENDOR_DETAILS = 'STORE_VENDOR_DETAILS';\r\nexport const STORE_INPUTANDCLASSIFICATION_DETAILS = 'STORE_INPUTANDCLASSIFICATION_DETAILS';\r\nexport const STORE_INDUSTRY_ID = 'STORE_INDUSTRY_ID';\r\nexport const GET_SUPPLIERDRILLSCOPE_LOADING = 'GET_SUPPLIERDRILLSCOPE_LOADING';\r\nexport const GET_SUPPLIERDRILLSCOPE_SUCCESS = 'GET_SUPPLIERDRILLSCOPE_SUCCESS';\r\nexport const GET_SUPPLIERDRILLSCOPE_FAILURE = 'GET_SUPPLIERDRILLSCOPE_FAILURE';\r\nexport const TRACK_SUPPLIERDRILLDOWN_PENDING_CHANGES = 'TRACK_SUPPLIERDRILLDOWN_PENDING_CHANGES';\r\nexport const TRACK_SUPPLIERDRILLDOWN_SAVE_CHANGES = 'TRACK_SUPPLIERDRILLDOWN_SAVE_CHANGES';\r\nexport const GET_SUPPLIERDRILLDOWNUPDATED_FAILURE = 'GET_SUPPLIERDRILLDOWNUPDATED_FAILURE';\r\nexport const GET_SUPPLIERDRILLDOWNUPDATED_SUCCESS = 'GET_SUPPLIERDRILLDOWNUPDATED_SUCCESS';\r\nexport const GET_SUPPLIERDRILLDOWNUPDATED_LOADING = 'GET_SUPPLIERDRILLDOWNUPDATED_LOADING';\r\nexport const GET_INDUSTRYDRILLSCOPE_LOADING = 'GET_INDUSTRYDRILLSCOPE_LOADING';\r\nexport const GET_INDUSTRYDRILLSCOPE_SUCCESS = 'GET_INDUSTRYDRILLSCOPE_SUCCESS';\r\nexport const GET_INDUSTRYDRILLSCOPE_FAILURE = 'GET_INDUSTRYDRILLSCOPE_FAILURE';\r\nexport const STORE_GICS_ID = 'STORE_GICS_ID';\r\nexport const STORE_INDUSTRY_DETAILS = 'STORE_INDUSTRY_DETAILS';\r\nexport const GET_INDUSTRYSPEND_FAILURE = 'GET_INDUSTRYSPEND_FAILURE';\r\nexport const GET_INDUSTRYSPEND_SUCCESS = 'GET_INDUSTRYSPEND_SUCCESS';\r\nexport const GET_INDUSTRYSPEND_LOADING = 'GET_INDUSTRYSPEND_LOADING';\r\nexport const INDUSTRYDRILLSCOPEUPDATE_FAILURE = 'INDUSTRYDRILLSCOPEUPDATE_FAILURE';\r\nexport const INDUSTRYDRILLSCOPEUPDATE_LOADING = 'INDUSTRYDRILLSCOPEUPDATE_LOADING';\r\nexport const INDUSTRYDRILLSCOPEUPDATE_SUCCESS = 'INDUSTRYDRILLSCOPEUPDATE_SUCCESS';\r\nexport const GET_INDUSTRYSPENDUPDATED_FAILURE = 'GET_INDUSTRYSPENDUPDATED_FAILURE';\r\nexport const GET_INDUSTRYSPENDUPDATED_SUCCESS = 'GET_INDUSTRYSPENDUPDATED_SUCCESS';\r\nexport const GET_INDUSTRYSPENDUPDATED_LOADING = 'GET_INDUSTRYSPENDUPDATED_LOADING';\r\nexport const TRACK_INDUSTRYDRILLSCOPE_PENDING_CHANGES = 'TRACK_INDUSTRYDRILLSCOPE_PENDING_CHANGES';\r\nexport const INDUSTRYSUPPLIER_FAILURE = 'INDUSTRYSUPPLIER_FAILURE';\r\nexport const INDUSTRYSUPPLIER_SUCCESS = 'INDUSTRYSUPPLIER_SUCCESS';\r\nexport const INDUSTRYSUPPLIER_LOADING = 'INDUSTRYSUPPLIER_LOADING';\r\nexport const GET_INDUSTRYCAPIQ_FAILURE = 'GET_INDUSTRYCAPIQ_FAILURE';\r\nexport const GET_INDUSTRYCAPIQ_SUCCESS = 'GET_INDUSTRYCAPIQ_SUCCESS';\r\nexport const GET_INDUSTRYCAPIQ_LOADING = 'GET_INDUSTRYCAPIQ_LOADING';\r\nexport const TRACK_USER_SPEND_SELECTIONS = 'TRACK_USER_SPEND_SELECTIONS';\r\nexport const CLEAR_CURRENT_ACTIVE_REQUEST = 'CLEAR_CURRENT_ACTIVE_REQUEST';\r\nexport const ENABLEMENTINSIGHT_FAILURE = 'ENABLEMENTINSIGHT_FAILURE';\r\nexport const ENABLEMENTINSIGHT_SUCCESS = 'ENABLEMENTINSIGHT_SUCCESS';\r\nexport const ENABLEMENTINSIGHT_LOADING = 'ENABLEMENTINSIGHT_LOADING';\r\nexport const REDIRECT_FROM_ENABLEMENT_TAB = 'REDIRECT_FROM_ENABLEMENT_TAB';\r\nexport const REDIRECT_FROM_WIZARD = 'REDIRECT_FROM_WIZARD';\r\n\r\nexport const GET_ALLINDUSTRIES_LOADING = 'GET_ALLINDUSTRIES_LOADING';\r\nexport const GET_ALLINDUSTRIES_SUCCESS = 'GET_ALLINDUSTRIES_SUCCESS';\r\nexport const GET_ALLINDUSTRIES_FAILURE = 'GET_ALLINDUSTRIES_FAILURE';\r\nexport const GET_ALLINDUSTRIESTREESTRUCTURE_SUCCESS = 'GET_ALLINDUSTRIESTREESTRUCTURE_SUCCESS'\r\nexport const SET_SEARCHCLEAR_FLAG = 'SET_SEARCHCLEAR_FLAG'\r\nexport const STORE_OVERRIDED_INDUSTRY = 'STORE_OVERRIDED_INDUSTRY'\r\nexport const STORE_ENABLEMENT_WAVE_VALUE = 'STORE_ENABLEMENT_WAVE_VALUE'\r\nexport const STORE_OVERRIDED_CAPIQID = 'STORE_OVERRIDED_CAPIQID'\r\n\r\nexport const ENABLEMENT_FAILURE = 'ENABLEMENT_FAILURE';\r\nexport const ENABLEMENT_SUCCESS = 'ENABLEMENT_SUCCESS';\r\nexport const ENABLEMENT_LOADING = 'ENABLEMENT_LOADING';\r\nexport const STORE_ENABLEMENTINSIGHT_FILTER = 'STORE_ENABLEMENTINSIGHT_FILTER'\r\n\r\nexport const GET_YOURFILE_VALUESTORYREQUESTDETAILS = 'GET_YOURFILE_VALUESTORYREQUESTDETAILS'\r\nexport const GET_YOURFILE_REQUESTDETAILS = 'GET_YOURFILE_REQUESTDETAILS'\r\n\r\nexport const GET_RESULTSUMMARY_DETAILS = 'GET_RESULTSUMMARY_DETAILS'\r\nexport const GET_TOP_DETAILS = 'GET_TOP_DETAILS'\r\n\r\nexport const GET_MAPPEDCOLUMN = 'GET_MAPPEDCOLUMN'\r\n\r\nexport const GET_ALLINDUSTRIES_GICS_LOADING = 'GET_ALLINDUSTRIES_LOADING'\r\nexport const GET_ALLINDUSTRIES_GICS_SUCCESS = 'GET_ALLINDUSTRIES_SUCCESS'\r\nexport const GET_ALLINDUSTRIES_GICS_FAILURE = 'GET_ALLINDUSTRIES_FAILURE'\r\n\r\nexport const GET_UPDATE_GICS_LOADING = 'GET_UPDATEGICS_LOADING'\r\nexport const GET_UPDATE_GICS_SUCCESS = 'GET_UPDATEGICS_SUCCESS'\r\nexport const GET_UPDATE_GICS_FAILURE = 'GET_UPDATEGICS_FAILURE'\r\n\r\nexport const GET_COUNTRYDETAILS_LOADING = 'GET_COUNTRYDETAILS_LOADING'\r\nexport const GET_COUNTRYDETAILS_SUCCESS = 'GET_COUNTRYDETAILS_SUCCESS'\r\nexport const GET_COUNTRYDETAILS_FAILURE = 'GET_COUNTRYDETAILS_FAILURE'\r\n\r\nexport const UPDATE_COUNTRYDETAILS_LOADING = 'UPDATE_COUNTRYDETAILS_LOADING'\r\nexport const UPDATE_COUNTRYDETAILS_SUCCESS = 'UPDATE_COUNTRYDETAILS_SUCCESS'\r\nexport const UPDATE_COUNTRYDETAILS_FAILURE = 'UPDATE_COUNTRYDETAILS_FAILURE'\r\n\r\nexport const USER_DETAILS_LOADING = 'USER_DETAILS_LOADING';\r\nexport const USER_DETAILS_SUCCESS = 'USER_DETAILS_SUCCESS';\r\nexport const USER_DETAILS_FAILURE = 'USER_DETAILS_FAILURE';\r\n\r\n//Your Spend File\r\nconst getYourRequestDetailsAPI = `${ROOT_URL}/YourSpendFile/GetYourRequestsDetails`\r\nconst loadRequestDetailsAPI = `${ROOT_URL}/YourSpendFile/LoadRequestDetails`\r\nconst getAllRequestsAgainstValueStoryAPI = `${ROOT_URL}/YourSpendFile/GetAllRequestsAgainstValueStory`\r\nconst getAllMappedColumnAPI = `${ROOT_URL}/YourSpendFile/GetAllMappedSpendColumn`\r\nconst activetDeactiveCurrentRequestAPI = `${ROOT_URL}/YourSpendFile/ActivetDeactiveCurrentRequest`\r\nconst cleanRequestDataAPI = `${ROOT_URL}/YourSpendFile/CleanRequestData`\r\nconst updateCommentAPI = `${ROOT_URL}/YourSpendFile/UpdateComment`\r\nconst getUserSpendSelectionsAPI = `${ROOT_URL}/YourSpendFile/GetUserSpendSelections`\r\nconst updateRequestParameterAPI = `${ROOT_URL}/YourSpendFile/UpdateRequestParameter`\r\nconst updateEnablementParameterPriorityAPI = `${ROOT_URL}/YourSpendFile/UpdateEnablementParameterPriority`\r\nconst getAllEnablementParameterPriorityAPI = `${ROOT_URL}/YourSpendFile/GetAllEnablementParameterPriority`\r\nconst getSpendFilesDataAPI = `${ROOT_URL}/YourSpendFile/GetSpendFilesData`\r\nconst getQualityAssessmentDataAPI = `${ROOT_URL}/YourSpendFile/GetQualityAssessmentData`\r\nconst updateQualityAssessmentDataAPI = `${ROOT_URL}/YourSpendFile/UpdateQualityAssessmentData`\r\nconst uploadSpendCollectionDataAPI = `${ROOT_URL}/YourSpendFile/UploadSpendCollectionData`\r\nconst fetchSpendCollectionColumnAPI = `${ROOT_URL}/YourSpendFile/GetSpendCollectionColumnDetails`\r\nconst saveCollectCustomerSpendAPI = `${ROOT_URL}/YourSpendFile/saveCollectCustomerSpend`\r\nconst getCollectCustomerSpendDetailsAPI = `${ROOT_URL}/YourSpendFile/GetCollectCustomerSpendDetails`\r\nconst getSpendQualityAssessmentDataAPI = `${ROOT_URL}/YourSpendFile/GetSpendQualityAssessmentData`\r\nconst updateSpendQualityAssessmentDataAPI = `${ROOT_URL}/YourSpendFile/UpdateSpendQualityAssessmentData`\r\n\r\n\r\n//Classification & Top Details\r\nconst getTopDetailsAPI = `${ROOT_URL}/ClassificationAndTopDetails/GetTopDetails`\r\nconst getResultClassSummaryAPI = `${ROOT_URL}/ClassificationAndTopDetails/GetClassSummary`\r\nconst getResultMatchSummaryAPI = `${ROOT_URL}/ClassificationAndTopDetails/GetMatchSummary`\r\n\r\n//Industry Breakdown\r\nconst getSupplierDrilldownUpdateAPI = `${ROOT_URL}/IndustryBreakdown/SupplierDrilldownUpdate`\r\nconst getInputAndClassificationDataAPI = `${ROOT_URL}/IndustryBreakdown/GetInputAndClassificationData`\r\nconst getSPCapitalIQDataAPI = `${ROOT_URL}/IndustryBreakdown/GetSPCapitalIQData`\r\nconst getSPCapitalIQUltimateParentDataAPI = `${ROOT_URL}/IndustryBreakdown/GetSPCapitalIQUltimateParentData`\r\nconst getSupplierDrillScopeDataAPI = `${ROOT_URL}/IndustryBreakdown/GetSupplierDrillScopeData`\r\nconst getCapIQClassificationIndustriesAPI = `${ROOT_URL}/IndustryBreakdown/GetCapIQClassificationIndustries`\r\nconst getSupplierDeduplicationDataAPI = `${ROOT_URL}/IndustryBreakdown/GetSupplierDeduplicationData`\r\nconst getIndustryDrillScopeDetailsAPI = `${ROOT_URL}/IndustryBreakdown/GetIndustryDrillScopeDetails`\r\nconst getIndustryForSpendAPI = `${ROOT_URL}/IndustryBreakdown/GetIndustryForSpend`\r\nconst getIndustryDrillScopeUpdateAPI = `${ROOT_URL}/IndustryBreakdown/IndustryDrillScopeUpdate`\r\nconst getIndustrySpendAPI = `${ROOT_URL}/IndustryBreakdown/IndustrySpendUpdate`\r\nconst getIndustryDrillScopeSummaryDataAPI = `${ROOT_URL}/IndustryBreakdown/GetIndustryScopeSummaryData`\r\nconst getIndustryCapIQDataAPI = `${ROOT_URL}/IndustryBreakdown/GetIndustryCapIQData`\r\nconst getNetworkStatsDataPAI = `${ROOT_URL}/IndustryBreakdown/GetNetworkStatsData`\r\nconst getSummaryScopeSolutionAPI = `${ROOT_URL}/IndustryBreakdown/GetSummaryScopeSolution`\r\nconst getIndustrySupplierDetailsAPI = `${ROOT_URL}/IndustryBreakdown/GetIndustrySupplierDetails`\r\nconst getSupplierCountryCodesAPI = `${ROOT_URL}/IndustryBreakdown/GetSupplierCountryCodes`\r\nconst getSupplierScopeDetailsAPI = `${ROOT_URL}/IndustryBreakdown/GetSupplierScopeDetails`\r\nconst getIndustrySupplierScopeDetailsAPI = `${ROOT_URL}/IndustryBreakdown/GetIndustrySupplierScopeDetails`\r\n\r\n//Spend File Details\r\nconst getDetailedFileSpendDataAPI = `${ROOT_URL}/SpendFileDetails/GetDetailedFileSpendData`\r\nconst getSelectedColumnAPI = `${ROOT_URL}/SpendFileDetails/GetColumnsForRequest`\r\nconst addSelectedColumnAPI = `${ROOT_URL}/SpendFileDetails/AddColumnsForRequest`\r\nconst addFavoriteFieldAPI = `${ROOT_URL}/SpendFileDetails/AddFavoriteFields`\r\nconst getFavoriteFieldAPI = `${ROOT_URL}/SpendFileDetails/GetFavoriteFields`\r\nconst editFavoriteFieldAPI = `${ROOT_URL}/SpendFileDetails/EditFavoriteField`\r\nconst deleteFavoriteFieldAPI = `${ROOT_URL}/SpendFileDetails/DeleteFavoriteField`\r\nconst removeColumnsForRequestAPI = `${ROOT_URL}/SpendFileDetails/RemoveColumnsForRequest`\r\nconst getAllIndustriesAPI = `${ROOT_URL}/SpendFileDetails/getAllIndustries`\r\nconst getDetailedFileRowsToInsertAPI = `${ROOT_URL}/SpendFileDetails/UpdateSpendDetails`\r\nconst getSpendColumnsConfigurationsAPI = `${ROOT_URL}/SpendFileDetails/GetSpendColumnsConfiguration`\r\nconst getNdlColumnsConfigurationsAPI = `${ROOT_URL}/SpendFileDetails/GetNdlColumnsConfiguration`\r\nconst getNdlReportDataAPI = `${ROOT_URL}/SpendFileDetails/GetNdlReportData`\r\nconst uploadUserDefinedFieldsAPI = `${ROOT_URL}/SpendFileDetails/UpdateUserDefinedFields`\r\nconst getSupplierCommentsAPI = `${ROOT_URL}/SpendFileDetails/GetSupplierComments`\r\nconst fetchIndirectVisibleSolutionInScopeValuesAPI = `${ROOT_URL}/AdminSpendManager/GetIndirectVisibleSolutionInScopeValues`\r\n\r\n//Enablement Insight\r\nconst getEnablementStrategyDetailsAPI = `${ROOT_URL}/EnablementInsight/GetEnablementStrategyDetails`\r\nconst getOnboardingWorkstreamDetailsAPI = `${ROOT_URL}/EnablementInsight/GetOnboardingWorkstreamDetails`\r\nconst getEnablementDetailsAPI = `${ROOT_URL}/EnablementInsight/GetEnablementDetails`\r\nconst getEnablementDetailsForGanntChartAPI = `${ROOT_URL}/EnablementInsight/GetGanntChartEnablementDetails`\r\nconst getNetworkMatchDetailsAPI = `${ROOT_URL}/EnablementInsight/GetNetworkMatchDetails`\r\nconst getSpendDocBuyProcessDetailsAPI = `${ROOT_URL}/EnablementInsight/GetSpendDocBuyProcessDetails`\r\nconst getCategoryInsightDetailsAPI = `${ROOT_URL}/EnablementInsight/GetCategoryInsightDetails`\r\nconst getGlobalDetailsAPI = `${ROOT_URL}/EnablementInsight/GetGlobalDetails`\r\nconst getEnablementFiltersDetailsAPI = `${ROOT_URL}/EnablementInsight/GetEnablementInsightFiltersDetails`\r\nconst getEnablementInsightSuppliersDetailsAPI = `${ROOT_URL}/EnablementInsight/GetEnablementInsightSuppliersDetails`\r\nconst updateFlightPlanningSupplierDetailsAPI = `${ROOT_URL}/EnablementInsight/UpdateFlightPlanningSupplierDetails`\r\nconst updateWaveDescriptionAPI = `${ROOT_URL}/EnablementInsight/UpdateWaveDescription`\r\nconst getGanntChartEnablementWavesLookupAPI = `${ROOT_URL}/EnablementInsight/GetGanntChartEnablementWavesLookup`\r\nconst updateEnablementStrategyCurrentFocusAPI = `${ROOT_URL}/EnablementInsight/UpdateEnablementStrategyFocus`\r\n\r\n//Gantt Chart\r\nconst getGanntChartDataAPI = `${ROOT_URL}/GanttChart/GetGanntChartData`\r\nconst getGanntChartSuppliersDetailsAPI = `${ROOT_URL}/GanttChart/GetGanntChartSuppliersPopUpData`\r\n\r\n//Scope Summary\r\nconst getScopeSummarySolutionAPI = `${ROOT_URL}/ScopeSummary/GetScopeSummarySolution`\r\nconst getScopeSummaryBuyProcessAPI = `${ROOT_URL}/ScopeSummary/GetScopeSummaryBuyProcess`\r\n\r\n//Program Enablement Summary\r\nconst getConcentrationAnalysisAPI = `${ROOT_URL}/ProgramEnablementSummary/GetConcentrationAnalysis`\r\nconst getMatchedSupplierAPI = `${ROOT_URL}/ProgramEnablementSummary/GetMatchedSupplier`\r\nconst getMatchedSummaryAPI = `${ROOT_URL}/ProgramEnablementSummary/GetMatchedSummary`\r\nconst getSupplierByReasonAPI = `${ROOT_URL}/ProgramEnablementSummary/GetSupplierByReason`\r\nconst getBuyProcessSummaryAPI = `${ROOT_URL}/ProgramEnablementSummary/GetBuyProcessSummary`\r\nconst storeUserSpendSelectionAPI = `${ROOT_URL}/ProgramEnablementSummary/StoreUserSpendSelection`\r\n\r\n//World Map\r\nconst getHeatMapDataAPI = `${ROOT_URL}/WorldMap/GetHeatMapData`\r\nconst getWorldMapSuppliersDetailsAPI = `${ROOT_URL}/WorldMap/GetWorldMapSuppliersPopUpData`\r\n\r\n//Vendor Files\r\nconst getVendorFilesAPI = `${ROOT_URL}/SpendFileDetails/GetVendorFiles`\r\n\r\n//Spend Manager - Admin section under Menu\r\nconst getEnablementResourceParametersAPI = `${ROOT_URL}/AdminSpendManager/GetEnablementResourceParameters`\r\nconst updateEnablementResourceParametersAPI = `${ROOT_URL}/AdminSpendManager/UpdateEnablementResourceParameters`\r\nconst getEnablementResourceParametersAdminAPI = `${ROOT_URL}/AdminSpendManager/GetEnablementResourceParametersAdmin`\r\nconst updateEnablementResourceParametersAdminAPI = `${ROOT_URL}/AdminSpendManager/UpdateEnablementResourceParametersAdmin`\r\nconst getFlightPlanningDocParametersAPI = `${ROOT_URL}/AdminSpendManager/GetFlightPlanningDocParameters`\r\nconst updateFlightPlanningDocParametersAPI = `${ROOT_URL}/AdminSpendManager/UpdateFlightPlanningDocParameters`\r\nconst getFlightPlanningSpendParametersAPI = `${ROOT_URL}/AdminSpendManager/GetFlightPlanningSpendParameters`\r\nconst getFlightPlanningTransactingBuyRelationshipAPI = `${ROOT_URL}/AdminSpendManager/GetFlightPlanningTransactingBuyRelationshipParameters`\r\nconst updateFlightPlanningSpendParametersAPI = `${ROOT_URL}/AdminSpendManager/UpdateFlightPlanningSpendParameters`\r\nconst updateFlightPlanningTransactingBuyRelationshipAPI = `${ROOT_URL}/AdminSpendManager/UpdateFlightPlanningTransactingBuyRelationshipParameters`\r\nconst getFlightPlanningNetworkEnablementMatchTypeParametersAPI = `${ROOT_URL}/AdminSpendManager/GetFlightPlanningNetworkEnablementMatchTypeParameters`\r\nconst updateFlightPlanningNetworkEnablementMatchTypeParametersAPI = `${ROOT_URL}/AdminSpendManager/UpdateFlightPlanningNetworkEnablementMatchTypeParameters`\r\nconst getFlightPlanningRecommendationDetailsAPI = `${ROOT_URL}/AdminSpendManager/GetFlightPlanningRecommendationDetails`\r\nconst getSupplierChoiceEnablementParametersAPI = `${ROOT_URL}/AdminSpendManager/GetSupplierChoiceEnablementParameters`\r\nconst updateFlightPlanningRecommendationDetailsAPI = `${ROOT_URL}/AdminSpendManager/UpdateFlightPlanningRecommendationDetails`\r\nconst updateOnboardingworkstreamDetailsAPI = `${ROOT_URL}/AdminSpendManager/UpdateOnboardingworkstreamDetails`\r\nconst getWaveWeightCategoryDetailsAPI = `${ROOT_URL}/AdminSpendManager/GetWaveWeightCategoryDetails`\r\nconst updateWaveWeightCategoryDetailsAPI = `${ROOT_URL}/AdminSpendManager/UpdateWaveWeightCategoryDetails`\r\nconst fetchRampScheduleFactorAPI = `${ROOT_URL}/AdminSpendManager/GetScheduleFactor`\r\nconst updateRampScheduleFactorAPI = `${ROOT_URL}/AdminSpendManager/UpdateScheduleFactorValues`\r\nconst fetchGoLiveVsKickOffWeekDataAPI = `${ROOT_URL}/AdminSpendManager/GetGoLiveVsKickOffWeekData`\r\nconst fetchStandardAccountYieldFactorAPI = `${ROOT_URL}/AdminSpendManager/GetStandardAccountYield`\r\nconst updateStandardAccountYieldAPI = `${ROOT_URL}/AdminSpendManager/UpdateStandardAccountYield`\r\nconst updateGoLiveVsKickOffWeekDataAPI = `${ROOT_URL}/AdminSpendManager/UpdateGoLiveVsKickOffValues`\r\nconst getAllGICSAPI = `${ROOT_URL}/AdminSpendManager/getAllGICS`\r\nconst updateGICSAPI = `${ROOT_URL}/AdminSpendManager/UpdateGICS`\r\nconst getCountryDetailsAPI = `${ROOT_URL}/AdminSpendManager/GetCountryDetails`\r\nconst updateCountryDetailsAPI = `${ROOT_URL}/AdminSpendManager/UpdateCountryDetails`\r\nconst fetchL4IndustryValuesAPI = `${ROOT_URL}/AdminSpendManager/GetL4IndustryPriorityValues`\r\nconst uploadL4IndustryPriorityDataAPI = `${ROOT_URL}/AdminSpendManager/updateL4IndustryPriorityValues`\r\nconst getSpendParametersAPI = `${ROOT_URL}/AdminSpendManager/GetSpendParameters`\r\nconst updateSpendParametersAPI = `${ROOT_URL}/AdminSpendManager/UpdateSpendParameters`\r\nconst fetchMarketPlaceEligibleAPI = `${ROOT_URL}/AdminSpendManager/GetMarketPlaceEligibleValues`\r\nconst updateMarketPlaceEligibleValuesAPI = `${ROOT_URL}/AdminSpendManager/UpdateMarketPlaceEligibleValues`\r\nconst fetchSolutionInScopeValuesAPI = `${ROOT_URL}/AdminSpendManager/GetSolutionInScopeValues`\r\nconst updateSolutionInScopeValuesAPI = `${ROOT_URL}/AdminSpendManager/UpdateSolutionInScopeValue`\r\nconst fetchVisibleSolutionInScopeValuesAPI = `${ROOT_URL}/AdminSpendManager/GetVisibleSolutionInScopeValues`\r\nconst fetchANIdBPIdDetailsAPI = `${ROOT_URL}/AdminSpendManager/fetchANIdBPIdDetails`\r\nconst addANIDDetailsAPI = `${ROOT_URL}/AdminSpendManager/AddUpdateANIDDetails`\r\n\r\n\r\n\r\nexport function resetError() {\r\n return {\r\n type: RESET_ERROR,\r\n payload: null\r\n };\r\n}\r\n\r\nexport function topDetailsLoading(bool) {\r\n return {\r\n type: TOP_DETAILS_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function topDetailsSuccess(message) {\r\n return {\r\n type: TOP_DETAILS_SUCCESS,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function topDetailsFailure(error) {\r\n return {\r\n type: TOP_DETAILS_FAILURE,\r\n payload: error\r\n };\r\n}\r\n\r\nexport function getYourFileLoading(bool) {\r\n return {\r\n type: GET_YOURFILE_DETAILS_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getYourFileSuccess(message) {\r\n return {\r\n type: GET_YOURFILE_DETAILS_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function getYourFileFailure(error) {\r\n return {\r\n type: GET_YOURFILE_DETAILS_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function currentActiveRequest(requestDetails) {\r\n return {\r\n type: CURRENT_ACTIVE_REQUEST,\r\n payload: requestDetails\r\n }\r\n}\r\n\r\n//Your Spend Files\r\nexport function getYourRequestsDetails(Email) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { Email: Email },\r\n url: getYourRequestDetailsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function LoadRequestDetails(requestDetails, isNewRequest) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { RequestData: requestDetails, IsNewRequest: isNewRequest },\r\n url: loadRequestDetailsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function GetAllRequestsAgainstValueStory(userId, valueStoryId) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { UserID: userId, VSID: valueStoryId },\r\n url: getAllRequestsAgainstValueStoryAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function GetAllMappedColumn(userId) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { UserID: userId },\r\n url: getAllMappedColumnAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function ActivetDeactiveCurrentRequest(requestDetails) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: requestDetails,\r\n url: activetDeactiveCurrentRequestAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function CleanRequestData(requestDetails) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: requestDetails,\r\n url: cleanRequestDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function UpdateComment(requestDetails) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: requestDetails,\r\n url: updateCommentAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getUserSpendSelections(VSId, DMCId) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { VSID: VSId, DMCID: DMCId },\r\n url: getUserSpendSelectionsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function UpdateRequestParameter(requestDetails) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: requestDetails,\r\n url: updateRequestParameterAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function updateEnablementParameterPriority(records) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: updateEnablementParameterPriorityAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getAllEnablementParameterPriority(param) {\r\n return (dispatch) => {\r\n dispatch(getDetailedFileLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMCID: param.DMC_ID, VSID: param.VS_ID, Email: param.User_Email },\r\n url: getAllEnablementParameterPriorityAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getDetailedFileSuccess(false))\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\n//Classification & Top Details\r\nexport function getTopDetails(RequestFileId, ValueStoryId, UserId) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMCID: RequestFileId, VSID: ValueStoryId, Email: UserId },\r\n url: getTopDetailsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getResultClassSummary(RequestFileId, ValueStoryId, UserId) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMCID: RequestFileId, VSID: ValueStoryId, Email: UserId },\r\n url: getResultClassSummaryAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getResultMatchSummary(RequestFileId, ValueStoryId, UserId) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMCID: RequestFileId, VSID: ValueStoryId, Email: UserId },\r\n url: getResultMatchSummaryAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\n\r\n//Industry Breakdown\r\nexport function supplierDrillDownUpdate(record) {\r\n return (dispatch) => {\r\n dispatch(getSupplierDrilldownUpdatedLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: record,\r\n url: getSupplierDrilldownUpdateAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getSupplierDrilldownUpdatedLoading(false))\r\n dispatch(getSupplierDrilldownUpdatedSuccess(true))\r\n return response\r\n }).catch((error) => {\r\n dispatch(getSupplierDrilldownUpdatedFailure(error))\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function getInputAndClassificationData(DMCId, VSId, userEmail, SKEY) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMCId: DMCId, VSId: VSId, Email: userEmail, DATA_COLLECTIONS_SKEY: SKEY },\r\n url: getInputAndClassificationDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getSPCapitalIQData(CapIQID) {\r\n return (dispatch) => {\r\n //dispatch(getSPCapitalIQLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { CapIQID: CapIQID },\r\n url: getSPCapitalIQDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getSPCapitalIQUltimateParentData(CapIQID) {\r\n return (dispatch) => {\r\n //dispatch(getSPCapitalIQUltimateParentLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { CapIQID: CapIQID },\r\n url: getSPCapitalIQUltimateParentDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getSupplierDrillScopeData(DMCId, VSId, userEmail, SKEY) {\r\n return (dispatch) => {\r\n //dispatch(getSupplierDrillScopeDataLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMCId: DMCId, VSId: VSId, Email: userEmail, DATA_COLLECTIONS_SKEY: SKEY },\r\n url: getSupplierDrillScopeDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getCapIQClassificationIndustries(CapIQID) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { CapIQID: CapIQID },\r\n url: getCapIQClassificationIndustriesAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getSupplierDeduplicationData(DMCId, VSId, userEmail, SKEY) {\r\n return (dispatch) => {\r\n //dispatch(getInputAndClassificationDataLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMCId: DMCId, VSId: VSId, Email: userEmail, DATA_COLLECTIONS_SKEY: SKEY },\r\n url: getSupplierDeduplicationDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getIndustryDrillScopeDetails(DMCId, VSId, userEmail, Id) {\r\n return (dispatch) => {\r\n //dispatch(getSupplierDrillScopeDataLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMCId: DMCId, VSId: VSId, Email: userEmail, CAPIQ_INDUSTRY_ID: Id },\r\n url: getIndustryDrillScopeDetailsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getIndustrySpend(params) {\r\n return (dispatch) => {\r\n dispatch(getIndustrySpendLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: params,\r\n url: getIndustryForSpendAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getIndustrySpendLoading(false))\r\n dispatch(getIndustrySpendSuccess(response))\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function industryDrillScopeUpdate(record) {\r\n return (dispatch) => {\r\n dispatch(industryDrillScopeUpdateLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: record,\r\n url: getIndustryDrillScopeUpdateAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(industryDrillScopeUpdateLoading(false))\r\n dispatch(industryDrillScopeUpdateSuccess(true))\r\n return response\r\n }).catch((error) => {\r\n dispatch(industryDrillScopeUpdateFailure(error))\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function industrySpendUpdate(record) {\r\n return (dispatch) => {\r\n dispatch(getIndustrySpendUpdatedLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: record,\r\n url: getIndustrySpendAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getIndustrySpendUpdatedLoading(false))\r\n dispatch(getIndustrySpendUpdatedSuccess(true))\r\n return response\r\n }).catch((error) => {\r\n dispatch(getIndustrySpendUpdatedFailure(error))\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function getIndustryDrillScopeSummaryData(DMCId, VSId, userEmail, Id) {\r\n return (dispatch) => {\r\n //dispatch(getSupplierDrillScopeDataLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMCId: DMCId, VSId: VSId, Email: userEmail, CAPIQ_INDUSTRY_ID: Id },\r\n url: getIndustryDrillScopeSummaryDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getIndustryCapIQ(params) {\r\n return (dispatch) => {\r\n dispatch(getIndustryCapIQLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: params,\r\n url: getIndustryCapIQDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getIndustryCapIQLoading(false))\r\n dispatch(getIndustryCapIQSuccess(response))\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function getNetworkStatsData(GICSID) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { GICSID: GICSID },\r\n url: getNetworkStatsDataPAI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getSummaryScopeSolution(data) {\r\n return (dispatch) => {\r\n dispatch(defineScopeLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getSummaryScopeSolutionAPI,\r\n data: {\r\n DMC_ID: data.DMC_ID, VS_ID: data.VS_ID, USER_EMAIL: data.User_Email, Country: data.Country,\r\n SolutionConfirmation: data.SolutionConfirmation, GISC_ID: data.GICS_ID, Solution: data.Solution, OutSolution: data.outSolution,\r\n Buyer_Region: data.Buyer_Region, Business_Unit: data.Business_Unit, Goods: data.Goods, DirectSpend: data.DirectSpend,\r\n MetricsType: data.MetricsType, AribaNetwork: data.AribaNetwork, SAPAribaBuyProcess: data.SAPAribaBuyProcess\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n //dispatch(defineScopeSuccess(response))\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getIndustrySupplierDetails(defineScope) {\r\n return (dispatch) => {\r\n\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getIndustrySupplierDetailsAPI,\r\n data: defineScope,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getSupplierCountryCodes(defineScope) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getSupplierCountryCodesAPI,\r\n data: defineScope,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getSupplierScopeDetails(data) {\r\n return (dispatch) => {\r\n dispatch(defineScopeLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getSupplierScopeDetailsAPI,\r\n data: {\r\n DMC_ID: data.DMC_ID, VS_ID: data.VS_ID, USER_EMAIL: data.User_Email, Country: data.Country,\r\n SolutionConfirmation: data.SolutionConfirmation, GISC_ID: data.GICS_ID, Solution: data.Solution, OutSolution: data.outSolution,\r\n Buyer_Region: data.Buyer_Region, Business_Unit: data.Business_Unit, Goods: data.Goods, DirectSpend: data.DirectSpend,\r\n MetricsType: data.MetricsType, AribaNetwork: data.AribaNetwork, SAPAribaBuyProcess: data.SAPAribaBuyProcess\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n //dispatch(defineScopeSuccess(response))\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getIndustrySupplierScopeDetails(data) {\r\n return (dispatch) => {\r\n dispatch(defineScopeLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getIndustrySupplierScopeDetailsAPI,\r\n data: {\r\n DMC_ID: data.DMC_ID, VS_ID: data.VS_ID, USER_EMAIL: data.User_Email, Country: data.Country,\r\n SolutionConfirmation: data.SolutionConfirmation, GISC_ID: data.GICS_ID, Solution: data.Solution\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\n//Spend File Details\r\nexport function getDetailedFileSpendData(DMCId, VSId, userEmail, requestFileRecordCount, roundTripNumber) {\r\n return (dispatch) => {\r\n dispatch(getDetailedFileLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMCId: DMCId, VSId: VSId, Email: userEmail, NumberOfRecords: requestFileRecordCount, RoundTripNumber: roundTripNumber },\r\n url: getDetailedFileSpendDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getDetailedFileSuccess(false))\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function getSelectedColumn(DMCId, VSId, USER_ID) {\r\n return (dispatch) => {\r\n dispatch(getSelectedColumnLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DmcId: DMCId, VsId: VSId, UserId: USER_ID },\r\n url: getSelectedColumnAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getSelectedColumnSuccess(false))\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function addSelectedColumn(DMCId, VSId, USER_ID, COLUMNSOrFAVId) {\r\n return (dispatch) => {\r\n dispatch(addSelectedColumnLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n let payload = {\r\n DmcId: DMCId, VsId: VSId, UserId: USER_ID\r\n };\r\n if (Array.isArray(COLUMNSOrFAVId)) {\r\n payload[\"Columns\"] = COLUMNSOrFAVId;\r\n } else {\r\n payload[\"FavoriteFieldsId\"] = COLUMNSOrFAVId;\r\n }\r\n return axios({\r\n method: 'post',\r\n data: payload,\r\n url: addSelectedColumnAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(addSelectedColumnSuccess(false))\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function addFavoriteFields(USER_ID, TEMPLATE_NAME, COLUMNS) {\r\n return (dispatch) => {\r\n dispatch(addFavoriteFieldsLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { UserId: USER_ID, TemplateName: TEMPLATE_NAME, Columns: COLUMNS },\r\n url: addFavoriteFieldAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(addFavoriteFieldsSuccess(false))\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function getFavoriteFields(USER_ID) {\r\n return (dispatch) => {\r\n dispatch(getFavoriteFieldsLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { UserId: USER_ID },\r\n url: getFavoriteFieldAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getFavoriteFieldsSuccess(false))\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function editFavoriteField(ID, TEMPLATE_NAME) {\r\n return (dispatch) => {\r\n dispatch(editFavoriteFieldLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { Id: ID, TemplateName: TEMPLATE_NAME },\r\n url: editFavoriteFieldAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(editFavoriteFieldSuccess(false))\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function deleteFavoriteField(UserId, FavFieldId) {\r\n return (dispatch) => {\r\n dispatch(deleteFavoriteFieldLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { UserId: UserId, FavoriteFieldsId: FavFieldId },\r\n url: deleteFavoriteFieldAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(deleteFavoriteFieldSuccess(false))\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function removeColumnsForRequest(UserId, VsId, DmcId) {\r\n return (dispatch) => {\r\n dispatch(removeColumnsLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { UserId: UserId, VsId: VsId, DmcId: DmcId },\r\n url: removeColumnsForRequestAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(removeColumnsSuccess(false))\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function getAllIndustries() {\r\n return (dispatch) => {\r\n dispatch(getAllIndustriesLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getAllIndustriesAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n //dispatch(getAllIndustriesSuccess(response.data.Result))\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function insertDetailedFileRecords(records) {\r\n return (dispatch) => {\r\n dispatch(getDetailedFileFileRecordsInsertedLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: getDetailedFileRowsToInsertAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getDetailedFileFileRecordsInsertedLoading(false))\r\n dispatch(getDetailedFileRecordsInsertedSuccess(true))\r\n return response\r\n }).catch((error) => {\r\n dispatch(getDetailedFileFileRecordsInsertedFailure(error))\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function getSpendColumnsConfiguration() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getSpendColumnsConfigurationsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getNdlColumnsConfiguration() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getNdlColumnsConfigurationsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getNdlReportData(detail) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: detail,\r\n url: getNdlReportDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function uploadUserDefinedFields(records) {\r\n return (dispatch) => {\r\n dispatch(getDetailedFileFileRecordsInsertedLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: uploadUserDefinedFieldsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getDetailedFileFileRecordsInsertedLoading(false))\r\n dispatch(getDetailedFileRecordsInsertedSuccess(true))\r\n return response\r\n }).catch((error) => {\r\n dispatch(getDetailedFileFileRecordsInsertedFailure(error))\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function getSupplierComments(DMCId, VSId, SKEY, userEmail) {\r\n return (dispatch) => {\r\n //dispatch(getSupplierDrillScopeDataLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMCId: DMCId, VSId: VSId, Email: userEmail, SKEY: SKEY },\r\n url: getSupplierCommentsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\n//Enablement Insight\r\nexport function getEnablementStrategyDetails(data) {\r\n return (dispatch) => {\r\n dispatch(defineScopeLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getEnablementStrategyDetailsAPI,\r\n data: {\r\n DMC_ID: data.DMC_ID, VS_ID: data.VS_ID, USER_EMAIL: data.User_Email,\r\n Dedup_Status: data.dedupStats, Customer_Possibly_Enabled: data.enabledCustomer, Transacting_Customer: data.transactingCustomer, Buyer_Region: data.buyerRegion,\r\n Business_Unit: data.businessUnit, ERP_System: data.erpSystem, L4_Industry_Name: data.l4IndustryName, ERP_Commodity_Code1: data.erpCode, ERP_Commodity_Code2: data.erpDesc, SIC_UNSPSC_CODE: data.sicCode, SIC_UNSPSC_DESC: data.sicDesc,\r\n Goods_Or_Service: data.goods, Invoice_Origination_Country: data.invoiceCountry, Legal_Invoicing: data.legalInvoice, SAP_Network_Eligible: data.aribaNwEligible, Direct_Spend: data.directSpend, Metric_Type: data.metricsType\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\n//Onboarding Workstream\r\nexport function getOnboardingWorkstreamDetails(data) {\r\n return (dispatch) => {\r\n dispatch(defineScopeLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getOnboardingWorkstreamDetailsAPI,\r\n data: {\r\n DMC_ID: data.DMC_ID, VS_ID: data.VS_ID, USER_EMAIL: data.User_Email,\r\n Dedup_Status: data.dedupStats, Customer_Possibly_Enabled: data.enabledCustomer, Transacting_Customer: data.transactingCustomer, Buyer_Region: data.buyerRegion,\r\n Business_Unit: data.businessUnit, ERP_System: data.erpSystem, L4_Industry_Name: data.l4IndustryName, ERP_Commodity_Code1: data.erpCode, ERP_Commodity_Code2: data.erpDesc, SIC_UNSPSC_CODE: data.sicCode, SIC_UNSPSC_DESC: data.sicDesc,\r\n Goods_Or_Service: data.goods, Invoice_Origination_Country: data.invoiceCountry, Legal_Invoicing: data.legalInvoice, SAP_Network_Eligible: data.aribaNwEligible, Direct_Spend: data.directSpend, Metric_Type: data.metricsType\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getEnablementDetails(data) {\r\n return (dispatch) => {\r\n dispatch(defineScopeLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getEnablementDetailsAPI,\r\n data: {\r\n DMC_ID: data.DMC_ID, VS_ID: data.VS_ID, USER_EMAIL: data.User_Email,\r\n Dedup_Status: data.dedupStats, Customer_Possibly_Enabled: data.enabledCustomer, Transacting_Customer: data.transactingCustomer, Buyer_Region: data.buyerRegion,\r\n Business_Unit: data.businessUnit, ERP_System: data.erpSystem, L4_Industry_Name: data.l4IndustryName, ERP_Commodity_Code1: data.erpCode, ERP_Commodity_Code2: data.erpDesc, SIC_UNSPSC_CODE: data.sicCode, SIC_UNSPSC_DESC: data.sicDesc,\r\n Goods_Or_Service: data.goods, Invoice_Origination_Country: data.invoiceCountry, Legal_Invoicing: data.legalInvoice, SAP_Network_Eligible: data.aribaNwEligible, Direct_Spend: data.directSpend, Metric_Type: data.metricsType\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getEnablementDetailsForGanntChart(data) {\r\n return (dispatch) => {\r\n dispatch(defineScopeLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getEnablementDetailsForGanntChartAPI,\r\n data: {\r\n DMC_ID: data.DMC_ID, VS_ID: data.VS_ID, USER_EMAIL: data.User_Email,\r\n Dedup_Status: data.dedupStats, Customer_Possibly_Enabled: data.enabledCustomer, Transacting_Customer: data.transactingCustomer, Buyer_Region: data.buyerRegion,\r\n Business_Unit: data.businessUnit, ERP_System: data.erpSystem, L4_Industry_Name: data.l4IndustryName, ERP_Commodity_Code1: data.erpCode, ERP_Commodity_Code2: data.erpDesc, SIC_UNSPSC_CODE: data.sicCode, SIC_UNSPSC_DESC: data.sicDesc,\r\n Goods_Or_Service: data.goods, Invoice_Origination_Country: data.invoiceCountry, Legal_Invoicing: data.legalInvoice, SAP_Network_Eligible: data.aribaNwEligible, Direct_Spend: data.directSpend\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getNetworkMatchDetails(data) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getNetworkMatchDetailsAPI,\r\n data: {\r\n DMC_ID: data.DMC_ID, VS_ID: data.VS_ID, USER_EMAIL: data.User_Email,\r\n Dedup_Status: data.dedupStats, Customer_Possibly_Enabled: data.enabledCustomer, Transacting_Customer: data.transactingCustomer, Buyer_Region: data.buyerRegion,\r\n Business_Unit: data.businessUnit, ERP_System: data.erpSystem, L4_Industry_Name: data.l4IndustryName, ERP_Commodity_Code1: data.erpCode, ERP_Commodity_Code2: data.erpDesc, SIC_UNSPSC_CODE: data.sicCode, SIC_UNSPSC_DESC: data.sicDesc,\r\n Goods_Or_Service: data.goods, Invoice_Origination_Country: data.invoiceCountry, Legal_Invoicing: data.legalInvoice, SAP_Network_Eligible: data.aribaNwEligible, Direct_Spend: data.directSpend, Metric_Type: data.metricsType\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getSpendDocBuyProcessDetails(data) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getSpendDocBuyProcessDetailsAPI,\r\n data: {\r\n DMC_ID: data.DMC_ID, VS_ID: data.VS_ID, USER_EMAIL: data.User_Email,\r\n Dedup_Status: data.dedupStats, Customer_Possibly_Enabled: data.enabledCustomer, Transacting_Customer: data.transactingCustomer, Buyer_Region: data.buyerRegion,\r\n Business_Unit: data.businessUnit, ERP_System: data.erpSystem, L4_Industry_Name: data.l4IndustryName, ERP_Commodity_Code1: data.erpCode, ERP_Commodity_Code2: data.erpDesc, SIC_UNSPSC_CODE: data.sicCode, SIC_UNSPSC_DESC: data.sicDesc,\r\n Goods_Or_Service: data.goods, Invoice_Origination_Country: data.invoiceCountry, Legal_Invoicing: data.legalInvoice, SAP_Network_Eligible: data.aribaNwEligible, Direct_Spend: data.directSpend, Metric_Type: data.metricsType\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getCategoryInsightDetails(data) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getCategoryInsightDetailsAPI,\r\n data: {\r\n DMC_ID: data.DMC_ID, VS_ID: data.VS_ID, USER_EMAIL: data.User_Email,\r\n Dedup_Status: data.dedupStats, Customer_Possibly_Enabled: data.enabledCustomer, Transacting_Customer: data.transactingCustomer, Buyer_Region: data.buyerRegion,\r\n Business_Unit: data.businessUnit, ERP_System: data.erpSystem, L4_Industry_Name: data.l4IndustryName, ERP_Commodity_Code1: data.erpCode, ERP_Commodity_Code2: data.erpDesc, SIC_UNSPSC_CODE: data.sicCode, SIC_UNSPSC_DESC: data.sicDesc,\r\n Goods_Or_Service: data.goods, Invoice_Origination_Country: data.invoiceCountry, Legal_Invoicing: data.legalInvoice, SAP_Network_Eligible: data.aribaNwEligible, Direct_Spend: data.directSpend, Metric_Type: data.metricsType\r\n\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getGlobalDetails(data) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getGlobalDetailsAPI,\r\n data: {\r\n DMC_ID: data.DMC_ID, VS_ID: data.VS_ID, USER_EMAIL: data.User_Email,\r\n Dedup_Status: data.dedupStats, Customer_Possibly_Enabled: data.enabledCustomer, Transacting_Customer: data.transactingCustomer, Buyer_Region: data.buyerRegion,\r\n Business_Unit: data.businessUnit, ERP_System: data.erpSystem, L4_Industry_Name: data.l4IndustryName, ERP_Commodity_Code1: data.erpCode, ERP_Commodity_Code2: data.erpDesc, SIC_UNSPSC_CODE: data.sicCode, SIC_UNSPSC_DESC: data.sicDesc,\r\n Goods_Or_Service: data.goods, Invoice_Origination_Country: data.invoiceCountry, Legal_Invoicing: data.legalInvoice, SAP_Network_Eligible: data.aribaNwEligible, Direct_Spend: data.directSpend, Metric_Type: data.metricsType\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getEnablementFiltersDetails(data) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getEnablementFiltersDetailsAPI,\r\n data: {\r\n DMC_ID: data.DMC_ID, VS_ID: data.VS_ID, USER_EMAIL: data.User_Email\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getEnablementInsightSuppliersDetails(data) {\r\n let dataTemp = {\r\n DMC_ID: data.DMC_ID, VS_ID: data.VS_ID, USER_EMAIL: data.User_Email,\r\n FirstColumn_Name: data.column1Name, FirstColumn_Value: data.column1Value,\r\n SecondColumn_Name: data.column2Name, ThirdColumn_Name: data.column3Name,\r\n Dedup_Status: data.dedupStats, Customer_Possibly_Enabled: data.enabledCustomer, Transacting_Customer: data.transactingCustomer, Buyer_Region: data.buyerRegion,\r\n Business_Unit: data.businessUnit, ERP_System: data.erpSystem, L4_Industry_Name: data.l4IndustryName, ERP_Commodity_Code1: data.erpCode, ERP_Commodity_Code2: data.erpDesc, SIC_UNSPSC_CODE: data.sicCode, SIC_UNSPSC_DESC: data.sicDesc,\r\n Goods_Or_Service: data.goods, Invoice_Origination_Country: data.invoiceCountry, Legal_Invoicing: data.legalInvoice, SAP_Network_Eligible: data.aribaNwEligible, Direct_Spend: data.directSpend\r\n }\r\n\r\n if (data.column2Value) {\r\n dataTemp.SecondColumn_Value = data.column2Value\r\n dataTemp.ThirdColumn_Value = data.column3Value\r\n }\r\n\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getEnablementInsightSuppliersDetailsAPI,\r\n data: dataTemp,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function updateFlightPlanningSupplierDetails(data) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: updateFlightPlanningSupplierDetailsAPI,\r\n data: data,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function updateWaveDescription(data) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: updateWaveDescriptionAPI,\r\n data: data,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getGanntChartEnablementWavesLookup(dmcId, vsID, userEmail) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMCID: dmcId, VSID: vsID, Email: userEmail },\r\n url: getGanntChartEnablementWavesLookupAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\n//Gantt Chart\r\nexport function getGanntChartData(RequestFileId, ValueStoryId, UserId) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMCID: RequestFileId, VSID: ValueStoryId, Email: UserId },\r\n url: getGanntChartDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getGanntChartSuppliersDetails(data) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getGanntChartSuppliersDetailsAPI,\r\n data: data,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\n//Scope Summary\r\nexport function getScopeSummarySolution(data) {\r\n return (dispatch) => {\r\n dispatch(scopeSummaryLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getScopeSummarySolutionAPI,\r\n data: {\r\n DMC_ID: data.DMC_ID, VS_ID: data.VS_ID, USER_EMAIL: data.USER_ID\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n //dispatch(scopeSummarySuccess(response))\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getScopeSummaryBuyProcess(data) {\r\n return (dispatch) => {\r\n // dispatch(scopeSummaryBuyProcessLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getScopeSummaryBuyProcessAPI,\r\n data: {\r\n DMC_ID: data.DMC_ID, VS_ID: data.VS_ID, USER_EMAIL: data.USER_ID, SOLUTION: data.SOLUTION,\r\n BUY_PROCESS: data.BUY_PROCESS, INDUSTRY_LEVEL: data.INDUSTRY_LEVEL\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n //dispatch(scopeSummaryBuyProcessSuccess(response))\r\n return response\r\n })\r\n }\r\n}\r\n\r\n//Program Enablement Summary\r\n//Program Enablement Summary\r\nexport function getConcentrationAnalysis(data) {\r\n return (dispatch) => {\r\n dispatch(enablementLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getConcentrationAnalysisAPI,\r\n data: {\r\n DMC_ID: data.DMC_ID, VS_ID: data.VS_ID, USER_EMAIL: data.User_Email, SOLUTION: data.Solution, BUY_PROCESS: data.BuyProcess,\r\n METRIC_TYPE: data.MetricType, MATCH_FILTER: data.MatchFilter\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getMatchedSupplier(objEnablement) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getMatchedSupplierAPI,\r\n data: {\r\n DMC_ID: objEnablement.DMC_ID, VS_ID: objEnablement.VS_ID, USER_EMAIL: objEnablement.User_Email, MATCH_FILTER: objEnablement.MatchFilter\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getMatchedSummary(objEnablement) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getMatchedSummaryAPI,\r\n data: {\r\n DMC_ID: objEnablement.DMC_ID, VS_ID: objEnablement.VS_ID, USER_EMAIL: objEnablement.User_Email, MATCH_FILTER: objEnablement.MatchFilter\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getSupplierByReason(objEnablement) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getSupplierByReasonAPI,\r\n data: {\r\n DMC_ID: objEnablement.DMC_ID, VS_ID: objEnablement.VS_ID, USER_EMAIL: objEnablement.User_Email\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getBuyProcessSummary(data) {\r\n return (dispatch) => {\r\n dispatch(scopeSummaryLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getBuyProcessSummaryAPI,\r\n data: {\r\n DMC_ID: data.DMC_ID, VS_ID: data.VS_ID, USER_EMAIL: data.USER_ID\r\n },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n //dispatch(scopeSummarySuccess(response))\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function storeUserSpendSelection(VSId, DMCId, spendModule, spendSubModule, criteriaName, selectedValue, userEmail) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { VSId: VSId, DMCId: DMCId, SpendModule: spendModule, SpendSubModule: spendSubModule, CriteriaName: criteriaName, UserPreference: selectedValue, Email: userEmail },\r\n url: storeUserSpendSelectionAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\n//World Map\r\nexport function getHeatMapData(RequestFileId, ValueStoryId, UserId) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMCID: RequestFileId, VSID: ValueStoryId, Email: UserId },\r\n url: getHeatMapDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getWorldMapSuppliersDetails(data) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getWorldMapSuppliersDetailsAPI,\r\n data: data,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\n//Spend Manager - Admin section under Menu\r\nexport function getEnablementResourceParameters(DMCId, VSId, userEmail) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMC_ID: DMCId, VS_ID: VSId, USER_EMAIL: userEmail },\r\n url: getEnablementResourceParametersAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function updateEnablementResourceParameters(records, model) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { rowData : records, model : model },\r\n url: updateEnablementResourceParametersAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getEnablementResourceParametersAdmin(soltionInScope) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: {SolutionInScope:soltionInScope},\r\n url: getEnablementResourceParametersAdminAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function updateEnablementResourceParametersAdmin(records) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: updateEnablementResourceParametersAdminAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getFlightPlanningDocParameters() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getFlightPlanningDocParametersAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function updateFlightPlanningDocParameters(records) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: updateFlightPlanningDocParametersAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getFlightPlanningSpendParameters() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getFlightPlanningSpendParametersAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function updateFlightPlanningSpendParameters(records) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: updateFlightPlanningSpendParametersAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getFlightPlanningTransactingBuyRelationship() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getFlightPlanningTransactingBuyRelationshipAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function updateFlightPlanningTransactingBuyRelationship(records) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: updateFlightPlanningTransactingBuyRelationshipAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getFlightPlanningNetworkEnablementMatchTypeParameters() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getFlightPlanningNetworkEnablementMatchTypeParametersAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function updateFlightPlanningNetworkEnablementMatchTypeParameters(records) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: updateFlightPlanningNetworkEnablementMatchTypeParametersAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getSupplierChoiceEnablementParametersDetails() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getSupplierChoiceEnablementParametersAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getFlightPlanningRecommendationDetails() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getFlightPlanningRecommendationDetailsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function updateFlightPlanningRecommendationDetails(records) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: updateFlightPlanningRecommendationDetailsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function updateOnboardingworkstreamDetails(records) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: updateOnboardingworkstreamDetailsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getWaveWeightCategoryDetails() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getWaveWeightCategoryDetailsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function updateWaveWeightCategoryDetails(records) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: updateWaveWeightCategoryDetailsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function fetchRampScheduleFactor() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: fetchRampScheduleFactorAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function updateRampScheduleFactor(data) {\r\n\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: data,\r\n url: updateRampScheduleFactorAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function fetchGoLiveVsKickOffWeekData() {\r\n\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: fetchGoLiveVsKickOffWeekDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function fetchStandardAccountYieldFactor() {\r\n\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: fetchStandardAccountYieldFactorAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function updateStandardAccountYield(data) {\r\n\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: data,\r\n url: updateStandardAccountYieldAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function updateGoLiveVsKickOffWeekData(data) {\r\n\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: data,\r\n url: updateGoLiveVsKickOffWeekDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getAllGICS() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n dispatch(getAllIndustriesGicsLoading(true))\r\n return axios({\r\n method: 'get',\r\n url: getAllGICSAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getAllIndustriesGicsLoading(false))\r\n dispatch(getAllIndustriesGicsSuccess(true))\r\n return response\r\n }).catch((error) => {\r\n dispatch(getAllIndustriesGicsFailure(error))\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function updateGICS(records) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n dispatch(getUpdateGicsLoading(true))\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: updateGICSAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getUpdateGicsLoading(false))\r\n dispatch(getUpdateGicsSuccess(true))\r\n return response\r\n }).catch((error) => {\r\n dispatch(getUpdateGicsFailure(error))\r\n return error\r\n })\r\n }\r\n}\r\n\r\n\r\nexport function getCountryDetails() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n dispatch(getCountryDetailsLoading(true))\r\n return axios({\r\n method: 'get',\r\n url: getCountryDetailsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function updateCountryDetails(records) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n dispatch(updateCountryDetailsLoading(true))\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: updateCountryDetailsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(updateCountryDetailsLoading(false))\r\n dispatch(updateCountryDetailsSuccess(true))\r\n return response\r\n }).catch((error) => {\r\n dispatch(updateCountryDetailsFailure(error))\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function fetchL4IndustryValues() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: fetchL4IndustryValuesAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function uploadL4IndustryPriorityData(records) {\r\n return (dispatch) => {\r\n dispatch(getDetailedFileFileRecordsInsertedLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: uploadL4IndustryPriorityDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getDetailedFileFileRecordsInsertedLoading(false))\r\n dispatch(getDetailedFileRecordsInsertedSuccess(true))\r\n return response\r\n }).catch((error) => {\r\n dispatch(getDetailedFileFileRecordsInsertedFailure(error))\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function getSpendParameters(userId) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getSpendParametersAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function updateSpendParameters(parameters) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: updateSpendParametersAPI,\r\n data: parameters,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function defineScopeSuccess(message) {\r\n return {\r\n type: DEFINESCOPE_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function defineScopeLoading(bool) {\r\n return {\r\n type: DEFINESCOPE_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function defineScopeFailure(error) {\r\n return {\r\n type: DEFINESCOPE_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function getDetailedFileSuccess(message) {\r\n return {\r\n type: GET_DETAILEDFILE_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function getDetailedFileLoading(bool) {\r\n return {\r\n type: GET_DETAILEDFILE_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function addSelectedColumnFailure(error) {\r\n return {\r\n type: ADD_SELECTED_COLUMNS_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function addSelectedColumnSuccess(message) {\r\n return {\r\n type: ADD_SELECTED_COLUMNS_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function addSelectedColumnLoading(bool) {\r\n return {\r\n type: ADD_SELECTED_COLUMNS_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getSelectedColumnFailure(error) {\r\n return {\r\n type: GET_SELECTED_COLUMNS_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function getSelectedColumnSuccess(message) {\r\n return {\r\n type: GET_SELECTED_COLUMNS_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function getSelectedColumnLoading(bool) {\r\n return {\r\n type: GET_SELECTED_COLUMNS_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getDetailedFileFailure(error) {\r\n return {\r\n type: GET_DETAILEDFILE_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function addFavoriteFieldsLoading(bool) {\r\n return {\r\n type: ADD_FAVORITE_FIELD_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function addFavoriteFieldsSuccess(message) {\r\n return {\r\n type: ADD_FAVORITE_FIELD_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function getFavoriteFieldsLoading(bool) {\r\n return {\r\n type: GET_FAVORITE_FIELD_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getFavoriteFieldsSuccess(message) {\r\n return {\r\n type: GET_FAVORITE_FIELD_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function editFavoriteFieldLoading(bool) {\r\n return {\r\n type: EDIT_FAVORITE_FIELD_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function editFavoriteFieldSuccess(message) {\r\n return {\r\n type: EDIT_FAVORITE_FIELD_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function deleteFavoriteFieldLoading(bool) {\r\n return {\r\n type: DELETE_FAVORITE_FIELD_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function deleteFavoriteFieldSuccess(message) {\r\n return {\r\n type: DELETE_FAVORITE_FIELD_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function removeColumnsLoading(bool) {\r\n return {\r\n type: REMOVE_COLUMNS_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function removeColumnsSuccess(message) {\r\n return {\r\n type: REMOVE_COLUMNS_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\n\r\nexport function enablementInsightSuccess(message) {\r\n return {\r\n type: ENABLEMENTINSIGHT_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function enablementInsightLoading(bool) {\r\n return {\r\n type: ENABLEMENTINSIGHT_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function enablementInsightFailure(error) {\r\n return {\r\n type: ENABLEMENTINSIGHT_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function getResultLoading(bool) {\r\n return {\r\n type: GET_RESULT_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getResultSuccess(message) {\r\n return {\r\n type: GET_RESULT_SUCCESS,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function getResultFailure(error) {\r\n return {\r\n type: GET_RESULT_FAILURE,\r\n payload: error\r\n };\r\n}\r\n\r\nexport function setPopUpTabLoadingStatus(bool) {\r\n return {\r\n type: SET_POPUP_TAB_LOADING_STATUS,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function detailedFileFilters(filters) {\r\n return {\r\n type: 'Deatiled-Filters',\r\n payload: filters\r\n };\r\n}\r\n\r\nexport function detailedFileFilterText(filter) {\r\n return {\r\n type: 'Deatiled-FilterText',\r\n payload: filter\r\n };\r\n}\r\n\r\nexport function getAllIndustriesLoading(bool) {\r\n return {\r\n type: GET_ALLINDUSTRIES_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getAllIndustriesSuccess(message) {\r\n return {\r\n type: GET_ALLINDUSTRIES_SUCCESS,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function getAllIndustriesFailure(error) {\r\n return {\r\n type: GET_ALLINDUSTRIES_FAILURE,\r\n payload: error\r\n };\r\n}\r\n\r\nexport function getAllGICSLoading(bool) {\r\n return {\r\n type: GET_ALLINDUSTRIES_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getAllIndustriesTreeStructure(message) {\r\n return {\r\n type: GET_ALLINDUSTRIESTREESTRUCTURE_SUCCESS,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function selectedIndustryDetails(message) {\r\n return {\r\n type: STORE_OVERRIDED_INDUSTRY,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function selectedEnablementWaveDetails(message) {\r\n return {\r\n type: STORE_ENABLEMENT_WAVE_VALUE,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function setSearchClearFlag(message) {\r\n return {\r\n type: SET_SEARCHCLEAR_FLAG,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function getDetailedFileRecordsInsertedSuccess(message) {\r\n return {\r\n type: GET_DETAILEDFILEROWINSERTED_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function getDetailedFileFileRecordsInsertedLoading(bool) {\r\n return {\r\n type: GET_DETAILEDFILEROWINSERTED_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getDetailedFileFileRecordsInsertedFailure(error) {\r\n return {\r\n type: GET_DETAILEDFILEROWINSERTED_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function pendingChanges(changes) {\r\n return {\r\n type: 'DeatiledFile-Changes',\r\n payload: changes\r\n };\r\n}\r\n\r\nexport function saveKPIOnRedirect(changes) {\r\n return {\r\n type: 'SaveKPIOnRedirect-Changes',\r\n payload: changes\r\n };\r\n}\r\n\r\nexport function saveSpendParametersOnRedirect(changes) {\r\n return {\r\n type: 'SaveSpendParametersOnRedirect-Changes',\r\n payload: changes\r\n };\r\n}\r\n\r\nexport function deleteIntermediateKPIOnRedirect(changes) {\r\n return {\r\n type: 'DeleteKPIOnRedirect-Changes',\r\n payload: changes\r\n };\r\n}\r\n\r\nexport function scopeSummarySuccess(message) {\r\n return {\r\n type: SCOPESUMMARY_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function scopeSummaryLoading(bool) {\r\n return {\r\n type: SCOPESUMMARY_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function scopeSummaryFailure(error) {\r\n return {\r\n type: SCOPESUMMARY_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function scopeSummaryBuyProcessSuccess(message) {\r\n return {\r\n type: SCOPESUMMARYBUYPROCESS_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function scopeSummaryBuyProcessLoading(bool) {\r\n return {\r\n type: SCOPESUMMARYBUYPROCESS_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function scopeSummaryBuyProcessFailure(error) {\r\n return {\r\n type: SCOPESUMMARYBUYPROCESS_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function enablementSuccess(message) {\r\n return {\r\n type: ENABLEMENT_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function enablementLoading(bool) {\r\n return {\r\n type: ENABLEMENT_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function enablementFailure(error) {\r\n return {\r\n type: ENABLEMENT_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function storeEnablementInsightSelectedFilter(message) {\r\n return {\r\n type: STORE_ENABLEMENTINSIGHT_FILTER,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function setYourFileRequestDetails(requestDetails) {\r\n return {\r\n type: GET_YOURFILE_REQUESTDETAILS,\r\n payload: requestDetails\r\n }\r\n}\r\n\r\nexport function setValueStoryDmciDetails(valueStoryDMCIDRequests) {\r\n return {\r\n type: GET_YOURFILE_VALUESTORYREQUESTDETAILS,\r\n payload: valueStoryDMCIDRequests\r\n }\r\n}\r\n\r\nexport function clearCurrentActiveRequest() {\r\n return {\r\n type: CLEAR_CURRENT_ACTIVE_REQUEST,\r\n payload: ''\r\n }\r\n}\r\n\r\nexport function setMappedColumn(columnData) {\r\n return {\r\n type: GET_MAPPEDCOLUMN,\r\n payload: columnData\r\n }\r\n}\r\n\r\nexport function setResultSummaryDetails(requestDetails) {\r\n return {\r\n type: GET_RESULTSUMMARY_DETAILS,\r\n payload: requestDetails\r\n }\r\n}\r\n\r\nexport function setTopDetails(requestTopDetails) {\r\n return {\r\n type: GET_TOP_DETAILS,\r\n payload: requestTopDetails\r\n }\r\n}\r\n\r\nexport function storeSupplierSKEY(message) {\r\n return {\r\n type: STORE_SUPPLIER_SKEY,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function storeVendorDetails(message) {\r\n return {\r\n type: STORE_VENDOR_DETAILS,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function storeFinalIndustryID(message) {\r\n return {\r\n type: STORE_INDUSTRY_ID,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function storeInputAndClassificationDetails(message) {\r\n return {\r\n type: STORE_INPUTANDCLASSIFICATION_DETAILS,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function getInputAndClassificationDataLoading(bool) {\r\n return {\r\n type: GET_INPUTANDCLASSIFICATION_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getInputAndClassificationDataSuccess(message) {\r\n return {\r\n type: GET_INPUTANDCLASSIFICATION_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function getInputAndClassificationDataFailure(error) {\r\n return {\r\n type: GET_INPUTANDCLASSIFICATION_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function getCapIQDataBlank(bool) {\r\n return {\r\n type: GET_CAPIQDATA_BLANK,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getSPCapitalIQLoading(bool) {\r\n return {\r\n type: GET_SPCAPITALIQ_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getSPCapitalIQSuccess(message) {\r\n return {\r\n type: GET_SPCAPITALIQ_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function getSPCapitalIQFailure(error) {\r\n return {\r\n type: GET_SPCAPITALIQ_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function getSPCapitalIQUltimateParentLoading(bool) {\r\n return {\r\n type: GET_SPCAPITALIQULTIMATEPARENT_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getSPCapitalIQUltimateParentSuccess(message) {\r\n return {\r\n type: GET_SPCAPITALIQULTIMATEPARENT_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function getSPCapitalIQUltimateParentFailure(error) {\r\n return {\r\n type: GET_SPCAPITALIQULTIMATEPARENT_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function getSupplierDrillScopeDataLoading(bool) {\r\n return {\r\n type: GET_SUPPLIERDRILLSCOPE_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getSupplierDrillScopeDataSuccess(message) {\r\n return {\r\n type: GET_SUPPLIERDRILLSCOPE_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function getSupplierDrillScopeDataFailure(error) {\r\n return {\r\n type: GET_SUPPLIERDRILLSCOPE_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function trackSupplierDrillDownChanges(message) {\r\n return {\r\n type: TRACK_SUPPLIERDRILLDOWN_PENDING_CHANGES,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function trackSupplierDrillDownSave(message) {\r\n return {\r\n type: TRACK_SUPPLIERDRILLDOWN_SAVE_CHANGES,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function getSupplierDrilldownUpdatedSuccess(message) {\r\n return {\r\n type: GET_SUPPLIERDRILLDOWNUPDATED_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function getSupplierDrilldownUpdatedLoading(bool) {\r\n return {\r\n type: GET_SUPPLIERDRILLDOWNUPDATED_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getSupplierDrilldownUpdatedFailure(error) {\r\n return {\r\n type: GET_SUPPLIERDRILLDOWNUPDATED_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function getIndustryDrillScopeDetailsLoading(bool) {\r\n return {\r\n type: GET_INDUSTRYDRILLSCOPE_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getIndustryDrillScopeDetailsSuccess(message) {\r\n return {\r\n type: GET_INDUSTRYDRILLSCOPE_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function getIndustryDrillScopeDetailsFailure(error) {\r\n return {\r\n type: GET_INDUSTRYDRILLSCOPE_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function storeIndustryGICS_ID(message) {\r\n return {\r\n type: STORE_GICS_ID,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function storeIndustryDetails(message) {\r\n return {\r\n type: STORE_INDUSTRY_DETAILS,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function getIndustrySpendSuccess(message) {\r\n return {\r\n type: GET_INDUSTRYSPEND_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function getIndustrySpendLoading(bool) {\r\n return {\r\n type: GET_INDUSTRYSPEND_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getIndustrySpendUpdatedSuccess(message) {\r\n return {\r\n type: GET_INDUSTRYSPEND_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function getIndustrySpendUpdatedLoading(bool) {\r\n return {\r\n type: GET_INDUSTRYSPEND_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getIndustrySpendUpdatedFailure(error) {\r\n return {\r\n type: GET_INDUSTRYSPEND_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function industryDrillScopeUpdateSuccess(message) {\r\n return {\r\n type: INDUSTRYDRILLSCOPEUPDATE_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function industryDrillScopeUpdateLoading(bool) {\r\n return {\r\n type: INDUSTRYDRILLSCOPEUPDATE_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function industryDrillScopeUpdateFailure(error) {\r\n return {\r\n type: INDUSTRYDRILLSCOPEUPDATE_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function trackIndustryDrillScopeChanges(message) {\r\n return {\r\n type: TRACK_INDUSTRYDRILLSCOPE_PENDING_CHANGES,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function industrySupplierSuccess(message) {\r\n return {\r\n type: INDUSTRYSUPPLIER_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function industrySupplierLoading(bool) {\r\n return {\r\n type: INDUSTRYSUPPLIER_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function industrySupplierFailure(error) {\r\n return {\r\n type: INDUSTRYSUPPLIER_FAILURE,\r\n payload: error\r\n }\r\n}\r\n\r\nexport function getIndustryCapIQSuccess(message) {\r\n return {\r\n type: GET_INDUSTRYCAPIQ_SUCCESS,\r\n payload: message\r\n }\r\n}\r\n\r\nexport function getIndustryCapIQLoading(bool) {\r\n return {\r\n type: GET_INDUSTRYCAPIQ_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function trackUserSpendSelections(message) {\r\n return {\r\n type: TRACK_USER_SPEND_SELECTIONS,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function selectedCapIqIdDetails(message) {\r\n return {\r\n type: STORE_OVERRIDED_CAPIQID,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function redirectFromEnablementTab(flag) {\r\n return {\r\n type: REDIRECT_FROM_ENABLEMENT_TAB,\r\n payload: flag\r\n }\r\n}\r\n\r\nexport function redirectFromWizard(flag) {\r\n return {\r\n type: REDIRECT_FROM_WIZARD,\r\n payload: flag\r\n }\r\n}\r\n\r\nexport function getAllIndustriesGicsLoading(bool) {\r\n return {\r\n type: GET_ALLINDUSTRIES_GICS_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getAllIndustriesGicsSuccess(message) {\r\n return {\r\n type: GET_ALLINDUSTRIES_GICS_SUCCESS,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function getAllIndustriesGicsFailure(error) {\r\n return {\r\n type: GET_ALLINDUSTRIES_GICS_FAILURE,\r\n payload: error\r\n };\r\n}\r\n\r\n\r\nexport function getUpdateGicsLoading(bool) {\r\n return {\r\n type: GET_UPDATE_GICS_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getUpdateGicsSuccess(message) {\r\n return {\r\n type: GET_UPDATE_GICS_SUCCESS,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function getUpdateGicsFailure(error) {\r\n return {\r\n type: GET_UPDATE_GICS_FAILURE,\r\n payload: error\r\n };\r\n}\r\n\r\n\r\nexport function getCountryDetailsLoading(bool) {\r\n return {\r\n type: GET_COUNTRYDETAILS_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function getCountryDetailsSuccess(message) {\r\n return {\r\n type: GET_COUNTRYDETAILS_SUCCESS,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function getCountryDetailsFailure(error) {\r\n return {\r\n type: GET_COUNTRYDETAILS_FAILURE,\r\n payload: error\r\n };\r\n}\r\n\r\nexport function updateCountryDetailsLoading(bool) {\r\n return {\r\n type: UPDATE_COUNTRYDETAILS_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function updateCountryDetailsSuccess(message) {\r\n return {\r\n type: UPDATE_COUNTRYDETAILS_SUCCESS,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function updateCountryDetailsFailure(error) {\r\n return {\r\n type: UPDATE_COUNTRYDETAILS_FAILURE,\r\n payload: error\r\n };\r\n}\r\n\r\nexport function userDetailsLoading(bool) {\r\n return {\r\n type: USER_DETAILS_LOADING,\r\n payload: bool\r\n }\r\n}\r\n\r\nexport function userDetailsSuccess(response) {\r\n return {\r\n type: USER_DETAILS_SUCCESS,\r\n payload: response\r\n };\r\n}\r\n\r\nexport function userDetailsFailure(error) {\r\n return {\r\n type: USER_DETAILS_FAILURE,\r\n payload: error\r\n };\r\n}\r\n\r\n//vendor files\r\nexport function getVendorFiles(DMCId, VSId, userEmail) {\r\n return (dispatch) => {\r\n dispatch(getDetailedFileLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMCId: DMCId, VSId: VSId, Email: userEmail },\r\n url: getVendorFilesAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getDetailedFileSuccess(false))\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\n//AccountParameters solution scope change\r\n\r\nexport function solutionScopeChanged(val) {\r\n return {\r\n type: 'SOLUTION_SCOPE_CHANGED',\r\n payload: val\r\n }\r\n}\r\n\r\nexport function kpiModelChanged(val) {\r\n return {\r\n type: 'KPI_MODEL_CHANGED',\r\n payload: val\r\n }\r\n}\r\n\r\n//AV-877\r\nexport function getSpendFilesData(DMCId, VSId, userEmail) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMCId: DMCId, VSId: VSId, Email: userEmail },\r\n url: getSpendFilesDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function fetchMarketPlaceEligibleValues() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: fetchMarketPlaceEligibleAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function updateMarketPlaceEligibleValues(records) {\r\n return (dispatch) => {\r\n dispatch(getDetailedFileFileRecordsInsertedLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: updateMarketPlaceEligibleValuesAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getDetailedFileFileRecordsInsertedLoading(false))\r\n dispatch(getDetailedFileRecordsInsertedSuccess(true))\r\n return response\r\n }).catch((error) => {\r\n dispatch(getDetailedFileFileRecordsInsertedFailure(error))\r\n return error\r\n })\r\n }\r\n}\r\n\r\n//AV-880\r\nexport function getQualityAssessmentData() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getQualityAssessmentDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function updateQualityAssessmentData(data) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: data,\r\n url: updateQualityAssessmentDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\n\r\nexport function getSpendQualityAssessmentData() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getSpendQualityAssessmentDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function updateSpendQualityAssessmentData(data) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: data,\r\n url: updateSpendQualityAssessmentDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function fetchIndirectVisibleSolutionInScopeValues() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: fetchVisibleSolutionInScopeValuesAPI,\r\n url: fetchIndirectVisibleSolutionInScopeValuesAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function fetchSolutionInScopeValues() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: fetchSolutionInScopeValuesAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function fetchVisibleSolutionInScopeValues() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: fetchVisibleSolutionInScopeValuesAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function updateSolutionInScopeValues(data) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: data,\r\n url: updateSolutionInScopeValuesAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function fetchANIdBPIdDetails() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: fetchANIdBPIdDetailsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function addANIDDetails(data) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: data,\r\n url: addANIDDetailsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n\r\n\r\nexport function uploadSpendCollectionData(records) {\r\n return (dispatch) => {\r\n dispatch(getDetailedFileFileRecordsInsertedLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: uploadSpendCollectionDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getDetailedFileFileRecordsInsertedLoading(false))\r\n dispatch(getDetailedFileRecordsInsertedSuccess(true))\r\n return response\r\n }).catch((error) => {\r\n dispatch(getDetailedFileFileRecordsInsertedFailure(error))\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function fetchSpendCollectionColumnDetails() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: fetchSpendCollectionColumnAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function getCollectCustomerSpendDetails(records) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: getCollectCustomerSpendDetailsAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function saveCollectCustomerSpend(records) {\r\n return (dispatch) => {\r\n dispatch(getDetailedFileFileRecordsInsertedLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: saveCollectCustomerSpendAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getDetailedFileFileRecordsInsertedLoading(false))\r\n dispatch(getDetailedFileRecordsInsertedSuccess(true))\r\n return response\r\n }).catch((error) => {\r\n dispatch(getDetailedFileFileRecordsInsertedFailure(error))\r\n return error\r\n })\r\n }\r\n}\r\n\r\nexport function isEnablementStrategyContainerPage(obj) {\r\n return {\r\n type: 'GET_IS_KPI_STRATEGY_PAGE',\r\n payload: obj\r\n };\r\n}\r\n\r\nexport function isSpendParameterPage(obj) {\r\n return {\r\n type: 'GET_IS_SPEND_PARAMETER_PAGE',\r\n payload: obj\r\n };\r\n}\r\n\r\nexport function updateEnablementStrategyCurrentFocus(VS_ID, DMC_ID, ENABLEMENT_STRATEGY_FOCUS) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: updateEnablementStrategyCurrentFocusAPI,\r\n data: { VS_ID: VS_ID, DMC_ID: DMC_ID, ENABLEMENT_STRATEGY_FOCUS: ENABLEMENT_STRATEGY_FOCUS },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n}\r\n","\r\nimport React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\n// Utils\r\nimport moment from 'moment'\r\nimport classnames from 'classnames'\r\nimport ScrollArea from 'react-scrollbar'\r\n\r\nconst ValueStoryList = (props) =>\r\n\t\r\n\t\t\t
\r\n\t\r\n\t\t\t\t
\r\n\t\t\t{Parser(props.content.title)}
\r\n\t\t\t\t- \r\n\t\t\t\t\t
- Company \r\n\t\t\t\t\t
- {props.content.company} \r\n\t\t\t\t\t
- Industry \r\n\t\t\t\t\t
- {props.content.industry} \r\n\t\t\t\t\t
- Employees \r\n\t\t\t\t\t
- {props.content.employees} \r\n\t\t\t\t\t
- Objectives \r\n\t\t\t\t\t
- \r\n\t\t\t\t\t\t
- \r\n\t\t\t\t\t\t\t{props.content.objectives.map((data) =>\r\n\t\t\t\t\t\t\t\t
- {Parser(data)} \r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t - Solutions \r\n\t\t\t\t\t
- \r\n\t\t\t\t\t\t
- \r\n\t\t\t\t\t\t\t{props.content.solution.map((data) =>\r\n\t\t\t\t\t\t\t\t
- {Parser(data)} \r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\t{props.content.stats.map((data) =>\r\n\t\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t)}\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t{data.value}
\r\n\t\t\t\t\t\t\t\t{data.title}
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t{props.content.quote.position}
\r\n\t\t\t\t\t{props.content.quote.company}\r\n\t\t\t\t\r\n\t\t\t
\r\n\t\t{Parser(props.content.quote.description)}\r\n\t\t\t\t\r\n\t\t\t\t\t{props.content.quote.source}
\r\n\t\t\t\t\t{props.content.quote.position}
\r\n\t\t\t\t\t{props.content.quote.company}\r\n\t\t\t\t\r\n\t\t\t
\r\n\t\t\r\n\t\t\t{\r\n\t\t\t\tprops.isanyCreatorStory === true ?\r\n\t\t\t\t\t(Array.from(props.valueStories).map((data, i) =>\r\n\t\t\t\t\t\t(localStorage.getItem('id') === data.Id) ?\r\n\t\t\t\t\t\t\t \r\n\t
\r\nexport default ValueStoryList\r\n\r\nValueStoryList.propTypes = {\r\n\tvalueStories: PropTypes.array,\r\n\tselectedValueStory: PropTypes.number,\r\n\thandleValueStoryClick: PropTypes.func.isRequired,\r\n\topenValueStory: PropTypes.func.isRequired\r\n}","import React, { useState } from 'react';\r\nimport classNames from \"classnames\";\r\nimport { stringContainsSearchTerms } from 'utils/Utils'\r\n\r\nclass TextFilterRenderer extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n filterTerm: '',\r\n rawObj: []\r\n }\r\n\r\n this.handleChange = this.handleChange.bind(this)\r\n this.clear = this.clear.bind(this)\r\n this.filterValues = this.filterValues.bind(this)\r\n }\r\n\r\n clear() {\r\n this.setState({filterTerm: ''})\r\n }\r\n\r\n handleChange(event) {\r\n const { value } = event.target;\r\n this.setState({filterTerm: value});\r\n if (this.props.onChange) {\r\n this.props.onChange({ \r\n filterTerm: value, \r\n rawValue: value, \r\n column: this.props.column, \r\n clear: this.clear, \r\n filterValues: this.filterValues, \r\n type: TextFilterRenderer});\r\n }\r\n }\r\n \r\n filterValues(row, columnFilter, columnKey) {\r\n let include = true;\r\n if (columnFilter === null) {\r\n include = false;\r\n } else {\r\n var term = columnFilter.filterTerm;\r\n if(columnFilter.filterTerm === '!') {\r\n include = row[columnKey] !== '0' && row[columnKey] !== ''\r\n }\r\n else if(columnFilter.filterTerm === '!!') {\r\n include = row[columnKey] === '' || row[columnKey] === undefined || row[columnKey] === null\r\n }\r\n else if(columnFilter.filterTerm.startsWith('!')) {\r\n term = term.substring(1)\r\n include = !stringContainsSearchTerms(row[columnKey], term);\r\n } else {\r\n include = stringContainsSearchTerms(row[columnKey], term);\r\n }\r\n }\r\n\r\n return include;\r\n }\r\n\r\n render() {\r\n return ( this.props.column.filterable? \r\n \r\n\t\t\t
\r\n\t\t\r\n\t\t\t\t
\r\n\t\t\r\n\t\t\t\t\t
\r\n\t\t\t{props.content.valueStoryNameHeader}
\r\n\t\t\t\t\t{props.content.companyNameHeader}
\r\n\t\t\t\t\t{props.content.dateHeader}
\r\n\t\t\t\t props.handleValueStoryClick(data.VSId)}\r\n\t\t\t\t\t\t\t\tonDoubleClick={() => props.openValueStory(data.VSId)}>\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t: null\r\n\t\t\t\t\t)) : null\r\n\t\t\t}\t\t\t\r\n\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\tprops.enableShareValueStory ?\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t{data.ValueStoryName}
\r\n\t\t\t\t\t\t\t\t\t\t{data.Organization}
\r\n\t\t\t\t\t\t\t\t\t\t{moment(data.ModifiedDate).format('ddd, Do MMM YYYY, h:mm:ss a')}
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
: null\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\r\n
: \r\n );\r\n }\r\n}\r\n\r\nexport default TextFilterRenderer","import React from 'react';\r\nimport classNames from \"classnames\";\r\nimport { roundFix } from 'utils/Utils'\r\n\r\nconst columnStyle = {\r\n float: 'left',\r\n marginRight: 5,\r\n maxWidth: '100%'\r\n };\r\n\r\nconst badgeStyle = {\r\n cursor: 'help'\r\n };\r\n\r\nconst tooltipText = 'Input Methods: Range (x-y), Greater Than (>x), Less Than (\r\n
: \r\n );\r\n }\r\n}\r\n\r\nexport default NumericFilterRenderer","import React from 'react';\r\nimport { Filters } from \"react-data-grid-addons\";\r\nimport { stringContainsSearchTerms, isEmptyArray } from 'utils/Utils'\r\n\r\nconst {\r\n AutoCompleteFilter\r\n} = Filters;\r\n\r\nexport default class AutoCompleteFilterAdv extends AutoCompleteFilter {\r\n constructor(props) {\r\n super(props)\r\n }\r\n\r\n columnValueContainsSearchTerms(columnValue, filterTermValue) {\r\n if (columnValue !== undefined && filterTermValue !== undefined) {\r\n const strColumnValue = columnValue.toString();\r\n const strFilterTermValue = filterTermValue.toString();\r\n const checkValueIndex = strColumnValue.trim().toLowerCase().indexOf(strFilterTermValue.trim().toLowerCase());\r\n return checkValueIndex !== -1 && (checkValueIndex !== 0 || strColumnValue === strFilterTermValue);\r\n }\r\n return false;\r\n }\r\n \r\n filterValues(row, columnFilter, columnKey) {\r\n let include = true;\r\n if (columnFilter === null) {\r\n include = false;\r\n } else if (columnFilter.filterTerm && !isEmptyArray(columnFilter.filterTerm)) {\r\n if (columnFilter.filterTerm.length) {\r\n let match = columnFilter.filterTerm.findIndex(item => {\r\n return item.value === 'Not Included'\r\n }) === -1\r\n include = columnFilter.filterTerm.some(filterTerm => {\r\n return row[columnKey] === filterTerm.value\r\n });\r\n\r\n if(!include && !match)\r\n include = true\r\n else if(include && !match)\r\n include = false\r\n \r\n } else {\r\n let match = true;\r\n if(columnFilter.filterTerm.value.startsWith('!')) {\r\n match = false;\r\n }\r\n include = row[columnKey] === columnFilter.filterTerm.value === match;\r\n }\r\n }\r\n return include;\r\n }\r\n}","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\n\r\nexport default class DivEditor extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { cellValue: props.value };\r\n }\r\n \r\n getValue() {\r\n let upd = {}\r\n upd[this.props.column.key] = 'DUMMY'\r\n return upd;\r\n /*return { fromRow: this.props.rowData, toRow: this.props.rowData, updated: upd }*/\r\n }\r\n \r\n getInputNode() {\r\n return ReactDOM.findDOMNode(this).getElementsByTagName(\"input\")[0];\r\n }\r\n \r\n handleChangeComplete = event => {\r\n this.setState({ cellValue: event.target.value });\r\n };\r\n\r\n _handleKeyDown = (e) => {\r\n if (e.key === 'Enter') {\r\n e.stopPropagation()\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n }","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport moment from 'moment'\r\n\r\nimport { Editors } from \"react-data-grid-addons\";\r\nconst { SimpleTextEditor } = Editors;\r\n\r\nexport default class DateEditor extends SimpleTextEditor {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n validate(val) {\r\n if(Object.values(val)[0] === '') {\r\n return true;\r\n }\r\n \r\n return moment(Object.values(val)[0], 'YYYY-MM-DD', true).isValid();\r\n }\r\n}","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport DatePicker from 'react-datepicker';\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport moment from 'moment'\r\nimport { store } from 'index'\r\n\r\nexport default class CalendarDatePicker extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { cellValue: props.value, startDate: new Date(), isDateSelected: false, isDateTyped: false };\r\n this.clear = this.clear.bind(this)\r\n }\r\n\r\n getValue() {\r\n let upd = {}\r\n upd[this.props.column.key] = this.state.cellValue\r\n return upd;\r\n }\r\n\r\n getInputNode() {\r\n return ReactDOM.findDOMNode(this).getElementsByTagName(\"input\")[0];\r\n }\r\n\r\n handleChangeComplete = date => {\r\n if (this.state.isDateTyped === false) {\r\n var momentObj = moment(date, 'MM/DD/YYYY');\r\n var momentString = momentObj.format('MM/DD/YYYY');\r\n Object.assign(this.state, { startDate: date, cellValue: momentString, isDateSelected: true });\r\n }\r\n this.props.onBlur();\r\n };\r\n\r\n handleDateChangeRaw = (e) => {\r\n let s = document.getElementById('date_picker_id')\r\n s.value = moment(this.state.cellValue).format(\"MM/DD/YYYY\");\r\n Object.assign(this.state, { isDateTyped: true });\r\n this.props.onBlur();\r\n }\r\n\r\n clear() {\r\n var self = this;\r\n Object.assign(self.state, { startDate: null, cellValue: null, isDateSelected: false });\r\n this.props.onBlur();\r\n }\r\n\r\n render() {\r\n const state = store.getState()\r\n var clearDate = state.content.spendAnalysis.detailedFile.clearDate;\r\n return (\r\n \r\n 20\"\r\n className=\"form-control input-sm\"\r\n value={this.state.value}\r\n onChange={this.handleChange}\r\n onKeyPress={this.handleKeyPress}\r\n />\r\n
\r\n \r\n ?\r\n
\r\n \r\n \r\n this.handleDateChangeRaw(event.target.value)\r\n }\r\n />\r\n {this.state.cellValue !== null && this.state.cellValue !== '' ?\r\n : null}\r\n
\r\n );\r\n }\r\n}","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { Editors } from \"react-data-grid-addons\";\r\nconst { SimpleTextEditor } = Editors;\r\n\r\nexport default class NumericEditor extends SimpleTextEditor {\r\n constructor(props) {\r\n super(props);\r\n }\r\n \r\n validate(val) {\r\n if(Object.values(val)[0] === '') {\r\n return true;\r\n }\r\n \r\n return !isNaN(Object.values(val)[0])\r\n }\r\n}","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\n\r\nexport default class TextEditor extends React.Component {\r\n constructor(props) {\r\n super(props); \r\n //this.state = { cellValue: props.value };\r\n this.state = { cellValue: '' };\r\n }\r\n \r\n getValue() {\r\n let upd = {}\r\n upd[this.props.column.key] = this.state.cellValue\r\n return upd;\r\n /*return { fromRow: this.props.rowData, toRow: this.props.rowData, updated: upd }*/\r\n }\r\n \r\n getInputNode() {\r\n return ReactDOM.findDOMNode(this).getElementsByTagName(\"input\")[0];\r\n }\r\n \r\n handleChangeComplete = event => {\r\n this.setState({ cellValue: event.target.value });\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n }","import React from 'react'\r\n\r\nimport TextfilterRenderer from 'UI/TextFilterRenderer';\r\nimport NumericFilterRenderer from 'UI/NumericFilterRenderer';\r\nimport AutoCompleteFilterAdv from 'UI/AutoCompleteFilterAdv';\r\n\r\nimport DivEditor from 'UI/DivEditor'\r\nimport DateEditor from 'UI/DateEditor'\r\nimport CalendarDatePicker from 'UI/CalendarDatePicker'\r\nimport NumericEditor from 'UI/NumericEditor'\r\nimport TextEditor from 'UI/TextEditor';\r\n\r\nimport { Editors } from \"react-data-grid-addons\";\r\nconst { DropDownEditor } = Editors;\r\n\r\n/**\r\n * General\r\n */\r\n\r\n// HTML5 Local Storage with Expiration\r\nexport const localStorage2 = {\r\n\tsave: function (key, jsonData, expirationMS) {\r\n\t\tif (typeof (Storage) === \"undefined\") { return false; }\r\n\t\t//var expirationMS = expirationMin * 60 * 1000;\r\n\t\tvar record = { value: JSON.stringify(jsonData), timestamp: new Date().getTime() + expirationMS }\r\n\t\tlocalStorage.setItem(key, JSON.stringify(record));\r\n\t\treturn jsonData;\r\n\t},\r\n\tload: function (key) {\r\n\t\tif (typeof (Storage) === \"undefined\") { return false; }\r\n\t\tvar record = JSON.parse(localStorage.getItem(key));\r\n\t\tif (!record) { return false; }\r\n\t\treturn (new Date().getTime() < record.timestamp && JSON.parse(record.value));\r\n\t}\r\n}\r\n\r\nexport const isDuplicate = (valueStories, vals, VSId) => {\r\n\tlet result = true;\r\n\tif (vals.length > 0 && vals !== \"\") {\r\n\t\tif(Array.isArray(valueStories)) {\r\n\t\t\tresult = (valueStories.\r\n\t\t\t\tfind(data => data.ValueStoryName.toLowerCase().trim() === vals.toLowerCase().trim() && data.VSId !== VSId))\r\n\t\t} else {\r\n\t\t\tresult = false\r\n\t\t}\r\n\t}\r\n\telse {\r\n\t\tresult = false;\r\n\t}\r\n\r\n\tif (result) {\r\n\t\treturn false;\r\n\t}\r\n\telse {\r\n\t\treturn true;\r\n\t}\r\n}\r\n\r\nexport const BreakLine = (content) =>\r\n\tcontent.split('\\n').map((item, key) => {\r\n\t\treturn {item}\r\n\t})\r\n\r\nexport const addCurrencyMask = (value, currency) => {\r\n\r\n\tif (value === '' || value === null) {\r\n\t\treturn ''\r\n\t} else {\r\n\r\n\t\tconst regex = /\\d*\\.?\\d{0,2}/g;\r\n\t\tconst filteredValue = regex.exec(value)\r\n\r\n\t\tif (filteredValue[0] === '') {\r\n\t\t\t//console.log(currency + ' ' + formatThousands(0) + ' M')\r\n\t\t\treturn currency + formatThousands(0) + ' M'\r\n\t\t} else {\r\n\t\t\treturn currency + formatThousands(filteredValue[0]) + ' M'\r\n\t\t\t//console.log(currency + ' ' + formatThousands(filteredValue[0]) + ' M')\r\n\t\t}\r\n\t}\r\n}\r\n\r\nexport const onChangeRemoveMask = (e, currency = '') => {\r\n\tlet output\r\n\tconst input = e.target.value;\r\n\treturn removeMask(input, currency);\r\n}\r\n\r\nexport const removeMask = (input, currency = '') => {\r\n\tlet output\r\n\tconst escapedCurrency = currency.replace(/[-\\/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&'),\r\n\t\tcurrencyRegex = new RegExp(escapedCurrency, 'g'),\r\n\t\tcharactersRegex = new RegExp('[,$M%A-Za-z ]', 'g')\r\n\r\n\toutput = input.replace(currencyRegex, '')\r\n\toutput = output.replace(charactersRegex, '')\r\n\toutput = output.replace(/^[\\D]*/, '') // replace periods\r\n\r\n\t//console.log('input:' + e.target.value, 'output:' + output)\r\n\r\n\treturn output\r\n}\r\n\r\nexport const formatThousands = (num, isDecimal) => {\r\n\tif (num !== undefined && num !== null) {\r\n\t\tif (isDecimal) { return round(Math.abs(Number(num)) / 1000, 2).toFixed(2) }\r\n\t\tvar values = num.toString().split('.');\r\n\t\tif (values[0] >= 1000 || values[0] <= -1000) {\r\n\t\t\t//console.log(values[0].replace(/.(?=(?:.{3})+$)/g, '$&,') + (values.length === 2 ? '.' + values[1] : ''))\r\n\t\t\treturn values[0].replace(/.(?=(?:.{3})+$)/g, '$&,') + (values.length === 2 ? '.' + values[1] : '')\r\n\t\t} else {\r\n\t\t\treturn num\r\n\t\t}\r\n\t}\r\n\telse { return 0 }\r\n}\r\n\r\nexport const round = (value, decimals) => {\r\n\treturn Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);\r\n\t// var num = parseFloat(value).toFixed(decimals);\r\n\t// return num;\r\n}\r\n\r\nexport const roundFix = (value, decimals) => {\r\n\t//return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);\r\n\tif (value != null && value != '') {\r\n\t\tvar num = parseFloat(value).toFixed(decimals);\r\n\t\treturn num;\r\n\t} else {\r\n\t\treturn 0;\r\n\t}\r\n\r\n}\r\n\r\nexport const getParameterByName = (name, url) => {\r\n\tif (!url) url = window.location.href;\r\n\tname = name.replace(/[\\[\\]]/g, \"\\\\$&\");\r\n\tvar regex = new RegExp(\"[?&]\" + name + \"(=([^&#]*)|&|#|$)\"),\r\n\t\tresults = regex.exec(url);\r\n\tif (!results) return null;\r\n\tif (!results[2]) return '';\r\n\treturn results[2];\r\n}\r\n\r\nexport const setCookie = (cname, cvalue, exdays) => {\r\n\tvar d = new Date();\r\n\td.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));\r\n\tvar expires = \"expires=\" + d.toUTCString();\r\n\tdocument.cookie = cname + \"=\" + cvalue + \";\" + expires + \";path=/\";\r\n}\r\n\r\nexport const getCookie = (cname) => {\r\n\tvar name = cname + \"=\";\r\n\tvar decodedCookie = decodeURIComponent(document.cookie);\r\n\tvar ca = decodedCookie.split(';');\r\n\tfor (var i = 0; i < ca.length; i++) {\r\n\t\tvar c = ca[i];\r\n\t\twhile (c.charAt(0) == ' ') {\r\n\t\t\tc = c.substring(1);\r\n\t\t}\r\n\t\tif (c.indexOf(name) == 0) {\r\n\t\t\treturn c.substring(name.length, c.length);\r\n\t\t}\r\n\t}\r\n\treturn \"\";\r\n}\r\n\r\n/**\r\n * Financial formulae\r\n */\r\n\r\n// https://en.wikipedia.org/wiki/Time_value_of_money\r\nexport const times = n => f => {\r\n\tlet iter = i => {\r\n\t\tif (i === n) return\r\n\t\tf(i)\r\n\t\titer(i + 1)\r\n\t}\r\n\treturn iter(0)\r\n}\r\n\r\n// https://www.investopedia.com/ask/answers/021115/what-formula-calculating-net-present-value-npv-excel.asp\r\nexport const NPV = (arr) => {\r\n\tlet temp = 0,\r\n\t\tcashFlow = 0,\r\n\t\trate = 0\r\n\r\n\trate = Number(arr[0]) / 100\r\n\r\n\tarr.forEach((data, i) => {\r\n\r\n\t\tif (i > 0) {\r\n\t\t\tdata === 0 ? cashFlow = 0 : cashFlow = Number(data)\r\n\t\t\ttemp += cashFlow / Math.pow(1 + rate, i)\r\n\t\t}\r\n\t})\r\n\r\n\ttemp = 100 * temp\r\n\ttemp = temp / 100\r\n\r\n\treturn temp\r\n}\r\n\r\n/**\r\n * App specific\r\n */\r\nexport const convertRouteToTitle = (route) => {\r\n\treturn route.pathname.replace(/[/-]/g, ' ')\r\n}\r\n\r\nexport const getSubLeverIdObject = (id) => {\r\n\tconst subLeverId = id\r\n\t// Get Value Driver Id\r\n\tconst BVUIdIndex = subLeverId.substr(0, subLeverId.indexOf('.')) - 1\r\n\t// Get Sublever Id\r\n\tconst BVUSVDIdIndex = subLeverId.substr(subLeverId.indexOf('.') + 1) - 1\r\n\treturn { BVUIdIndex: BVUIdIndex, BVUSVDIdIndex: BVUSVDIdIndex }\r\n}\r\n\r\nexport const subLeverHasTotalSpend = (subLeverId) => {\r\n\treturn subLeverId === '1.1' || subLeverId === '1.2' || subLeverId === '1.3' || subLeverId === '1.4' || subLeverId === '1.5' || subLeverId === '1.6' ||\r\n\t\tsubLeverId === '2.1' || subLeverId === '2.2' || subLeverId === '2.3' || subLeverId === '3.6' ||\r\n\t\tsubLeverId === '4.1' || subLeverId === '4.2' || subLeverId === '4.3'\r\n}\r\n\r\nexport const clearLocalStorage = () => {\r\n\tlocalStorage.removeItem('jwtToken')\r\n\tlocalStorage.removeItem('sessionInfo')\r\n\tsessionStorage.removeItem('isCustomer')\r\n}\r\n\r\nexport const setCurrentLanguage = (language) => {\r\n\t// Save current sublever Id to cookie\r\n\r\n\tlet settings = {}\r\n\r\n\tif (getCookie('settings') !== '' && getCookie('settings') !== 'undefined') {\r\n\t\tsettings = JSON.parse(getCookie('settings'))\r\n\t\tsettings.language = language\r\n\t} else {\r\n\t\tsettings.language = language\r\n\t}\r\n\r\n\tsetCookie('settings', JSON.stringify(settings), 1) // 0.0138 is 20 minutes out of a day (1440 minutes)\r\n}\r\n\r\nexport const getCurrentLanguage = () => {\r\n\r\n\tlet settings = {},\r\n\t\tdefaultValue = 'en'\r\n\r\n\r\n\tif (getCookie('settings') !== '' && getCookie('settings') !== 'undefined') {\r\n\t\tsettings = JSON.parse(getCookie('settings'))\r\n\t\tif (settings.hasOwnProperty('language')) {\r\n\t\t\treturn settings.language\r\n\t\t} else {\r\n\t\t\treturn defaultValue\r\n\t\t}\r\n\r\n\t} else {\r\n\t\treturn defaultValue\r\n\t}\r\n}\r\n\r\nexport const setCurrentPriorityId = (priorityId) => {\r\n\t// Save current sublever Id to cookie\r\n\r\n\tlet settings = {}\r\n\r\n\tif (getCookie('settings') !== '' && getCookie('settings') !== 'undefined') {\r\n\t\tsettings = JSON.parse(getCookie('settings'))\r\n\t\tsettings.priorityId = priorityId\r\n\t} else {\r\n\t\tsettings.priorityId = priorityId\r\n\t}\r\n\r\n\tsetCookie('settings', JSON.stringify(settings), 1)\r\n}\r\n\r\nexport const getCurrentPriorityId = () => {\r\n\r\n\tlet settings = {}\r\n\r\n\tif (getCookie('settings') !== '' && getCookie('settings') !== 'undefined') {\r\n\t\tsettings = JSON.parse(getCookie('settings'))\r\n\t\treturn settings.priorityId\r\n\t} else {\r\n\t\treturn 1\r\n\t}\r\n}\r\n\r\nexport const setCurrentSubLeverId = (subleverId) => {\r\n\t// Save current sublever Id to cookie\r\n\r\n\tlet settings = {}\r\n\r\n\tif (getCookie('settings') !== '' && getCookie('settings') !== 'undefined') {\r\n\t\tsettings = JSON.parse(getCookie('settings'))\r\n\t\tsettings.subleverId = subleverId\r\n\t} else {\r\n\t\tsettings.subleverId = subleverId\r\n\t}\r\n\r\n\tsetCookie('settings', JSON.stringify(settings), 1) // 0.0138 is 20 minutes out of a day (1440 minutes)\r\n}\r\n\r\nexport const getCurrentSubLeverId = () => {\r\n\r\n\tlet settings = {}\r\n\r\n\tif (getCookie('settings') !== '' && getCookie('settings') !== 'undefined') {\r\n\t\tsettings = JSON.parse(getCookie('settings'))\r\n\t\treturn settings.subleverId\r\n\t} else {\r\n\t\treturn '1.1'\r\n\t}\r\n}\r\n\r\n\r\nexport const sortObjectArray = (key, order = 'asc') => {\r\n\treturn function (a, b) {\r\n\t\tif (!a.hasOwnProperty(key) ||\r\n\t\t\t!b.hasOwnProperty(key)) {\r\n\t\t\treturn 0;\r\n\t\t}\r\n\r\n\t\tconst varA = (typeof a[key] === 'string') ?\r\n\t\t\ta[key].toUpperCase() : a[key];\r\n\t\tconst varB = (typeof b[key] === 'string') ?\r\n\t\t\tb[key].toUpperCase() : b[key];\r\n\r\n\t\tlet comparison = 0;\r\n\t\tif (varA > varB) {\r\n\t\t\tcomparison = 1;\r\n\t\t} else if (varA < varB) {\r\n\t\t\tcomparison = -1;\r\n\t\t}\r\n\t\treturn (\r\n\t\t\t(order == 'desc') ?\r\n\t\t\t\t(comparison * -1) : comparison\r\n\t\t);\r\n\t};\r\n}\r\n\r\nexport const getCurrancyDetails = (currencyCodes, filterCurrencyCode) => {\r\n\tif (filterCurrencyCode != null) {\r\n\t\tvar _currencyDetails = currencyCodes.filter((element) => element.split(' - ')[0] === filterCurrencyCode.trim());\r\n\t\t// var symbol = currencySymbols[filterCurrencyCode.trim()];\r\n\t\treturn _currencyDetails;\r\n\t}\r\n\telse { return currencyCodes.filter((element) => element.split(' - ')[0] === 'USD'); }\r\n}\r\n\r\nexport const convertToMillion = (numberValue, isDecimal) => {\r\n\t// Six Zeroes for Millions \t\r\n\tvar numberInMillion = 0;\r\n\tif (numberValue !== undefined && numberValue !== null) {\r\n\t\tnumberInMillion = numberValue > 0 ? (Math.round((Math.abs(Number(numberValue)) / 1.0e+6) * 100) / 100).toFixed(2)\r\n\t\t\t: (Math.round((Number(numberValue) / 1.0e+6) * 100) / 100).toFixed(2) // added for -ve value\r\n\t\tif (isDecimal) {\r\n\t\t\tvar values = numberInMillion.toString().split('.');\r\n\t\t\tif (values[0] >= 1000 || values[0] <= -1000) {\r\n\t\t\t\tnumberInMillion = values[0].replace(/.(?=(?:.{3})+$)/g, '$&,') + (values.length === 2 ? '.' + values[1] : '')\r\n\t\t\t} else {\r\n\t\t\t\tnumberInMillion = numberInMillion\r\n\t\t\t}\r\n\t\t}\r\n\t\telse {\r\n\t\t\tvar values = Math.round(numberInMillion).toString();\r\n\t\t\tif (values >= 1000 || values <= -1000) {\r\n\t\t\t\tnumberInMillion = values.replace(/.(?=(?:.{3})+$)/g, '$&,') //+ (values.length === 2 ? '.' + values[1] : '')\r\n\t\t\t} else {\r\n\t\t\t\tnumberInMillion = values\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\treturn numberInMillion + \" M\"\r\n\r\n}\r\n\r\nexport const convertToBillion = (numberValue) => {\r\n\t// Nine Zeroes for Billions\r\n\treturn round(Math.abs(Number(numberValue)) / 1.0e+9, 2) + \"B\"\r\n}\r\n\r\nexport const convertToThousands = (numberValue) => {\r\n\t// Nine Zeroes for Billions\r\n\treturn round(Math.abs(Number(numberValue)) / 1000, 2).toFixed(2) + \" K\"\r\n}\r\n\r\nexport const clone = (items) => items.map(item => Array.isArray(item) ? clone(item) : item);\r\n\r\nexport const getNonEmptyValue = (value) => {\r\n\treturn (value === null || value === undefined || value === '') ? '' : value;\r\n}\r\n\r\nexport const formatNumber = (value) => {\r\n\tif (getNonEmptyValue(value) === '') {\r\n\t\treturn value\r\n\t}\r\n\r\n\treturn (value + '').replace(/\\d(?=(\\d{3})+\\.)/g, '$&,')\r\n}\r\n\r\nexport const isArrayEquals = (arr1, arr2) => {\r\n\tif (arr1.length !== arr2.length) return false;\r\n\r\n\t// Check if all items exist and are in the same order\r\n\tfor (var i = 0; i < arr1.length; i++) {\r\n\t\tif (arr1[i] !== arr2[i]) return false;\r\n\t}\r\n\r\n\t// Otherwise, return true\r\n\treturn true;\r\n}\r\n\r\nconst totalFormatter = (style, value) => {\r\n\tif(!value.row.superHeader && (!value.row.DATA_COLLECTIONS_SKEY || value.row.DATA_COLLECTIONS_SKEY === null ) && value.row.DATA_COLLECTIONS_SKEY !== undefined) {\r\n\t\tconst s = Object.assign({fontWeight: '700', textDecoration: 'underline'}, style)\r\n\r\n\t\treturn s;\r\n\t}\r\n\r\n\treturn style;\r\n}\r\n\r\nexport const AlignFormatter = (value) => { const val = formatThousandsWithBlank(roundFixWithBlank(value.value, 0)); return (
{val}
) }\r\nexport const RoundFormatter = (value) => { const val = formatThousandsWithBlank(roundFixWithBlank(value.value, 4)); return ({val}
) }\r\nexport const CenterAlignFormatter = (value) => { return ({value.value}
) }\r\nexport const LeftAlignFormatter = (value) => { return ({value.value}
) }\r\nexport const RightAlignFormatter = (value) => { return ({value.value}
) }\r\nexport const AlignCurrencyFormatter = (value) => { const val = formatThousandsWithBlank(roundFixWithBlank(value.value, 0)); return ({value.row.currencySymbol}{val}
) }\r\nexport const RoundCurrencyFormatter = (value) => { const val = formatThousandsWithBlank(roundFixWithBlank(value.value, 4)); return ({value.row.currencySymbol}{val}
) }\r\nexport const LinkFormatter = (value) => { return ({value.value}
) }\r\nexport const RoundFormatter2 = (value) => { const val = formatThousandsWithBlank(roundFixWithBlank(value.value, 2)); return ({val}
) }\r\nexport const IntegralpartFormatter = (value) => { const val = formatThousandsWithBlank(integralPartWithBlank(value.value)); return ({val}
) }\r\nexport const IntegralpartPercentFormatter = (value) => { const val = formatThousandsWithBlank(integralPartWithBlank(value.value)); return ({val === '' || val === undefined || val === null ? val : val + '%'}
) }\r\n\r\nexport const formatter = (value) => {\r\n\tswitch (value) {\r\n\t\tcase 'LeftAlignFormatter':\r\n\t\t\treturn LeftAlignFormatter\r\n\t\tcase 'AlignFormatter':\r\n\t\t\treturn AlignFormatter\r\n\t\tcase 'RoundFormatter':\r\n\t\t\treturn RoundFormatter\r\n\t\tcase 'CenterAlignFormatter':\r\n\t\t\treturn CenterAlignFormatter\r\n\t\tcase 'RightAlignFormatter':\r\n\t\t\treturn RightAlignFormatter\r\n\t\tcase 'AlignCurrencyFormatter':\r\n\t\t\treturn AlignCurrencyFormatter\r\n\t\tcase 'RoundCurrencyFormatter':\r\n\t\t\treturn RoundCurrencyFormatter\r\n\t\tcase 'LinkFormatter':\r\n\t\t\treturn LinkFormatter\r\n\t\tcase 'RoundFormatter2':\r\n\t\t\treturn RoundFormatter2\r\n\t\tcase 'IntegralpartFormatter':\r\n\t\t\treturn IntegralpartFormatter\r\n\t\tcase 'IntegralpartPercentFormatter':\r\n\t\t\treturn IntegralpartPercentFormatter\r\n\t\tdefault:\r\n\t\t\treturn undefined;\r\n\t}\r\n}\r\n\r\nexport const filterRenderer = (filterType) => {\r\n\tswitch (filterType) {\r\n\t\tcase 'NumericFilterRenderer':\r\n\t\t\treturn NumericFilterRenderer\r\n\t\tcase 'TextfilterRenderer':\r\n\t\t\treturn TextfilterRenderer\r\n\t\tcase 'AutoCompleteFilterAdv':\r\n\t\t\treturn AutoCompleteFilterAdv\r\n\t\tdefault:\r\n\t\t\treturn undefined;\r\n\t}\r\n}\r\n\r\nexport const editorComponent = (editor, values) => {\r\n\tswitch (editor) {\r\n\t\tcase 'DropDownEditor':\r\n\t\t\treturn \r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nclass SearchBar extends React.Component {\r\n\thandleChange(event) {\r\n\t\tthis.props.onUserInput(event);\r\n\t}\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t{this.props.IsShared ? BreakLine(this.props.Content.sharedHistory) : BreakLine(this.props.Content.shareStory)}
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t this.formDispatch = dispatch}\r\n\t\t\t\t\t\t\tonSubmit={(values) => this.handleSubmit(values)}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{(this.props.IsShared === false) ?\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t{featureCustomerAccess && this.state.shareWithCustomer ?\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t{featureCustomerAccess ?\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t this.setState(prevState => { return { allowEdit: !prevState.allowEdit } })} />\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t{this.props.Content.allowEdit}\r\n\t\t\t\t\t\t\t\t\t\t\t\t![](\"/images/help-icon.png\")
\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t
: null}\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{this.props.Content.shareWithCustomer}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{ !this.state.disableShareButton ?\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
: null}\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\t\tnull\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t{this.props.Content.customerDetails}\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{this.props.Content.expirationDate}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{this.props.Content.company}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t !this.state.shareWithCustomer ? true : this.state.expirationDate ? true : false\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolProps={{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle: { width: '300px' },\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tselected: this.state.expirationDate,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tminDate: this.state.startDate,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName: \"calendar-text\",\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpopperClassName: \"calendar-popper\",\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled: !this.state.shareWithCustomer,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmaxDate: moment(new Date()).add(this.props.SelectedVSData[0].ValueStoryType=== 'EnablementExecution' ? 180 : 30, 'days').toDate(),\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange: date => this.expirationDateOnChange(date)\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{/* this.expirationDateOnChange(date)} />*/}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t this.companyOnChange(event)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalidators={{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trequired: (val) => !this.state.shareWithCustomer ? true : validators.required(this.state.company)\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tShare only Enablement Insight View\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t{this.state.responseMsg !== \"\" ? {this.state.responseMsg}
\r\n\t\t\t\t\t\t\t: {this.props.user.error}
\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t !this.props.shareWithCustomer ? true : val !== '' && !val.toLowerCase().endsWith('sap.com')\t\t\t\t\t\t\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tvalidateOn=\"blur\"\r\n\t\t\t\t/>\r\n\t\t\t\t
\r\n\t\t);\r\n\t}\r\n}\r\n\r\nclass UserTable extends React.Component {\r\n\trender() {\r\n\t\tvar OnShareUnshare = this.props.OnShareUnshareTable\r\n\t\tvar filterEmail = this.props.filterEmail\r\n\t\tvar isShared = this.props.isShared\r\n\t\tvar Content = this.props.Content\r\n\t\tlet featureCustomerAccess = this.props.featureCustomerAccess\r\n\t\tvar VS = this.props.sharedVS.map(function (VS) {\r\n\t\t\tif (VS.SharedWith.toLowerCase().indexOf(filterEmail) === -1) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\telse return (\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t
\r\n\t\t);\r\n\t}\r\n}\r\n\r\nclass UserRow extends React.Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t}\r\n\r\n\tonShareUnshare() {\r\n\t\tthis.props.OnShareUnshareRow(this.props.VSId, this.props.SharedWith, this.props.SharedBy, !this.props.Active, this.props.AllowEdit);\r\n\t}\r\n\r\n\tonAllowEditClick() {\r\n\t\tthis.props.OnShareUnshareRow(this.props.VSId, this.props.SharedWith, this.props.SharedBy, this.props.Active, !this.props.AllowEdit);\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t| {Content.sharedby} | \r\n\t\t\t\t\t\t\t{Content.sharedwith} | \r\n\t\t\t\t\t\t\t{/*Shared | */}\r\n\t\t\t\t\t\t\t{Content.dateshared} | \r\n\t\t\t\t\t\t\t{featureCustomerAccess ?{Content.expirationDate} | : null}\r\n\t\t\t\t\t\t\t{Content.datemodified} | \r\n\t\t\t\t\t\t\t{/* {(isShared === false) ?{Content.share}/{Content.unshare} | :} */}\r\n\t\t\t\t\t\t\t{featureCustomerAccess ? | {Content.company} | : null}\r\n\t\t\t\t\t\t\t{Content.allowEdit} | \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t |
|---|
\r\n\t\t\t\t
\r\n\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tuser: state.default,\r\n\t\tuserData: state.valueStory,\r\n\t\tvalueStoryHasErrored: state.valueStoryHasErrored,\r\n\t\tvalueStoryIsLoading: state.valueStoryIsLoading,\r\n\t\tvalidation: state.content.validation,\r\n\t\tcontentPE: state.contentPE\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tfetchUserValueStories: (id) => dispatch(fetchUserValueStories(id)),\r\n\t\tfetchValueStoriesLoading: (bool) => dispatch(fetchValueStoriesLoading(bool)),\r\n\t\tfetchValueStoriesSuccess: (valueStories) => dispatch(fetchValueStoriesSuccess(valueStories)),\r\n\t\tfetchValueStoriesFailure: (error) => dispatch(fetchValueStoriesFailure(error)),\r\n\t\tinitPrioritiesItems: (items) => dispatch(initPrioritiesItems(items)),\r\n\t\taddValueStory: (formValues) => dispatch(addValueStory(formValues)),\r\n\t\taddValueStorySuccess: (valueStory) => dispatch(addValueStorySuccess(valueStory)),\r\n\t\taddValueStoryFailure: (error) => dispatch(addValueStoryFailure(error)),\r\n\t\tdeleteValueStory: (id) => dispatch(deleteValueStory(id)),\r\n\t\tdeleteValueStoryLoading: (bool) => dispatch(deleteValueStoryLoading(bool)),\r\n\t\tdeleteValueStorySuccess: (message) => dispatch(deleteValueStorySuccess(message)),\r\n\t\tdeleteValueStoryFailure: (error) => dispatch(deleteValueStoryFailure(error)),\r\n\t\topenValueStory: (VSId, Id) => dispatch(openValueStory(VSId, Id)),\r\n\t\topenValueStorySuccess: () => dispatch(openValueStorySuccess()),\r\n\t\topenValueStoryFailure: (error) => dispatch(openValueStoryFailure(error)),\r\n\t\tisSharedValueStoryOpen: (VSId, Id) => dispatch(isSharedValueStoryOpen(VSId, Id)),\r\n\t\tvalueStoryFetchDataSuccess: (valueStory) => dispatch(valueStoryFetchDataSuccess(valueStory)),\r\n\t\tresetMessage: () => dispatch(resetMessage()),\r\n\t\tresetError: () => dispatch(resetError()),\r\n\t\tsetValueStoryDmciDetails: (data) => dispatch(setValueStoryDmciDetails(data)),\r\n\t\tsetResultSummaryDetails: (data) => dispatch(setResultSummaryDetails(data)),\r\n\t\tsetTopDetails: (data) => dispatch(setTopDetails(data))\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ValueStoryContainer)\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n \r\nfunction TabContainer(props) {\r\n return (\r\n \r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t{this.state.responseMsg}
\r\n\t\t\t\t\t\t\t\t: {this.props.user.error}
\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t(this.props.user.valueStories.length === 0) ?\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\t\t// Remove below line once get approval to rollout sharing logic to partners as well\r\n\t\t\t\t\t\t\t\t(this.showShareValueStory()) ?\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{/*
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t: null}\r\n\t\t\t\t\t{this.props.user.valueStories.length > 0? \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{(this.state.isanyCreatorStory === true) ?\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t![](\"images/share-value-story.png\")
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{this.props.content.creatorStroy}\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t: null\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t{(this.state.isanySharedStory === true) ?\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{this.props.content.creatorStroy}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t![](\"images/shared-details.png\")
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{this.props.content.sharedStroy}\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t: null\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{this.props.content.sharedStroy}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t:null }\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t this.showAlertModal('alert')} //{this.deleteValueStory}\r\n\t\t\t\t\t\t\t\t\t\t\tdisabled={this.props.user.loading}\r\n\t\t\t\t\t\t\t\t\t\t\tcontent={this.props.content.delete}\r\n\t\t\t\t\t\t\t\t\t\t\ticon=\"x\"\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{this.props.user.valueStories.constructor === Array ? \r\n\t\t\t\t\t\tvs.VSId == this.state.selectedValueStory)}\r\n\t\t\t\t\t\t\tVSId={this.state.selectedValueStory}\r\n\t\t\t\t\t\t\tContent={this.props.content}\r\n\t\t\t\t\t\t\tIsShared={this.state.isShared}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t:this.props.user.valueStories.payload}\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t this.callback()}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{this.props.content.deleteConfirmation}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t this.hideAlertModal(\"alert\")}\r\n\t\t\t\t\t\t\t\t\t\tcolor />\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n {props.children}\r\n
\r\n );\r\n}\r\nTabContainer.propTypes = {\r\n children: PropTypes.node.isRequired,\r\n};\r\n \r\nexport default TabContainer;","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\n\r\nimport Button from 'UI/Button'\r\nimport TabContainer from './TabContainer';\r\nimport { AppBar } from '@material-ui/core';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n flexGrow: 1,\r\n backgroundColor: theme.palette.background.paper,\r\n borderBottom: \"1px solid grey\",\r\n boxShadow: \"none\"\r\n },\r\n indicator: {\r\n backgroundColor: \"#008fd3\",\r\n },\r\n textColor: {\r\n // color: \"#008fd3\",\r\n },\r\n paddingTop: {\r\n paddingTop: \"20px\"\r\n },\r\n tabs: {\r\n borderLeft: \"1px solid grey\",\r\n borderRight: \"1px solid grey\",\r\n padding: \"10px\"\r\n },\r\n borderBothSides: {\r\n borderLeft: \"1px solid grey\",\r\n borderRight: \"1px solid grey\",\r\n },\r\n borderLeftSide: {\r\n borderLeft: \"1px solid grey\",\r\n }\r\n});\r\n\r\nclass TabPanel extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n activeTab: props.tabId,\r\n };\r\n }\r\n\r\n handleChange = (event, activeTab) => {\r\n this.setState((state) => ({ activeTab }));\r\n if (this.props.dispatchTabChange) {\r\n if (this.props.handleNextButton) {\r\n this.props.handleNextButton(activeTab)\r\n }\r\n this.props.dispatchTabChange(activeTab)\r\n\r\n }\r\n };\r\n\r\n render() {\r\n const { classes } = this.props;\r\n const { activeTab } = this.state;\r\n\r\n return (\r\n \r\n {\r\n this.props.headerText ?\r\n
\r\n );\r\n }\r\n}\r\n\r\nTabPanel.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n tabs: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n label: PropTypes.string.isRequired,\r\n id: PropTypes.number.isRequired,\r\n component: PropTypes.object.isRequired,\r\n }).isRequired)\r\n .isRequired,\r\n};\r\n\r\nexport default withStyles(styles)(TabPanel);","\r\nimport React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\n// Utils\r\nimport moment from 'moment'\r\nimport classnames from 'classnames'\r\nimport ScrollArea from 'react-scrollbar'\r\n\r\nconst ValueStoryList = (props) =>\r\n\t{this.props.headerText}
: null\r\n }\r\n\r\n \r\n
\r\n {\r\n this.props.nextButtonLabel && this.props.nextButtonLabel != \"\" ?\r\n (\r\n \r\n \r\n \r\n {\r\n this.props.tabs.map((tab, i) => (\r\n \r\n {\r\n this.props.tabs.map(tab => (\r\n activeTab === tab.id\r\n ? {tab.component} \r\n : null\r\n ))\r\n }\r\n
\r\n \r\n
\r\n ) : null\r\n }\r\n\r\n \r\n
\r\n \r\n\t\t\t\t\r\n\t\t\t{\r\n\t\t\t\tprops.isanySharedStory === true ?\r\n\t\t\t\t\t(props.valueStories.map((data, i) =>\r\n\t\t\t\t\t\t(localStorage.getItem('id') !== data.Id) ?\r\n\t\t\t\t\t\t\t// Remove below line once get approval to rollout sharing logic to partners as well\r\n\t\t\t\t\t\t\t//(props.enableShareValueStory) ?\r\n\t\t\t\t\t\t\t\t \r\n\t
\r\nexport default ValueStoryList\r\n\r\nValueStoryList.propTypes = {\r\n\tvalueStories: PropTypes.array,\r\n\tselectedValueStory: PropTypes.number,\r\n\thandleValueStoryClick: PropTypes.func.isRequired,\r\n\topenValueStory: PropTypes.func.isRequired\r\n}","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n\r\n// Actions\r\nimport {\r\n\tfetchUserSharedValueStories,\r\n\tfetchValueStoriesLoading,\r\n\tfetchValueStoriesSuccess,\r\n\tfetchValueStoriesFailure,\r\n\taddValueStory,\r\n\taddValueStorySuccess,\r\n\taddValueStoryFailure,\r\n\topenValueStory,\r\n\topenValueStorySuccess,\r\n\topenValueStoryFailure,\t\r\n\tresetMessage,\r\n\tresetError,\r\n\tisSharedValueStoryOpen\r\n}\r\n\tfrom 'actions/userActions'\r\n\r\nimport {\r\n\tinitPrioritiesItems\r\n}\r\n\tfrom 'actions/prioritiesActions'\r\n\r\nimport { valueStoryFetchDataSuccess } from 'actions/fetchValueStory'\r\nimport {\r\n\tsetValueStoryDmciDetails,\r\n\tsetResultSummaryDetails,\r\n\tsetTopDetails\r\n} from 'actions/spendActions'\r\n\r\n// Components\r\nimport SharedValueStoryList from './SharedValueStoryList'\r\n\r\n// UI\r\nimport Button from 'UI/Button'\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Select from 'react-select' //'react-virtualized-select'\r\nimport { BreakLine } from '../../utils/Utils'\r\n\r\n// Settings\r\nimport { modalStyle, modalContentStyle, routes, validators } from 'Constants'\r\nimport Modal from 'reboron/OutlineModal'\r\nimport ValueStoryShare from './ValueStoryShare'\r\nimport { valueStory_discovery_DropdowStyles } from 'react-select-css'\r\n//CSS\r\n//import '../../styles/value-story-select.css'\r\n\r\nconst valueStoryModalContentStyle = Object.assign({}, modalContentStyle);\r\nvalueStoryModalContentStyle.padding = \"20px\";\r\n\r\nconst valueStoryModalStyle = Object.assign({}, modalStyle);\r\nvalueStoryModalStyle.width = \"100%\";\r\nvalueStoryModalStyle.maxWidth = \"1250px\";\r\nvalueStoryModalStyle.height = \"99%\";\r\n\r\nconst defaultOptions = [\r\n\t{ value: 0, label: \"\" }];\r\n\r\nconst BLURPENAME = '|BLURPENAME';\r\n\r\n\r\n\r\nclass SharedValueStories extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = {\r\n\t\t\tselectedValueStory: null,\r\n\t\t\tisShared: null,\r\n\t\t\tresponseMsg: '',\r\n\t\t\tisanySharedStory: false,\r\n\t\t\tisanyCreatorStory: false,\r\n\t\t\tselectedPEName: '',\r\n\t\t\tselectedPEId: '',\r\n\t\t\tfilterdPENameOptions: [],\r\n\t\t\tfilterdPEIdOptions: [],\r\n\t\t\tcontentPE: []\r\n\t\t}\r\n\r\n\t\tthis.fetchUserSharedValueStories = this.fetchUserSharedValueStories.bind(this)\r\n\t\tthis.handleValueStoryClick = this.handleValueStoryClick.bind(this)\r\n\t\tthis.openValueStory = this.openValueStory.bind(this)\r\n\t\tthis.dispatchOpenValueStory = this.dispatchOpenValueStory.bind(this)\r\n\t\tthis.redirect = this.redirect.bind(this)\r\n\t\tthis.showModal = this.showModal.bind(this)\r\n\t\tthis.hideModal = this.hideModal.bind(this)\r\n\t\tthis.actions = this.getApplicationFeatureActions();\r\n\t}\r\n\r\n\thandleValueStoryClick(VSId) {\r\n\t\tthis.setState({\r\n\t\t\tselectedValueStory: VSId\r\n\t\t})\r\n\t}\r\n\r\n\tclearSpendData() {\r\n\t\tthis.props.setValueStoryDmciDetails([])\r\n\t\tthis.props.setResultSummaryDetails([])\r\n\t\tthis.props.setTopDetails([])\r\n\t}\r\n\r\n\topenValueStory() {\r\n\t\tthis.props.isSharedValueStoryOpen(this.state.selectedValueStory, this.props.user.user.Id)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tif (response.status === 200) {\r\n\t\t\t\t\tthis.dispatchOpenValueStory()\r\n\t\t\t\t\tthis.props.hideModal('valueStory')\r\n\t\t\t\t\tthis.clearSpendData()\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tvar content = this.props.content;\r\n\t\t\t\t\tvar httpStattus = response.response.data.Message\r\n\t\t\t\t\tvar failMsg = content[httpStattus]\r\n\t\t\t\t\tif (failMsg !== undefined) {\r\n\t\t\t\t\t\tfailMsg = failMsg.toString().replace(\"%userName%\", response.response.data.Result)\r\n\t\t\t\t\t\tthis.props.openValueStoryFailure(failMsg)\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\t//console.log(error)\r\n\t\t\t\t//this.props.openValueStoryFailure(error.response.data.Message)\r\n\t\t\t})\r\n\t}\r\n\r\n\tdispatchOpenValueStory() {\r\n\t\tvar content = this.props.content;\r\n\t\tthis.state.selectedValueStory &&\r\n\t\t\tthis.props.openValueStory(this.state.selectedValueStory, this.props.user.user.Id)\r\n\t\t\t\t.then((response) => {\r\n\t\t\t\t\tif (response.status === 200) {\r\n\t\t\t\t\t\t//this.props.hideModal('valueStory')\r\n\t\t\t\t\t\t// Push value story data to store\r\n\t\t\t\t\t\tthis.props.valueStoryFetchDataSuccess(response.data.Result)\r\n\r\n\t\t\t\t\t\t// Add indexes of selected priorities to priorities array in store\r\n\t\t\t\t\t\tlet items = response.data.Result.AreaOfInterest.map((item, i) => item.Selected && i)\r\n\t\t\t\t\t\titems = items.filter((item) => item !== false)\r\n\t\t\t\t\t\tthis.props.initPrioritiesItems(items)\r\n\r\n\t\t\t\t\t\t// Reset form\r\n\t\t\t\t\t\t//this.formDispatch(actions.reset('addValueStory'))\r\n\r\n\t\t\t\t\t\t// Redirect to Discovery page\r\n\t\t\t\t\t\tthis.redirect()\r\n\r\n\t\t\t\t\t\t// update store status message\r\n\t\t\t\t\t\t// this.props.openValueStorySuccess()\r\n\r\n\t\t\t\t\t\t// reset store status message\r\n\t\t\t\t\t\t//setTimeout(() => {this.props.resetMessage()}, 100)\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse {\r\n\t\t\t\t\t\t// setTimeout(() => {\r\n\t\t\t\t\t\t// \tthis.props.showModal('valueStory')\r\n\t\t\t\t\t\t// }, 1000);\r\n\r\n\t\t\t\t\t\tvar httpStattus = response.response.data.Message\r\n\t\t\t\t\t\tvar failMsg = content[httpStattus]\r\n\t\t\t\t\t\tif (failMsg !== undefined) {\r\n\t\t\t\t\t\t\tfailMsg = failMsg.toString().replace(\"%userName%\", response.response.data.Result)\r\n\t\t\t\t\t\t\tthis.props.openValueStoryFailure(failMsg)\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}).catch((error) => {\r\n\t\t\t\t\t//console.log(error)\r\n\t\t\t\t\t//this.props.openValueStoryFailure(error.response.data.Message)\r\n\t\t\t\t})\r\n\t}\r\n\r\n\tfetchUserSharedValueStories() {\r\n\t\tthis.props.fetchValueStoriesLoading(true)\r\n\t\tthis.props.fetchUserSharedValueStories(this.props.user.user.Id)\r\n\t\t\t.then((result) => {\r\n\t\t\t\tif (result.status === 200) {\r\n\t\t\t\t\tthis.props.fetchValueStoriesSuccess(result)\r\n\t\t\t\t\tfor (var i = 0; i < result.data.Result.length; i++) {\r\n\t\t\t\t\t\tvar obj = result.data.Result[i];\r\n\t\t\t\t\t\tif (obj.Id !== localStorage.getItem('id')) {\r\n\t\t\t\t\t\t\tthis.setState({\r\n\t\t\t\t\t\t\t\tisanySharedStory: true\r\n\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\tbreak;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t\tfor (var i = 0; i < result.data.Result.length; i++) {\r\n\t\t\t\t\t\tvar obj = result.data.Result[i];\r\n\t\t\t\t\t\tif (obj.Id === localStorage.getItem('id')) {\r\n\t\t\t\t\t\t\tthis.setState({\r\n\t\t\t\t\t\t\t\tisanyCreatorStory: true\r\n\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\tbreak;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\t if(error.response !== undefined && error.response.data !== undefined && error.response.data.Message !== undefined) {\r\n\t\t\t\t\tthis.props.fetchValueStoriesFailure(error.response.data.Message)\r\n\t\t\t\t}\r\n\t\t\t\t// else if (error.stack.includes('Network Error')) {\r\n\t\t\t\t// \tthis.props.fetchValueStoriesFailure('API service is down. Please contact administrator.')\r\n\t\t\t\t// }\r\n\r\n\t\t\t})\r\n\t}\r\n\r\n\tshowModal(action, vsid, isShared) {\r\n\t\tthis.setState({\r\n\t\t\tselectedValueStory: vsid,\r\n\t\t\tisShared: isShared\r\n\t\t})\r\n\t\tthis.refs[action].show()\r\n\t}\r\n\r\n\thideModal(action) {\r\n\t\tthis.refs[action].hide()\r\n\t}\r\n\r\n\tredirect() {\r\n\t\t//this.props.history.push(`/discovery`)\r\n\t\t//this.props.history.push(this.actions.indexOf(routes.businessValue)> -1 ? `/discovery` : `/yourSpend`)\r\n\t\tif(this.actions.indexOf(routes.yourSpend)> -1)\r\n\t\t{\r\n this.props.history.push(this.actions.indexOf(routes.businessValue)> -1 ? `/discovery` : `/yourSpend`)\t\t\r\n\t\t}\r\n\t\telse{\r\n\t\t\tthis.props.history.push(`/discovery`)\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentWillMount() {\r\n\t\tthis.fetchUserSharedValueStories();\r\n\t\t//this.storePEData();\r\n\t}\r\n\r\n\tshowShareValueStory() {\r\n\t\tvar resp = Object.values(this.props.user.user.applicationFeatures).map(feature => {\r\n\t\t\tif (this.props.content[feature.Action] !== undefined) {\r\n\t\t\t\treturn true;\r\n\t\t\t}\r\n\t\t})\r\n\t\tif (resp.indexOf(true) > 0) {\r\n\t\t\treturn true;\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentWillUnmount() {\r\n\t\t//this.formDispatch(actions.reset('addValueStory'))\r\n\t\tthis.props.resetError();\r\n\t}\r\n\r\n\tgetApplicationFeatureActions() {\r\n\t\tlet actions = [];\r\n\t\tlet applicationFeatures = this.props.user && this.props.user.user && this.props.user.user.applicationFeatures ? this.props.user.user.applicationFeatures : [];\r\n\t\tapplicationFeatures.map(applicationFeat => {\r\n\t\t\tactions.push(applicationFeat.Action);\r\n\t\t})\r\n\t\treturn actions;\r\n\t}\r\n\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t
\r\n\t\t\r\n\t\t\t\t
\r\n\t\t\r\n\t\t\t\t\t
\r\n\t\t\t{props.content.valueStoryNameHeader}
\r\n\t\t\t\t\t{props.content.companyNameHeader}
\r\n\t\t\t\t\t{props.content.ownerHeader}
\r\n\t\t\t\t\t{props.content.dateHeader}
\r\n\t\t\t\t props.handleValueStoryClick(data.VSId)}\r\n\t\t\t\t\t\t\t\t\tonDoubleClick={() => props.openValueStory(data.VSId)}>\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t//: null\r\n\t\t\t\t\t\t\t: null\r\n\t\t\t\t\t)) : null\r\n\t\t\t}\r\n\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t{!props.isCustomer?\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t{data.ValueStoryName}
\r\n\t\t\t\t\t\t\t\t\t\t\t{data.Organization}
\r\n\t\t\t\t\t\t\t\t\t\t\t{data.Email}
\r\n\t\t\t\t\t\t\t\t\t\t\t{moment(data.ModifiedDate).format('ddd, Do MMM YYYY, h:mm:ss a')}
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
: null}\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t
\r\n\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tuser: state.default,\r\n\t\tuserData: state.valueStory,\r\n\t\tvalueStoryHasErrored: state.valueStoryHasErrored,\r\n\t\tvalueStoryIsLoading: state.valueStoryIsLoading,\r\n\t\tvalidation: state.content.validation,\r\n\t\tcontentPE: state.contentPE\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tfetchUserSharedValueStories: (id) => dispatch(fetchUserSharedValueStories(id)),\r\n\t\tfetchValueStoriesLoading: (bool) => dispatch(fetchValueStoriesLoading(bool)),\r\n\t\tfetchValueStoriesSuccess: (valueStories) => dispatch(fetchValueStoriesSuccess(valueStories)),\r\n\t\tfetchValueStoriesFailure: (error) => dispatch(fetchValueStoriesFailure(error)),\r\n\t\tinitPrioritiesItems: (items) => dispatch(initPrioritiesItems(items)),\r\n\t\taddValueStory: (formValues) => dispatch(addValueStory(formValues)),\r\n\t\taddValueStorySuccess: (valueStory) => dispatch(addValueStorySuccess(valueStory)),\r\n\t\taddValueStoryFailure: (error) => dispatch(addValueStoryFailure(error)),\t\r\n\t\topenValueStory: (VSId, Id) => dispatch(openValueStory(VSId, Id)),\r\n\t\topenValueStorySuccess: () => dispatch(openValueStorySuccess()),\r\n\t\topenValueStoryFailure: (error) => dispatch(openValueStoryFailure(error)),\r\n\t\tisSharedValueStoryOpen: (VSId, Id) => dispatch(isSharedValueStoryOpen(VSId, Id)),\r\n\t\tvalueStoryFetchDataSuccess: (valueStory) => dispatch(valueStoryFetchDataSuccess(valueStory)),\r\n\t\tresetMessage: () => dispatch(resetMessage()),\r\n\t\tresetError: () => dispatch(resetError()),\r\n\t\tsetValueStoryDmciDetails: (data) => dispatch(setValueStoryDmciDetails(data)),\r\n\t\tsetResultSummaryDetails: (data) => dispatch(setResultSummaryDetails(data)),\r\n\t\tsetTopDetails: (data) => dispatch(setTopDetails(data))\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SharedValueStories)\r\n","import React from 'react'\r\nimport FaAngleRight from 'react-icons/lib/fa/angle-right'\r\nimport FaAngleLeft from 'react-icons/lib/fa/angle-left'\r\nimport MdClear from 'react-icons/lib/md/clear'\r\nimport classnames from 'classnames'\r\n\r\nconst ButtonContent = (props) => {\r\n\t// const icon = function() {\r\n\t// \tswitch (props.icon) {\r\n\r\n\t// \t\tcase 'left-arrow':\r\n\t// \t\t\treturn \r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t{/*
\r\n\t\t\t\t{this.props.content.editStory}
*/}\r\n\t\t\t\t\t\t{this.state.responseMsg}
\r\n\t\t\t\t\t\t\t\t: {this.props.user.error}
\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t(this.props.user.valueStories.length === 0) ?\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\t\t// Remove below line once get approval to rollout sharing logic to partners as well\r\n\t\t\t\t\t\t\t\t(this.showShareValueStory() && !this.props.isCustomer) ?\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t: null}\r\n\t\t\t\t\t{this.props.user.valueStories.constructor === Array ? \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{(this.state.isanyCreatorStory === true) ?\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{this.props.content.creatorStroy}\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t: null\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t{(this.state.isanySharedStory === true) ?\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{this.props.content.creatorStroy}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{this.props.content.sharedStroy}\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t: null\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{this.props.content.sharedStroy}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t: null}\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{this.props.user.valueStories.constructor === Array ? \r\n\t\t\t\t\t\tvs.VSId == this.state.selectedValueStory)}\r\n\t\t\t\t\t\t\tVSId={this.state.selectedValueStory}\r\n\t\t\t\t\t\t\tContent={this.props.content}\r\n\t\t\t\t\t\t\tIsShared={this.state.isShared}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t:this.props.user.valueStories.payload}\r\n\t\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t{\r\n\t\t\t\tprops.disabled ?
\r\n\t)\r\n}\r\n\r\nconst ButtonWithoutLoader = (props) =>\r\n\t{props.content}
: {props.content}\r\n\t\t\t}\r\n\t\t\r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n
\r\n\r\n {this.props.content.search.emailAlert.replace(\"%CompanyName%\", companyName)}
\r\n\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Loading...
:\r\n this.state.toggleArr.length > 0 ?\r\n (this.state.toggleArr.map((data, i) =>\r\n\r\n \r\n {/* )\r\n\r\n this.setState({ companyDetails: result, isLoading: false })\r\n\r\n }\r\n\r\n\r\n handleSelectionChange(value) {\r\n this.setState({ selectedOption: value });\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetError()\r\n }\r\n\r\n render() {\r\n var EmailConfirmation = () => {\r\n var companyName = this.state.companyName\r\n return (\r\n \r\n\t\t props.showLanguageSelector()}\r\n\t\t>\r\n\t\t\t \r\n\r\nclass NavContainer extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = {\r\n\t\t\thelpContent: {},\r\n\t\t\tcaseStudyContent: {},\r\n\t\t\ttoggle: false,\r\n\t\t\tisLoading: false,\r\n\t\t}\r\n\r\n\t\tthis.helpClick = this.helpClick.bind(this)\r\n\t\tthis.myWorkClick = this.myWorkClick.bind(this)\r\n\t\tthis.showModal = this.showModal.bind(this)\r\n\t\tthis.hideModal = this.hideModal.bind(this)\r\n\t\tthis.checkForCaseStudy = this.checkForCaseStudy.bind(this)\r\n\t\tthis.checkForHelp = this.checkForHelp.bind(this)\r\n\t\tthis.PeriodicEmailConfirmation = this.PeriodicEmailConfirmation.bind(this)\r\n\t\tthis.closeModal = this.closeModal.bind(this)\r\n\t}\r\n\r\n\thelpClick() {\r\n\t\tconst content = this.props.content\r\n\t\tlet helpContent = {}\r\n\r\n\t\tswitch (this.props.currentRoute.pathname) {\r\n\r\n\t\t\tcase routes.discovery:\r\n\t\t\t\thelpContent = content.discovery.help\r\n\t\t\t\tbreak\r\n\r\n\t\t\tcase routes.priorities:\r\n\t\t\t\thelpContent = content.priorities.help\r\n\t\t\t\tbreak\r\n\r\n\t\t\tcase routes.businessValue:\r\n\t\t\t\thelpContent = content.businessValue.help\r\n\t\t\t\tbreak\r\n\r\n\t\t\tcase routes.subLeverCalculation:\r\n\t\t\t\tlet obj = content.subLeverCalculations.subLeverCalculation.find((obj) => {\r\n\t\t\t\t\tif (this.props.currentRoute.state !== undefined) {\r\n\t\t\t\t\t\treturn obj.id === this.props.currentRoute.state.subleverId\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\treturn obj.id === getCurrentSubLeverId()\r\n\t\t\t\t\t}\r\n\t\t\t\t})\r\n\r\n\t\t\t\thelpContent = obj.help\r\n\t\t\t\tbreak\r\n\r\n\t\t\tcase routes.calculateROI:\r\n\t\t\t\thelpContent = content.calculateROI.help\r\n\t\t\t\tbreak\r\n\r\n\t\t\tdefault:\r\n\t\t\t\tbreak\r\n\t\t}\r\n\r\n\t\tthis.setState({\r\n\t\t\thelpContent: helpContent\r\n\t\t})\r\n\r\n\t\tthis.showModal('help')\r\n\t}\r\n\r\n\tcheckForCaseStudy(props = this.props) {\r\n\t\tlet obj = {}\r\n\r\n\t\tif (props.currentRoute.state && props.currentRoute.state.hasOwnProperty('subleverId')) {\r\n\t\t\t// Retrieve from React Router\r\n\t\t\tobj = props.content.subLeverCalculations.subLeverCalculation.find((obj) =>\r\n\t\t\t\tobj.id === props.currentRoute.state.subleverId)\r\n\t\t} else {\r\n\t\t\t// Retrieve from cookie\r\n\t\t\tobj = props.content.subLeverCalculations.subLeverCalculation.find((obj) =>\r\n\t\t\t\tobj.id === getCurrentSubLeverId())\r\n\t\t}\r\n\r\n\t\t/*\r\n\t\tif (obj !== undefined && obj !== 'undefined') {\r\n\t\t\treturn obj.caseStudy\r\n\t\t}\r\n\t\treturn false\r\n\t\t*/\r\n\r\n\t\t//Uncomment above code and comment below code to show case study to below hardcoded sub levers.\r\n\t\tif (obj !== undefined && obj !== 'undefined') {\r\n\t\t\tif (obj.id === \"1.5\" || obj.id === \"1.6\" || obj.id === \"2.3\" || obj.id === \"3.6\") {\r\n\t\t\t\treturn false\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\treturn obj.caseStudy\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn false\r\n\t}\r\n\r\n\tcheckForHelp(props = this.props) {\r\n\t\tlet obj = {}\r\n\r\n\t\tif (props.currentRoute.state && props.currentRoute.state.hasOwnProperty('subleverId')) {\r\n\t\t\t// Retrieve from React Router\r\n\t\t\tobj = props.content.subLeverCalculations.subLeverCalculation.find((obj) =>\r\n\t\t\t\tobj.id === props.currentRoute.state.subleverId)\r\n\t\t} else {\r\n\t\t\t// Retrieve from cookie\r\n\t\t\tobj = props.content.subLeverCalculations.subLeverCalculation.find((obj) =>\r\n\t\t\t\tobj.id === getCurrentSubLeverId())\r\n\t\t}\r\n\r\n\t\t//Comment below If condition to show Learn more to below hardcoded sub levers.\r\n\t\tif (obj !== undefined && obj !== 'undefined') {\r\n\t\t\tif (obj.id === \"1.5\" || obj.id === \"1.6\" || obj.id === \"2.3\" || obj.id === \"3.6\") {\r\n\t\t\t\treturn true\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\treturn false\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn false\r\n\t}\r\n\r\n\tcaseStudyClick() {\r\n\t\tthis.showModal('caseStudy')\r\n\t}\r\n\r\n\tmyWorkClick() {\r\n\t\tif (this.props.change !== undefined && this.props.change !== null\r\n\t\t\t&& this.props.change === true &&\r\n\t\t\tthis.props.spendDetails.isKpiStrategy !== undefined && this.props.spendDetails.isKpiStrategy !== null\r\n\t\t\t&& this.props.spendDetails.isKpiStrategy === true\r\n\t\t\t&& !this.state.toggle) {\r\n\t\t\tthis.showModal(\"KPI\");\r\n\t\t}\r\n\t\telse if (this.props.change !== undefined && this.props.change !== null\r\n\t\t\t&& this.props.change === true &&\r\n\t\t\tthis.props.valueStory.isValueStoryPage !== undefined && this.props.valueStory.isValueStoryPage !== null\r\n\t\t\t&& this.props.valueStory.isValueStoryPage === true\r\n\t\t\t&& !this.state.toggle) {\r\n\t\t\tthis.showModal(\"VS\");\r\n\t\t}\t\t\r\n else if (this.props.change !== undefined && this.props.change !== null\r\n\t\t\t&& this.props.change === true &&\r\n\t\t\tthis.props.spendDetails.isSpendParameterPage !== undefined && this.props.spendDetails.isSpendParameterPage !== null\r\n\t\t\t&& this.props.spendDetails.isSpendParameterPage === true) {\r\n this.showModal(\"SpendParameter\");\r\n\t\t} \r\n\t\telse if (!this.state.toggle) {\r\n\t\t\tthis.showModal('terms')\r\n\t\t} else {\r\n\t\t\tthis.showModal('valueStory')\r\n\t\t}\r\n\r\n\t}\r\n\r\n\tcontinueKPINavigation(action,isIntermediateDataDelete) { \r\n this.setState({ isLoading : true });\r\n if(isIntermediateDataDelete)\r\n this.props.deleteIntermediateKPIOnRedirect(true);\r\n else\r\n this.props.saveKPIOnRedirect(true);\r\n setTimeout(() => {\r\n this.props.isEnablementStrategyContainerPage(false);\r\n this.closeModal(action) \r\n this.setState({ isLoading : false });\r\n }, 10000);\r\n }\r\n\r\n\tcontinueValueStoryNavigation(action) {\r\n this.setState({ isLoading: true });\r\n this.props.saveValueStoryOnRedirect(true);\r\n setTimeout(() => {\r\n this.props.isValueStoryPage(false);\r\n this.closeModal(action);\r\n this.setState({ isLoading: false });\r\n }, 4000);\r\n }\r\n\t\r\n\tcontinueSpendParameterNavigation(action) {\r\n this.setState({ isLoading: true });\r\n this.props.saveSpendParametersOnRedirect(true);\r\n setTimeout(() => {\r\n this.props.isSpendParameterPage(false);\r\n this.closeModal(action);\r\n this.setState({ isLoading: false });\r\n }, 4000);\r\n }\r\n\r\n\tshowModal(action) {\r\n\t\tthis.refs[action].show()\r\n\t}\r\n\r\n\thideModal(action) {\r\n\t\tthis.refs[action].hide()\r\n\t}\r\n\r\n\tcloseModal(action) {\r\n\t\tthis.props.pendingChanges(null)\r\n\t\tthis.refs[action].hide()\r\n\t\tthis.showModal('valueStory')\r\n\t}\r\n\r\n\tcomponentWillReceiveProps(nextProps) {\r\n\t\tconst caseStudyContent = this.checkForCaseStudy(nextProps)\r\n\t\tthis.setState({\r\n\t\t\tcaseStudyContent: caseStudyContent\r\n\t\t})\r\n\r\n\t\tif (nextProps.change == null) {\r\n\t\t\tthis.setState({ toggle: true })\r\n\t\t}\r\n\t\telse if (nextProps.change != null) {\r\n\t\t\tthis.setState({ toggle: false })\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentWillMount() {\r\n\t\tconst caseStudyContent = this.checkForCaseStudy()\r\n\r\n\t\tthis.setState({\r\n\t\t\tcaseStudyContent: caseStudyContent\r\n\t\t})\r\n\t}\r\n\r\n\tPeriodicEmailConfirmation() {\r\n\t\tlet language = getCurrentLanguage()\r\n\r\n\t\tif (language === undefined || language === 'undefined' || language === '') {\r\n\t\t\tlanguage = 'en'\r\n\t\t}\r\n\t\tlet email = localStorage.getItem(\"loggedinUser\")\r\n\t\tlet values = { Email: email, Language: language };\r\n\t\tvar content = this.props.content.login\r\n\t\tthis.props.periodicEmailConfirmation(values)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tthis.setState({ enablePeriodicValidation: false })\r\n\t\t\t\tthis.props.periodicEmailConfirmationSuccess(content[response.status])\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tthis.props.periodicEmailConfirmationFailure(content[error.response.status])\r\n\t\t\t})\r\n\t}\r\n\r\n\r\n\trender() {\r\n\t\t//!test.contains('@sap.com') &&\r\n\t\t//!this.localStorage.getItem('loggedinUser').toString().contains('sap.com') &&\r\n\t\t//var test = 'sunita.kawale@sap.com'\r\n\t\tconst isLoggedIn = this.props.publicRoutes.indexOf(this.props.currentRoute.pathname) > -1 ? false : true,\r\n\t\t\tnoHelp = (this.props.currentRoute.pathname === routes.discovery && this.props.slide === false) ||\r\n\t\t\t\tthis.props.noHelpRoutes.indexOf(this.props.currentRoute.pathname) > -1 || (this.props.currentRoute.pathname === routes.subLeverCalculation && this.checkForHelp()) ? true : false,\r\n\t\t\tcaseStudy = (this.props.currentRoute.pathname === routes.subLeverCalculation && this.checkForCaseStudy()) ? true : false\r\n\t\tvar message = '';\r\n\t\tconst showAlertMessage =\r\n\t\t\tlocalStorage.getItem('loggedinUser') !== undefined &&\r\n\t\t\t\tlocalStorage.getItem('loggedinUser') !== null\r\n\t\t\t\t&& !localStorage.getItem('loggedinUser').includes('@sap.com') &&\r\n\t\t\t\tthis.props.currentRoute.pathname === '/start' &&\r\n\t\t\t\tlocalStorage.getItem('daysRemainforReactivation') !== null &&\r\n\t\t\t\tlocalStorage.getItem('daysRemainforReactivation') !== undefined &&\r\n\t\t\t\tlocalStorage.getItem('daysRemainforReactivation') >= 0 ? true : false;\r\n\t\tif (showAlertMessage) {\r\n\t\t\tmessage = this.props.content.login.alertMessage.toString().replace('%X%', localStorage.getItem('daysRemainforReactivation'))\r\n\t\t}\r\n\r\n\t\tconst isCustomer = sessionStorage.getItem('isCustomer') === 'true'\r\n\r\n\t\treturn (\r\n\r\n\t\t\t\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tuser: state.default,\r\n\t\tcontent: state.content,\r\n\t\tslide: state.goToChoosePath,\r\n\t\tmenu: state.content.menu,\r\n\t\tchange: state.detailedFileChanges.changes,\r\n\t\ttabMessage: state.content.spendAnalysis.detailedFile,\r\n\t\tmenu: state.content.menu,\r\n\t\tspendDetails: state.spendDetails,\r\n\t\tvalueStory : state.valueStory,\r\n\t}\r\n}\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tperiodicEmailConfirmation: (email) => dispatch(periodicEmailConfirmation(email)),\r\n\t\tperiodicEmailConfirmationSuccess: (bool) => dispatch(periodicEmailConfirmationSuccess(bool)),\r\n\t\tperiodicEmailConfirmationFailure: (error) => dispatch(periodicEmailConfirmationFailure(error)),\r\n\t\tpendingChanges: changes => dispatch(pendingChanges(changes)),\r\n\t\tsaveKPIOnRedirect: changes => dispatch(saveKPIOnRedirect(changes)),\r\n isEnablementStrategyContainerPage: obj => dispatch(isEnablementStrategyContainerPage(obj)),\r\n\t\tdeleteIntermediateKPIOnRedirect: changes => dispatch(deleteIntermediateKPIOnRedirect(changes)),\r\n\t\tsaveValueStoryOnRedirect: changes => dispatch(saveValueStoryOnRedirect(changes)),\r\n isValueStoryPage:(obj)=>dispatch(isValueStoryPage(obj)),\r\n\t\tisSpendParameterPage: obj => dispatch(isSpendParameterPage(obj)),\r\n saveSpendParametersOnRedirect: changes => dispatch(saveSpendParametersOnRedirect(changes)), \r\n\t}\t\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(NavContainer)\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\n// Utils\r\nimport classnames from 'classnames'\r\n\r\n// UI\r\nimport FaAngleRight from 'react-icons/lib/fa/angle-right'\r\n\r\nconst SubItemsDisplay = (props) =>\r\n\t\r\n \r\n this.isDuplicate(vals)\r\n }}\r\n type='name' />\r\n \r\n \r\n {this.props.domainDetail.AddedBy}
\r\n {moment(this.props.domainDetail.AddedOn).format('L')}\r\n \r\n \r\n {this.props.domainDetail.UpdatedBy}
\r\n {moment(this.props.domainDetail.UpdatedOn).format('L')} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nclass NonEditableRow extends React.Component {\r\n\r\n onDelEvent() {\r\n this.props.onDelEvent(this.props.cellData);\r\n }\r\n\r\n onEditEvent() {\r\n this.props.onEditEvent(this.props.cellData);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.props.cellData.name}\r\n \r\n \r\n {this.props.domainDetail.AddedBy}
\r\n {moment(this.props.domainDetail.AddedOn).format('L')}\r\n \r\n \r\n {this.props.domainDetail.UpdatedBy}
\r\n {moment(this.props.domainDetail.UpdatedOn).format('L')} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n domainDetails: state.domainDetails,\r\n validation: state.content.validation,\r\n user: state.default,\r\n content : state.content.menu.DomainManager[0].domainDetails\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n domainDetails: (formValues) => dispatch(domainDetails(formValues)),\r\n domainDetailsSuccess: (bool) => dispatch(domainDetailsSuccess(bool)),\r\n domainDetailsFailure: (error) => dispatch(domainDetailsFailure(error)),\r\n deleteDomain: (id) => dispatch(deleteDomain(id)),\r\n addDomain: (formValues) => dispatch(addDomain(formValues)),\r\n updateDomain: (formValues) => dispatch(updateDomain(formValues))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DomainDetails)\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport moment from 'moment'\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\n// Settings\r\nimport { validators } from 'Constants'\r\n\r\n// Actions\r\nimport {\r\n blockedDomainDetails,\r\n blockedDomainDetailsSuccess,\r\n blockedDomainDetailsFailure,\r\n deleteBlockedDomain,\r\n addBlockedDomain,\r\n updateBlockedDomain\r\n}\r\n from 'actions/userActions'\r\n\r\nclass BlockedDomain extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { filterText: \"\", message: \"\" }\r\n this.state.domainDetails = [\r\n {\r\n id: 0,\r\n name: '',\r\n isEditing: false\r\n }]\r\n this.domainDetails = this.domainDetails.bind(this)\r\n this.addNewDomain = this.addNewDomain.bind(this)\r\n this.handleUserInput = this.handleUserInput.bind(this)\r\n\r\n }\r\n\r\n domainDetails() {\r\n this.props.blockedDomainDetails()\r\n .then((results) => {\r\n this.setState({ domainDetails: results.data.Result });\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.blockedDomainDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.props.blockedDomainDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n\r\n componentWillMount() {\r\n this.domainDetails()\r\n }\r\n\r\n handleUserInput(filterText) {\r\n this.setState({ filterText: filterText.target.value.toLowerCase() });\r\n }\r\n\r\n handleRowDel(domainDetail) {\r\n const result = window.confirm('Do you want to delete the domain ' + domainDetail.name + ' ? ');\r\n if (result) {\r\n var index = this.state.domainDetails.map(function (x) { return x.id; }).indexOf(domainDetail.id);\r\n if (index === -1) {\r\n return false;\r\n }\r\n this.props.deleteBlockedDomain(domainDetail.id)\r\n .then((results) => {\r\n this.setState({ message: results.data.Message });\r\n this.state.domainDetails.splice(index, 1);\r\n this.setState(this.state.domainDetails);\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.blockedDomainDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.props.blockedDomainDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n }\r\n\r\n handleAddEvent(evt) {\r\n var domainDetail = {\r\n name: evt\r\n }\r\n this.state.domainDetails.push(domainDetail);\r\n this.setState(this.state.domainDetails);\r\n }\r\n\r\n handleEditEvent(evt) {\r\n var item = {\r\n name: evt.name,\r\n id: evt.id,\r\n isEditing: evt.isEditing\r\n };\r\n var old_domainDetails = this.state.domainDetails.slice();\r\n var newdomainDetails = old_domainDetails.map(function (testdomainDetails) {\r\n for (var key in testdomainDetails) {\r\n if (testdomainDetails.id == item.id) {\r\n testdomainDetails.name = item.name;\r\n testdomainDetails.isEditing = !item.isEditing;\r\n\r\n if (evt.UpdatedBy !== undefined) {\r\n testdomainDetails.UpdatedBy = evt.UpdatedBy;\r\n testdomainDetails.UpdatedOn = evt.UpdatedOn;\r\n }\r\n break;\r\n }\r\n }\r\n return testdomainDetails;\r\n });\r\n\r\n this.setState({ domainDetails: newdomainDetails });\r\n\r\n }\r\n\r\n handleCancelEvent(originalDetails) {\r\n var item = {\r\n id: originalDetails[0].id,\r\n name: originalDetails[0].name\r\n };\r\n\r\n var old_domainDetails = this.state.domainDetails.slice();\r\n var newdomainDetails = old_domainDetails.map(function (testdomainDetails) {\r\n for (var key in testdomainDetails) {\r\n if (testdomainDetails.id === item.id) {\r\n testdomainDetails[key] = item.name;\r\n testdomainDetails[\"isEditing\"] = false;\r\n break;\r\n }\r\n }\r\n return testdomainDetails;\r\n });\r\n this.setState({ domainDetails: newdomainDetails });\r\n\r\n };\r\n\r\n addNewDomain(formValue) {\r\n //this.props.resetError();\r\n var domainDetail = {\r\n name: formValue.DomainName.trim()\r\n }\r\n\r\n this.props.addBlockedDomain(domainDetail).then((results) => {\r\n var item = {\r\n name: results.data.Result.BDomains,\r\n id: results.data.Result.BDId,\r\n isEditing: false,\r\n AddedBy: results.data.Result.AddedBy,\r\n AddedOn: results.data.Result.AddedOn\r\n\r\n };\r\n this.setState({ message: results.data.Message }); //this.state.message \r\n // Reset form\r\n this.formDispatch(actions.reset('addBlockedDomain'))\r\n this.state.domainDetails.push(item)\r\n this.setState(this.state.domainDetails)\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.blockedDomainDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.props.blockedDomainDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n\r\n handleDomainDetailTable(evt) {\r\n var item = {\r\n name: evt.target.name,\r\n id: evt.target.id,\r\n value: evt.target.value\r\n };\r\n\r\n var old_domainDetails = this.state.old_domainDetails.slice();\r\n if (old_domainDetails.length === 0) {\r\n old_domainDetails = this.state.domainDetails.slice();\r\n this.setState({ old_domainDetails: old_domainDetails });\r\n }\r\n let testOfObjects = old_domainDetails;\r\n var newdomainDetails = testOfObjects.map(function (testdomainDetails) {\r\n for (var key in testdomainDetails) {\r\n if (testdomainDetails.id === item.id) {\r\n testdomainDetails[key] = item.name;\r\n testdomainDetails[\"isEditing\"] = false;\r\n break;\r\n }\r\n }\r\n return testdomainDetails;\r\n });\r\n\r\n this.setState({ domainDetails: newdomainDetails });\r\n\r\n };\r\n\r\n handleUpdateEvent(updateDetails) {\r\n if (updateDetails.length > 0 && this.isDuplicate(updateDetails[0].name)) {\r\n var item = {\r\n id: updateDetails[0].id,\r\n name: updateDetails[0].name,\r\n isEditing: true,\r\n UpdatedBy: '',\r\n UpdatedOn: Date.now\r\n };\r\n\r\n this.props.updateBlockedDomain(item)\r\n .then((results) => {\r\n if (results.status === 200) {\r\n item.UpdatedBy = results.data.Result.UpdatedBy;\r\n item.UpdatedOn = results.data.Result.UpdatedOn;\r\n this.setState({ message: results.data.Message });\r\n this.handleEditEvent(item)\r\n }\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.blockedDomainDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.props.blockedDomainDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n }\r\n\r\n isDuplicate(vals) {\r\n var result = this.state.domainDetails.find(domain => domain.name === vals.trim()) === undefined\r\n if (result) {\r\n return result;\r\n }\r\n else {\r\n return result;\r\n }\r\n }\r\n \r\n componentWillUnmount() {\r\n this.formDispatch(actions.reset('addBlockedDomain'))\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n this.isDuplicate(vals)\r\n }}\r\n type='name' />\r\n \r\n \r\n {this.props.domainDetail.AddedBy}
\r\n {moment(this.props.domainDetail.AddedOn).format('L')}\r\n \r\n \r\n {this.props.domainDetail.UpdatedBy}
\r\n {moment(this.props.domainDetail.UpdatedOn).format('L')} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nclass NonEditableRow extends React.Component {\r\n\r\n onDelEvent() {\r\n this.props.onDelEvent(this.props.cellData);\r\n }\r\n\r\n onEditEvent() {\r\n this.props.onEditEvent(this.props.cellData);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.props.cellData.name}\r\n \r\n \r\n {this.props.domainDetail.AddedBy}
\r\n {moment(this.props.domainDetail.AddedOn).format('L')}\r\n \r\n \r\n {this.props.domainDetail.UpdatedBy}
\r\n {moment(this.props.domainDetail.UpdatedOn).format('L')} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n domainDetails: state.domainDetails,\r\n validation: state.content.validation,\r\n user: state.default,\r\n content : state.content.menu.DomainManager[0].domainDetails\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n blockedDomainDetails: (formValues) => dispatch(blockedDomainDetails(formValues)),\r\n blockedDomainDetailsSuccess: (bool) => dispatch(blockedDomainDetailsSuccess(bool)),\r\n blockedDomainDetailsFailure: (error) => dispatch(blockedDomainDetailsFailure(error)),\r\n deleteBlockedDomain: (id) => dispatch(deleteBlockedDomain(id)),\r\n addBlockedDomain: (formValues) => dispatch(addBlockedDomain(formValues)),\r\n updateBlockedDomain: (formValues) => dispatch(updateBlockedDomain(formValues))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(BlockedDomain)","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\n\r\nimport { modalStyle, modalContentStyle, changeModalStyle, changeModalContentStyle } from 'Constants'\r\n\r\nimport Modal from 'reboron/OutlineModal'\r\nimport Button from 'UI/Button'\r\nimport TabContainer from './TabContainer';\r\nimport { AppBar } from '@material-ui/core';\r\nimport {\r\n pendingChanges\r\n} from 'actions/userActions'\r\n\r\nimport { connect } from 'react-redux'\r\n\r\n\r\nconst styles = theme => ({\r\n root: {\r\n flexGrow: 1,\r\n backgroundColor: theme.palette.background.paper,\r\n borderBottom: \"1px solid grey\",\r\n boxShadow: \"none\"\r\n },\r\n indicator: {\r\n backgroundColor: \"#008fd3\",\r\n },\r\n textColor: {\r\n // color: \"#008fd3\",\r\n },\r\n paddingTop: {\r\n paddingTop: \"20px\"\r\n },\r\n tabs: {\r\n borderLeft: \"1px solid grey\",\r\n borderRight: \"1px solid grey\",\r\n padding: \"10px\"\r\n },\r\n borderBothSides: {\r\n borderLeft: \"1px solid grey\",\r\n borderRight: \"1px solid grey\",\r\n },\r\n borderLeftSide: {\r\n borderLeft: \"1px solid grey\",\r\n }\r\n});\r\n\r\nclass TabPanelGeneric extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n activeTab: props.tabId,\r\n toggle: true,\r\n nextTab: 5,\r\n event: null,\r\n activeTabCopy: props.tabId\r\n };\r\n this.showModal = this.showModal.bind(this)\r\n this.hideModal = this.hideModal.bind(this)\r\n this.closeModal = this.closeModal.bind(this)\r\n this.handleChange = this.handleChange.bind(this)\r\n }\r\n\r\n showModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n this.refs[action].hide()\r\n }\r\n\r\n closeModal(action) {\r\n let activeTab = this.state.activeTabCopy\r\n this.props.pendingChanges(false)\r\n this.setState({ toggle: false, activeTab: activeTab }, this.refs[action].hide())\r\n if (this.props.dispatchTabChange) {\r\n if (this.props.handleNextButton) {\r\n this.props.handleNextButton(activeTab)\r\n }\r\n this.props.dispatchTabChange(activeTab)\r\n\r\n }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.pendingChanges) {\r\n this.setState({ toggle: false })\r\n }\r\n else if (!nextProps.pendingChanges) {\r\n this.setState({ toggle: true })\r\n }\r\n }\r\n handleChange = (event, activeTab) => {\r\n // if (activeTab == 5) {\r\n // this.setState({ toggle: true })\r\n // }\r\n if (this.props.isLoading !== undefined && this.props.isLoading === false) {\r\n if (this.state.toggle) {\r\n this.setState({ activeTab: activeTab });\r\n if (this.props.dispatchTabChange) {\r\n if (this.props.handleNextButton) {\r\n this.props.handleNextButton(activeTab)\r\n }\r\n this.props.dispatchTabChange(activeTab)\r\n\r\n }\r\n } else {\r\n this.setState({ activeTabCopy: activeTab }, this.showModal(\"terms\"));\r\n\r\n }\r\n }\r\n\r\n };\r\n\r\n render() {\r\n const { classes } = this.props;\r\n const { activeTab } = this.state;\r\n const isLoading = this.props.isLoading\r\n return (\r\n )\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\tid: 2,\r\n\t\t\t\tlabel: this.props.domainLang.blocked,\r\n\t\t\t\tcomponent: ()\r\n\t\t\t}\r\n\t\t];\r\n\r\n\t\t\r\n\t\tthis.setState({\r\n\t\t\ttabs: tabs,\r\n\t\t\ttabId: 1\r\n\t\t})\r\n\t}\r\n\r\n\tdispatchTabChange(tabId) {\r\n\t\tif(tabId === 1) {\r\n\t\t\tthis.setState({\r\n\t\t\t\ttabId: tabId,\r\n\t\t\t\tnextButtonLabel: this.props.ui.next\r\n\t\t})}\r\n\t}\r\n\r\n\tcomponentWillMount() {\r\n\t\twindow.scrollTo(0, 0)\r\n\t\tthis.intializeTabs()\r\n\t\t//\tthis.getNextPage()\r\n\t}\r\n\r\n\thandleNextButton(tabId) {\r\n\t\t\r\n\t}\r\n\r\n\tpendingChanges(pendingChange) {\r\n\t\tthis.setResultSummaryDetails({pendingChanges: pendingChange})\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t{this.props.user.Email} \r\n\t\t\t\t{this.props.user.FirstName \t} \r\n\t\t\t\t{this.props.user.LastName \t} \r\n\t\t\t\t\r\n\t\t\t\t\t{ \r\n\t\t\t\t\t\tObject.values(this.props.user.objRoles).map((rol,index)=>\r\n\t\t\t\t\t\t{\r\n\r\n\t\t\t\t\t\t\tif(index=== (this.props.user.objRoles.length-1)){\r\n\t\t\t\t\t\t\t\treturn rol.RoleName\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\telse{ return rol.RoleName+\", \"}\r\n\t\t\t\t\t\t})\r\n\t\t\t\t\t}\r\n\t\t\t\t \r\n\t\t\t\t{this.props.user.UpdatedBy} \r\n\t\t\t\t{this.props.user.UpdatedOn !== null ? moment(this.props.user.UpdatedOn).format('L') : null} \r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t{ \r\n\t\t\t\t\tthis.showDeleteLink() ? \r\n\t\t\t\t\t: null\r\n\t\t\t\t}\r\n\t\t\t\t \r\n\t\t\t\t \r\n\t\t\t\t{\r\n\t\t\t\t\t!this.props.user.Customer? this.props.user.isEditing && this.props.editId === this.props.user.Id ?\r\n\t\t\t\t\t\t(\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t\t:\r\n\t\t\t\t\t\t(\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t) : \r\n\t\t);\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tui: state.content.ui,\r\n\t\tuser: state.default,\r\n\t\tcontent: state.content.userManager,\r\n\t\tvalidation: state.content.validation,\r\n\t\tuserManager : state.userManagerUpdates\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tuserManagerSuccess: (bool) => dispatch(userManagerSuccess(bool)),\r\n\t\tuserManagerFailure: (error) => dispatch(userManagerFailure(error)),\r\n\t\tfetchUserRoles: (formValues) => dispatch(fetchUserRoles(formValues)),\r\n\t\taddUserRole: (formValues) => dispatch(addUserRole(formValues)),\r\n\t\tdeleteUserRole: (formValues) => dispatch(deleteUserRole(formValues)),\r\n\t\tupdateUserRole: (formValues) => dispatch(updateUserRole(formValues)),\r\n\t\tresetError: () => dispatch(resetError()),\r\n\t\tGetAllRoles : () => dispatch(GetAllRoles())\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(UserManagerContainer)\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\n// Settings\r\nimport { validators } from 'Constants'\r\n\r\n// Actions\r\nimport {\r\n fetchAllUsers,\r\n userDetailsSuccess,\r\n userDetailsFailure,\r\n setPassword,\r\n userDetailsLoading,\r\n resetError\r\n}\r\n from 'actions/userActions'\r\n\r\nlet messageDuration = 1800\r\n\r\nclass UserEmailPasswordManager extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n filterText: \"\",\r\n filterValue: \"\",\r\n users: [], mymessage:''\r\n }\r\n\r\n this.loadData = this.loadData.bind(this)\r\n\r\n }\r\n\r\n componentWillMount(){\r\n this.loadData()\r\n }\r\n loadData() {\r\n this.props.fetchAllUsers()\r\n .then((response) => {\r\n var userData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n userData.push(obj);\r\n }\r\n this.setState({ users: userData })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n else {\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n\r\n\r\n\r\n handleUserInput(filterText) {\r\n this.setState({ filterText: filterText.target.value.toLowerCase() });\r\n };\r\n\r\n resetPassword(formValues) {\r\n var userDetail = {\r\n Email: formValues.Email,\r\n NewPassword: formValues.NewPassword\r\n }\r\n var msg = this.props.content\r\n this.props.setPassword(userDetail).then((results) => {\r\n if (results.status === 200) {\r\n var httpstatus = results.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n // Reset form\r\n this.formDispatch(actions.reset('activateUser'))\r\n this.setState({ filterText: \"\", filterValue: \"\" })\r\n this.setState({mymessage: getMsgfromStatus})\r\n setTimeout(() => { \r\n this.loadData()\r\n this.setState({mymessage: \"\"})\r\n }, messageDuration) \r\n \r\n \r\n }\r\n \r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n var httpstatus = error.response.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n if (getMsgfromStatus !== undefined) {\r\n this.props.userDetailsFailure(getMsgfromStatus)\r\n }\r\n else {\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n }\r\n })\r\n\r\n }\r\n\r\n handleChange(value) {\r\n var filter = value;\r\n this.setState({ filterValue: filter });\r\n }\r\n\r\n componentWillUnmount() {\r\n this.formDispatch(actions.reset('activateUser'))\r\n this.props.resetError()\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.props.user.email} \r\n {this.props.user.joinedDate} \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.userEmailPasswordManager,\r\n validation: state.content.validation,\r\n users: state.users\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchAllUsers: (formValues) => dispatch(fetchAllUsers(formValues)),\r\n userDetailsLoading: (bool) => dispatch(userDetailsLoading(bool)),\r\n userDetailsSuccess: (bool) => dispatch(userDetailsSuccess(bool)),\r\n userDetailsFailure: (error) => dispatch(userDetailsFailure(error)),\r\n setPassword: (formValues) => dispatch(setPassword(formValues)),\r\n resetError: () => dispatch(resetError())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(UserEmailPasswordManager)\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\nimport Select from 'react-select'\r\n// Settings\r\nimport { validators } from 'Constants'\r\nimport { SelectField, Option } from 'react-mdl-extra'\r\n\r\n// Actions\r\nimport {\r\n fetchAllUsers,\r\n userDetailsSuccess,\r\n userDetailsFailure,\r\n activateUser,\r\n userDetailsLoading,\r\n resetError\r\n}\r\n from 'actions/userActions'\r\n\r\nimport { dropdownStyles } from 'react-select-css'\r\n\r\nlet messageDuration = 1800\r\nvar options = [];\r\n\r\nclass UserActivationManager extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n filterText: \"\",\r\n filterValue: \"\",\r\n users: [], mymessage: '',\r\n selectedOption: '',\r\n isActivateUserSelected: ''\r\n }\r\n\r\n this.loadData = this.loadData.bind(this)\r\n\r\n }\r\n\r\n componentWillMount() {\r\n this.loadData()\r\n }\r\n loadData() {\r\n this.props.fetchAllUsers()\r\n .then((response) => {\r\n var userData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n userData.push(obj);\r\n }\r\n this.setState({ users: userData })\r\n var array = [];\r\n this.props.content.selector.forEach((element) => {\r\n var obj = {};\r\n obj.label = element;\r\n obj.value = element;\r\n array.push(obj);\r\n });\r\n if (array.length > 0 && array[0].label === \"\") array.splice(0, 1);\r\n options = array;\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n else {\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n\r\n\r\n\r\n handleUserInput(filterText) {\r\n this.setState({ filterText: filterText.target.value.toLowerCase() });\r\n };\r\n\r\n activateUsers(formValues) {\r\n this.props.resetError();\r\n var userDetail = {\r\n Email: formValues.Email\r\n }\r\n var msg = this.props.content\r\n this.props.activateUser(userDetail).then((results) => {\r\n if (results.status === 200) {\r\n var httpstatus = results.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n // Reset form\r\n this.formDispatch(actions.reset('activateUser'))\r\n this.setState({ filterText: \"\", filterValue: \"\" })\r\n this.setState({ mymessage: getMsgfromStatus })\r\n setTimeout(() => {\r\n this.loadData()\r\n this.setState({ mymessage: \"\" })\r\n }, messageDuration)\r\n\r\n\r\n }\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n var httpstatus = error.response.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n if (getMsgfromStatus !== undefined) {\r\n this.props.userDetailsFailure(getMsgfromStatus)\r\n }\r\n else {\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n }\r\n })\r\n\r\n }\r\n\r\n handleChange(value) {\r\n var filter = value.label;\r\n this.setState({ filterValue: filter, selectedOption: filter });\r\n this.formDispatch(actions.setErrors('activateUser.Activated', false))\r\n }\r\n\r\n onDDLActivateUserClickEvent = () => {\r\n this.setState({ isActivateUserSelected: 'Selected' });\r\n }\r\n\r\n onDDLActivateUserBlurEvent = () => {\r\n this.setState({ isActivateUserSelected: '' });\r\n }\r\n\r\n componentWillUnmount() {\r\n this.formDispatch(actions.reset('activateUser'))\r\n this.props.resetError()\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.props.user.email} \r\n {this.props.user.emailConfirmed} \r\n {this.props.user.joinedDate} \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.activateUser,\r\n validation: state.content.validation,\r\n users: state.users\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchAllUsers: (formValues) => dispatch(fetchAllUsers(formValues)),\r\n userDetailsLoading: (bool) => dispatch(userDetailsLoading(bool)),\r\n userDetailsSuccess: (bool) => dispatch(userDetailsSuccess(bool)),\r\n userDetailsFailure: (error) => dispatch(userDetailsFailure(error)),\r\n activateUser: (formValues) => dispatch(activateUser(formValues)),\r\n resetError: () => dispatch(resetError())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(UserActivationManager)\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n Route,\r\n NavLink,\r\n MemoryRouter\r\n} from \"react-router-dom\";\r\nimport UserEmailPasswordManager from \"./UserEmailPasswordManager\";\r\nimport UserActivationManager from \"./UserActivationManager\";\r\n\r\nclass EmailManager extends React.Component {\r\n\r\n render() {\r\n return (\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n content: state.content.emailManager\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps)(EmailManager)\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\nimport moment from 'moment'\r\n// Settings\r\nimport { validators } from 'Constants'\r\nimport { SelectField, Option } from 'react-mdl-extra'\r\nimport Select from 'react-select'\r\n\r\nimport {\r\n fetchFiles,\r\n fetchSections,\r\n addSection,\r\n deleteSection,\r\n updateSection,\r\n userDetailsSuccess,\r\n userDetailsFailure,\r\n userDetailsLoading,\r\n resetError\r\n}\r\n from 'actions/userActions'\r\n\r\nimport { dropdownStyles } from 'react-select-css' \r\n\r\nvar options = [];\r\n\r\nconst mySelect = props => \r\n \r\n {this.props.slide.FileName}
\r\n \r\n \r\n \r\n \r\n {this.props.slide.AddedBy}
\r\n {moment(this.props.slide.AddedOn).format('L')}\r\n \r\n {/* \r\n {this.props.slide.UpdatedBy}
\r\n {moment(this.props.slide.UpdatedOn).format('L')} \r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nclass NonEditableRow extends React.Component {\r\n\r\n onDelEvent() {\r\n this.props.onDelEvent(this.props.cellData);\r\n }\r\n\r\n onEditEvent() {\r\n this.props.onEditEvent(this.props.cellData);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.props.slide.FileName}\r\n \r\n \r\n {this.props.cellData.sectionName}\r\n \r\n \r\n {this.props.slide.AddedBy}
\r\n {moment(this.props.slide.AddedOn).format('L')}\r\n \r\n {/* \r\n {this.props.slide.UpdatedBy}
\r\n {moment(this.props.slide.UpdatedOn).format('L')} \r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.sectionManager,\r\n validation: state.content.validation\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchFiles: (formValues) => dispatch(fetchFiles(formValues)),\r\n fetchSections: (formValues) => dispatch(fetchSections(formValues)),\r\n addSection: (formValues) => dispatch(addSection(formValues)),\r\n deleteSection: (formValues) => dispatch(deleteSection(formValues)),\r\n updateSection: (formValues) => dispatch(updateSection(formValues)),\r\n userDetailsLoading: (bool) => dispatch(userDetailsLoading(bool)),\r\n userDetailsSuccess: (bool) => dispatch(userDetailsSuccess(bool)),\r\n userDetailsFailure: (error) => dispatch(userDetailsFailure(error)),\r\n resetError: () => dispatch(resetError())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SectionManager)","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\n// Settings\r\nimport { validators } from 'Constants'\r\nimport { SelectField, Option } from 'react-mdl-extra'\r\nimport Select from 'react-select';\r\n\r\n\r\n// Actions\r\nimport {\r\n fetchReports,\r\n fetchMappings,\r\n fetchLayoutFiles,\r\n fetchSizeFiles,\r\n addReport,\r\n deleteReport,\r\n activateReport,\r\n updateReport,\r\n userDetailsSuccess,\r\n userDetailsFailure,\r\n userDetailsLoading,\r\n resetError\r\n}\r\n from 'actions/userActions'\r\n\r\nimport { dropdownStyles } from 'react-select-css'\r\n\r\nvar Layoutoptions = [];\r\nvar SizeOptions = [];\r\n\r\nclass ReportManager extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n userIsEditing: false,\r\n editId: 0,\r\n options: [],\r\n sizes: [],\r\n layout: '',\r\n size: '',\r\n reports: [],\r\n reportId: 0,\r\n sequence: [], mymessage: '',\r\n layoutOption: '',\r\n sizeOption: '',\r\n isReportLayoutSelected: '',\r\n isReportSizeFileSelected: ''\r\n }\r\n\r\n this.loadData = this.loadData.bind(this)\r\n this.handleLayoutChange = this.handleLayoutChange.bind(this)\r\n this.handleSizeChange = this.handleSizeChange.bind(this)\r\n }\r\n\r\n componentWillMount() {\r\n this.loadData()\r\n this.loadtemplates()\r\n }\r\n loadData() {\r\n this.props.fetchReports()\r\n .then((response) => {\r\n var reportData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n if (obj.Name === \"Default\") {\r\n continue;\r\n }\r\n else {\r\n reportData.push(obj);\r\n }\r\n }\r\n this.setState({ reports: reportData })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n }\r\n loadtemplates() {\r\n this.props.fetchLayoutFiles()\r\n .then((response) => {\r\n var layouts = [''];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n if (obj.Name === \"Default\") {\r\n continue;\r\n }\r\n else {\r\n layouts.push(obj.Name);\r\n }\r\n }\r\n this.setState({ options: layouts })\r\n var array = [];\r\n this.state.options.forEach((element) => {\r\n var obj = {};\r\n obj.label = element;\r\n obj.value = element;\r\n array.push(obj);\r\n });\r\n if (array.length > 0 && array[0].label === \"\") array.splice(0, 1);\r\n Layoutoptions = array;\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n\r\n this.props.fetchSizeFiles()\r\n .then((response) => {\r\n var sizes = [''];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n if (obj.Name === \"Default\") {\r\n continue;\r\n }\r\n else {\r\n sizes.push(obj.Name);\r\n }\r\n }\r\n this.setState({ sizes: sizes })\r\n var array_s = [];\r\n this.state.sizes.forEach((element) => {\r\n var obj = {};\r\n obj.label = element;\r\n obj.value = element;\r\n array_s.push(obj);\r\n });\r\n if (array_s.length > 0 && array_s[0].label === \"\") array_s.splice(0, 1);\r\n SizeOptions = array_s;\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n }\r\n\r\n handleRowDel(reportDetails) {\r\n // const result = window.confirm(this.props.validation.confirmDelete);\r\n // if (result) {\r\n var formValues = { Name: reportDetails.name, ID: reportDetails.id };\r\n var msg = this.props.content.rowDel[0];\r\n this.setState({ mymessage: \"\" })\r\n this.props.deleteReport(formValues)\r\n .then((response) => {\r\n this.props.userDetailsSuccess(response.data.Message)\r\n\r\n if (response.status === 200) {\r\n var httpstatus = response.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n this.loadData()\r\n this.setState({ mymessage: getMsgfromStatus })\r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(this.props.validation.networkError)\r\n }\r\n else {\r\n var httpstatus = error.response.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n if (getMsgfromStatus !== undefined) {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(getMsgfromStatus)\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n }\r\n })\r\n // }\r\n };\r\n\r\n handleActivate(reportDetails) {\r\n var formValues = { UpdatedBy: localStorage.getItem('loggedinUser'), Name: reportDetails.name, ID: reportDetails.id, Active: true, Description: reportDetails.description };\r\n var msg = this.props.content.rowAct[0];\r\n this.setState({ mymessage: \"\", reportId: formValues.ID })\r\n this.props.fetchMappings()\r\n .then((response) => {\r\n var sectionData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n if (obj.ReportID == this.state.reportId) {\r\n sectionData.push(obj);\r\n }\r\n }\r\n if (sectionData.length > 0) {\r\n this.props.activateReport(formValues)\r\n .then((response) => {\r\n this.props.userDetailsSuccess(response.data.Message)\r\n\r\n if (response.status === 200) {\r\n var httpstatus = response.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n this.loadData()\r\n this.setState({ mymessage: getMsgfromStatus })\r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(this.props.validation.networkError)\r\n }\r\n else {\r\n var httpstatus = error.response.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n if (getMsgfromStatus !== undefined) {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(getMsgfromStatus)\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n }\r\n })\r\n }\r\n else {\r\n this.props.userDetailsFailure(\"Please Add Sequence to this report to activate\")\r\n }\r\n })\r\n\r\n\r\n }\r\n\r\n handleReportDetailTable(evt) {\r\n var item = {\r\n name: evt.target.name,\r\n id: evt.target.id,\r\n value: evt.target.value\r\n };\r\n\r\n var old_reportDetails = this.state.old_reportDetails.slice();\r\n if (old_reportDetails.length === 0) {\r\n old_reportDetails = this.state.reports.slice();\r\n this.setState({ old_reportDetails: old_reportDetails });\r\n }\r\n let testOfObjects = old_reportDetails;\r\n var newreportDetails = testOfObjects.map(function (testReportDetails) {\r\n for (var key in testReportDetails) {\r\n if (testReportDetails.id === item.id) {\r\n testReportDetails[key] = item.name;\r\n testReportDetails[\"isEditing\"] = false;\r\n break;\r\n }\r\n }\r\n return testReportDetails;\r\n });\r\n\r\n this.setState({ reports: newreportDetails });\r\n\r\n };\r\n\r\n handleEditEvent(evt) {\r\n var item = {\r\n name: evt.name,\r\n id: evt.id,\r\n isEditing: evt.isEditing\r\n };\r\n var old_reportDetails = this.state.reports.slice();\r\n var newreportDetails = old_reportDetails.map(function (testReportDetails) {\r\n for (var key in testReportDetails) {\r\n if (testReportDetails.Id == item.id) {\r\n testReportDetails.Name = item.name;\r\n testReportDetails.isEditing = !item.isEditing;\r\n\r\n if (evt.UpdatedBy !== undefined) {\r\n testReportDetails.UpdatedBy = evt.UpdatedBy;\r\n testReportDetails.UpdatedOn = evt.UpdatedOn;\r\n }\r\n break;\r\n }\r\n }\r\n return testReportDetails;\r\n });\r\n\r\n this.setState({ reports: newreportDetails });\r\n\r\n }\r\n\r\n handleCancelEvent(originalDetails) {\r\n var item = {\r\n id: originalDetails.id,\r\n name: originalDetails.name\r\n };\r\n\r\n var old_reportDetails = this.state.reports.slice();\r\n var newreportDetails = old_reportDetails.map(function (testReportDetails) {\r\n for (var key in testReportDetails) {\r\n if (testReportDetails.Id === item.id) {\r\n testReportDetails[key] = item.name;\r\n testReportDetails[\"isEditing\"] = false;\r\n break;\r\n }\r\n }\r\n return testReportDetails;\r\n });\r\n this.setState({ reports: newreportDetails });\r\n\r\n };\r\n\r\n handleUpdateEvent(updateDetails) {\r\n if (updateDetails) {\r\n var item = {\r\n id: updateDetails.id,\r\n name: updateDetails.name,\r\n description: updateDetails.description,\r\n layout: updateDetails.layout,\r\n size: updateDetails.size,\r\n isEditing: true,\r\n UpdatedBy: localStorage.getItem('loggedinUser'),\r\n UpdatedOn: Date.now,\r\n oldReportName: updateDetails.oldReportName\r\n };\r\n\r\n this.props.updateReport(item)\r\n .then((results) => {\r\n var msg = this.props.content.rowUpdate[0];\r\n if (results.status === 200) {\r\n var httpstatus = results.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n\r\n this.props.userDetailsSuccess(getMsgfromStatus)\r\n this.setState({ mymessage: getMsgfromStatus })\r\n // item.UpdatedBy = results.data.Result.UpdatedBy;\r\n // item.UpdatedOn = results.data.Result.UpdatedOn;\r\n this.handleEditEvent(item)\r\n }\r\n this.loadData()\r\n this.setState({ userIsEditing: false })\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n }\r\n\r\n addReport(formValue) {\r\n this.props.resetError();\r\n var reportDetail = {\r\n name: formValue.ReportName.trim(),\r\n description: formValue.Description.trim(),\r\n User: localStorage.getItem('loggedinUser'),\r\n layout: formValue.Layout,\r\n size: formValue.Size,\r\n active: false\r\n }\r\n var msg = this.props.content;\r\n var result = this.state.reports.find(report => report.Name.toLowerCase() == reportDetail.name.toLowerCase()) === undefined\r\n if (!result) {\r\n this.props.userDetailsFailure('This report already exists!')\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.addReport(reportDetail).then((results) => {\r\n\r\n if (results.status === 200) {\r\n var httpstatus = results.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n // Reset form\r\n this.formDispatch(actions.reset('reportsManager'))\r\n this.loadData()\r\n this.setState({ mymessage: getMsgfromStatus, layoutOption: \"\", sizeOption: \"\" })\r\n // setTimeout(() => { \r\n // this.loadData()\r\n // this.setState({mymessage: \"\"})\r\n // }, messageDuration) \r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n\r\n }\r\n handleLayoutChange(value) {\r\n var filter = value.label;\r\n this.setState({ layoutOption: filter })\r\n this.formDispatch(actions.setErrors('reportsManager.Layout', false))\r\n\r\n }\r\n\r\n onDDLReportLayoutClickEvent = () => {\r\n this.setState({ isReportLayoutSelected: 'Selected' });\r\n }\r\n onDDLReportLayoutBlurEvent = () => {\r\n this.setState({ isReportLayoutSelected: '' });\r\n }\r\n\r\n onDDLReportSizeFileClickEvent = () => {\r\n this.setState({ isReportSizeFileSelected: 'Selected' });\r\n }\r\n onDDLReportSizeFileBlurEvent = () => {\r\n this.setState({ isReportSizeFileSelected: '' });\r\n }\r\n\r\n handleSizeChange(value) {\r\n var filter = value.label;\r\n this.setState({ sizeOption: filter })\r\n this.formDispatch(actions.setErrors('reportsManager.Size', false))\r\n }\r\n\r\n isDuplicate(vals) {\r\n var result = this.state.reports.find(report => report.Name === vals.trim()) === undefined\r\n if (result) {\r\n return result;\r\n }\r\n else {\r\n return result;\r\n }\r\n }\r\n\r\n componentDidUpdate() {\r\n this.formDispatch(actions.change('reportsManager.Layout', this.state.layoutOption))\r\n this.formDispatch(actions.change('reportsManager.Size', this.state.sizeOption))\r\n }\r\n componentWillUnmount() {\r\n this.formDispatch(actions.reset('reportsManager'))\r\n this.props.resetError();\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {this.props.report.Active ? 'Yes' : 'No'}
\r\n \r\n \r\n {/* {this.props.report.Description}
*/}\r\n \r\n \r\n \r\n {/* {this.props.report.Layout}
*/}\r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n {this.props.report.AddedBy}
\r\n {moment(this.props.report.AddedOn).format('L')}\r\n \r\n \r\n {this.props.report.UpdatedBy}
\r\n {moment(this.props.report.UpdatedOn).format('L')} \r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nclass NonEditableRow extends React.Component {\r\n\r\n onDelEvent() {\r\n this.props.onDelEvent(this.props.cellData);\r\n }\r\n onActivate() {\r\n this.props.onActivate(this.props.cellData);\r\n }\r\n\r\n onEditEvent() {\r\n this.props.onEditEvent(this.props.cellData);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.props.cellData.name}\r\n \r\n \r\n {this.props.report.Active ? 'Yes' : 'No'}
\r\n \r\n \r\n {this.props.report.Description}
\r\n \r\n \r\n {this.props.report.Layout}
\r\n \r\n \r\n {this.props.report.Size}
\r\n \r\n {/* \r\n {this.props.report.AddedBy}
\r\n {moment(this.props.report.AddedOn).format('L')}\r\n \r\n \r\n {this.props.report.UpdatedBy}
\r\n {moment(this.props.report.UpdatedOn).format('L')} \r\n */}\r\n \r\n \r\n \r\n \r\n {this.props.report.Active ? \r\n : }\r\n\r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.reports,\r\n validation: state.content.validation,\r\n reports: state.reports\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchReports: (formValues) => dispatch(fetchReports(formValues)),\r\n fetchMappings: (formValues) => dispatch(fetchMappings(formValues)),\r\n fetchLayoutFiles: (formValues) => dispatch(fetchLayoutFiles(formValues)),\r\n fetchSizeFiles: (formValues) => dispatch(fetchSizeFiles(formValues)),\r\n addReport: (formValues) => dispatch(addReport(formValues)),\r\n deleteReport: (formValues) => dispatch(deleteReport(formValues)),\r\n activateReport: (formValues) => dispatch(activateReport(formValues)),\r\n updateReport: (formValues) => dispatch(updateReport(formValues)),\r\n userDetailsLoading: (bool) => dispatch(userDetailsLoading(bool)),\r\n userDetailsSuccess: (bool) => dispatch(userDetailsSuccess(bool)),\r\n userDetailsFailure: (error) => dispatch(userDetailsFailure(error)),\r\n resetError: () => dispatch(resetError())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ReportManager)\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\nimport moment from 'moment'\r\n// Settings\r\nimport { validators } from 'Constants'\r\nimport { SelectField, Option } from 'react-mdl-extra'\r\n\r\n// Actions\r\nimport {\r\n fetchLayoutFiles,\r\n fetchSizeFiles,\r\n addLayoutFiles,\r\n addSizeFiles,\r\n deleteLayoutFiles,\r\n deleteSizeFiles,\r\n userDetailsSuccess,\r\n userDetailsFailure,\r\n userDetailsLoading,\r\n resetError\r\n}\r\n from 'actions/userActions'\r\n\r\nclass LayoutManager extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n userIsEditing: false,\r\n editId: 0,\r\n options: [],\r\n sizes: [],\r\n layout: '',\r\n size: '',\r\n layouts: [],\r\n tableContents: [],\r\n mymessage: ''\r\n }\r\n\r\n this.loadLayoutFiles = this.loadLayoutFiles.bind(this)\r\n this.loadSizeFiles = this.loadSizeFiles.bind(this)\r\n this.mergeFiles = this.mergeFiles.bind(this)\r\n }\r\n\r\n componentWillMount() {\r\n this.loadLayoutFiles()\r\n }\r\n loadLayoutFiles() {\r\n this.props.fetchLayoutFiles()\r\n .then((response) => {\r\n var layoutFilesData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n if (obj.Name === \"Default\") {\r\n continue;\r\n }\r\n else {\r\n layoutFilesData.push(obj);\r\n }\r\n }\r\n this.setState({ layouts: layoutFilesData })\r\n this.loadSizeFiles()\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n }\r\n\r\n loadSizeFiles() {\r\n this.props.fetchSizeFiles()\r\n .then((response) => {\r\n var sizeFilesData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n if (obj.Name === \"Default\") {\r\n continue;\r\n }\r\n else {\r\n sizeFilesData.push(obj);\r\n }\r\n }\r\n this.setState({ sizes: sizeFilesData })\r\n this.mergeFiles()\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n }\r\n\r\n mergeFiles() {\r\n var mergeFilesData = [];\r\n this.state.layouts.map(layout => {\r\n mergeFilesData.push(layout);\r\n })\r\n this.state.sizes.map(size => {\r\n mergeFilesData.push(size);\r\n })\r\n\r\n this.setState({ tableContents: mergeFilesData })\r\n }\r\n\r\n addLayoutFile(formValue) {\r\n this.props.resetError();\r\n var layoutDetail = {\r\n name: formValue.Layout.trim(),\r\n User: localStorage.getItem('loggedinUser'),\r\n active: true\r\n }\r\n var msg = this.props.content;\r\n var flag = layoutDetail.name.slice((layoutDetail.name.lastIndexOf(\".\") - 1 >>> 0) + 2);\r\n var result = this.state.layouts.find(report => report.Name.toLowerCase() == layoutDetail.name.toLowerCase()) === undefined\r\n if (flag.toLowerCase() === \"pptx\") {\r\n if (!result) {\r\n this.props.userDetailsFailure('This layoutfile already exists!')\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.addLayoutFiles(layoutDetail).then((results) => {\r\n\r\n if (results.status === 200) {\r\n var httpstatus = results.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n // Reset form\r\n this.formDispatch(actions.reset('reportsLayoutManager'))\r\n this.loadLayoutFiles()\r\n this.setState({ mymessage: getMsgfromStatus })\r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(\"You can only add pptx files!!\")\r\n }\r\n\r\n }\r\n addSizeFile(formValue) {\r\n this.props.resetError();\r\n var sizeDetail = {\r\n name: formValue.Size.trim(),\r\n User: localStorage.getItem('loggedinUser'),\r\n active: true\r\n }\r\n var msg = this.props.content;\r\n var flag = sizeDetail.name.slice((sizeDetail.name.lastIndexOf(\".\") - 1 >>> 0) + 2);\r\n var result = this.state.sizes.find(report => report.Name.toLowerCase() == sizeDetail.name.toLowerCase()) === undefined\r\n if (flag.toLowerCase() === \"pptx\") {\r\n if (!result) {\r\n this.props.userDetailsFailure('This layoutfile already exists!')\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.addSizeFiles(sizeDetail).then((results) => {\r\n if (results.status === 200) {\r\n var httpstatus = results.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n // Reset form\r\n this.formDispatch(actions.reset('reportsLayoutSizeManager'))\r\n this.loadLayoutFiles()\r\n this.setState({ mymessage: getMsgfromStatus })\r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n }else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(\"You can only add pptx files!!\")\r\n }\r\n\r\n }\r\n\r\n handleRowDel(data) {\r\n const result = window.confirm(this.props.validation.confirmDelete);\r\n if (result) {\r\n var formValues = { Name: data.Name };\r\n var msg = this.props.content.rowDel[0];\r\n this.setState({ mymessage: \"\" })\r\n if (data.Type == 'Layout') {\r\n this.props.deleteLayoutFiles(formValues)\r\n .then((response) => {\r\n this.props.userDetailsSuccess(response.data.Message)\r\n\r\n if (response.status === 200) {\r\n var httpstatus = response.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n this.loadLayoutFiles()\r\n this.setState({ mymessage: getMsgfromStatus })\r\n\r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(this.props.validation.networkError)\r\n }\r\n else {\r\n var httpstatus = error.response.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n if (getMsgfromStatus !== undefined) {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(getMsgfromStatus)\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n }\r\n })\r\n }\r\n else {\r\n this.props.deleteSizeFiles(formValues)\r\n .then((response) => {\r\n this.props.userDetailsSuccess(response.data.Message)\r\n\r\n if (response.status === 200) {\r\n var httpstatus = response.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n this.loadLayoutFiles()\r\n this.setState({ mymessage: getMsgfromStatus })\r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(this.props.validation.networkError)\r\n }\r\n // else {\r\n // var httpstatus = error.response.status\r\n // var getMsgfromStatus = msg[httpstatus]\r\n // if (getMsgfromStatus !== undefined) {\r\n // this.setState({ mymessage: \"\" })\r\n // this.props.userDetailsFailure(getMsgfromStatus)\r\n // }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n // }\r\n })\r\n }\r\n }\r\n };\r\n\r\n\r\n componentWillUnmount() {\r\n this.formDispatch(actions.reset('reportsLayoutManager'))\r\n this.formDispatch(actions.reset('reportsLayoutSizeManager'))\r\n this.props.resetError();\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.props.tableContent.Name} \r\n {this.props.tableContent.Type} \r\n {this.props.tableContent.AddedBy} \r\n {moment(this.props.tableContent.AddedDate).format('L')} \r\n \r\n {\r\n (\r\n \r\n )\r\n }\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.layouts,\r\n validation: state.content.validation\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchLayoutFiles: (formValues) => dispatch(fetchLayoutFiles(formValues)),\r\n fetchSizeFiles: (formValues) => dispatch(fetchSizeFiles(formValues)),\r\n addSizeFiles: (formValues) => dispatch(addSizeFiles(formValues)),\r\n addLayoutFiles: (formValues) => dispatch(addLayoutFiles(formValues)),\r\n deleteLayoutFiles: (formValues) => dispatch(deleteLayoutFiles(formValues)),\r\n deleteSizeFiles: (formValues) => dispatch(deleteSizeFiles(formValues)),\r\n userDetailsLoading: (bool) => dispatch(userDetailsLoading(bool)),\r\n userDetailsSuccess: (bool) => dispatch(userDetailsSuccess(bool)),\r\n userDetailsFailure: (error) => dispatch(userDetailsFailure(error)),\r\n resetError: () => dispatch(resetError())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LayoutManager)\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\nimport moment from 'moment'\r\n// Settings\r\nimport { validators } from 'Constants'\r\n\r\n// Actions\r\nimport {\r\n fetchFiles,\r\n addFile,\r\n deleteFile,\r\n updateFile,\r\n userDetailsSuccess,\r\n userDetailsFailure,\r\n userDetailsLoading,\r\n resetError,\r\n}\r\n from 'actions/userActions'\r\n\r\nclass FileManager extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n userIsEditing: false,\r\n\t\t\teditId: 0,\r\n files: [], mymessage:''\r\n }\r\n\r\n this.loadData = this.loadData.bind(this)\r\n\r\n }\r\n\r\n componentWillMount(){\r\n this.loadData()\r\n }\r\n loadData() {\r\n this.props.fetchFiles()\r\n .then((response) => {\r\n var reportData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n if(obj.Name===\"Default\")\r\n {\r\n continue; \r\n }\r\n else{\r\n reportData.push(obj);\r\n }\r\n }\r\n this.setState({ files: reportData })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n }\r\n\r\n handleRowDel(reportDetails) {\r\n\t\tconst result = window.confirm(this.props.validation.confirmDelete);\r\n\t\tif (result) {\r\n var formValues = { FileName: reportDetails.name, ID: reportDetails.id };\r\n var msg = this.props.content.rowDel[0];\r\n this.setState({mymessage: \"\"})\r\n\t\t\tthis.props.deleteFile(formValues)\r\n\t\t\t\t.then((response) => {\r\n this.props.userDetailsSuccess(response.data.Message)\r\n if (response.status === 200) {\r\n var httpstatus = response.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n this.loadData()\r\n this.setState({mymessage: getMsgfromStatus}) \r\n }\r\n // this.setState({ mymessage: response.data.Message })\r\n // this.formDispatch(actions.reset('activateUser'))\r\n // setTimeout(() => { \r\n // this.loadData()\r\n // this.setState({mymessage: \"\"})\r\n // }, messageDuration)\r\n\t\t\t\t}).catch((error) => {\r\n\t\t\t\t\tif (error.stack.includes('Network Error')) {\r\n this.setState({mymessage: \"\"})\r\n\t\t\t\t\t\tthis.props.userDetailsFailure(this.props.validation.networkError)\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse {\r\n var httpstatus = error.response.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n if (getMsgfromStatus !== undefined) {\r\n this.setState({mymessage: \"\"})\r\n this.props.userDetailsFailure(getMsgfromStatus)\r\n }\r\n else {\r\n this.setState({mymessage: \"\"})\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n\t\t\t\t\t}\r\n\t\t\t\t})\r\n\t\t}\r\n };\r\n \r\n handleReportDetailTable(evt) {\r\n var item = {\r\n name: evt.target.name,\r\n id: evt.target.id,\r\n value: evt.target.value\r\n };\r\n\r\n var old_reportDetails = this.state.old_reportDetails.slice();\r\n if (old_reportDetails.length === 0) {\r\n old_reportDetails = this.state.files.slice();\r\n this.setState({ old_reportDetails: old_reportDetails });\r\n }\r\n let testOfObjects = old_reportDetails;\r\n var newreportDetails = testOfObjects.map(function (testReportDetails) {\r\n for (var key in testReportDetails) {\r\n if (testReportDetails.id === item.id) {\r\n testReportDetails[key] = item.name;\r\n testReportDetails[\"isEditing\"] = false;\r\n break;\r\n }\r\n }\r\n return testReportDetails;\r\n });\r\n\r\n this.setState({ files: newreportDetails });\r\n\r\n };\r\n\r\n handleEditEvent(evt) {\r\n var item = {\r\n name: evt.name,\r\n id: evt.id,\r\n isEditing: evt.isEditing\r\n };\r\n var old_reportDetails = this.state.files.slice();\r\n var newreportDetails = old_reportDetails.map(function (testReportDetails) {\r\n for (var key in testReportDetails) {\r\n if (testReportDetails.Id == item.id) {\r\n testReportDetails.Name = item.name;\r\n testReportDetails.isEditing = !item.isEditing;\r\n\r\n if (evt.UpdatedBy !== undefined) {\r\n testReportDetails.UpdatedBy = evt.UpdatedBy;\r\n testReportDetails.UpdatedOn = evt.UpdatedOn;\r\n }\r\n break;\r\n }\r\n }\r\n return testReportDetails;\r\n });\r\n\r\n this.setState({ files: newreportDetails});\r\n\r\n }\r\n\r\n handleCancelEvent(originalDetails) {\r\n var item = {\r\n id: originalDetails.id,\r\n name: originalDetails.name\r\n };\r\n\r\n var old_reportDetails = this.state.files.slice();\r\n var newreportDetails = old_reportDetails.map(function (testReportDetails) {\r\n for (var key in testReportDetails) {\r\n if (testReportDetails.Id === item.id) {\r\n testReportDetails[key] = item.name;\r\n testReportDetails[\"isEditing\"] = false;\r\n break;\r\n }\r\n }\r\n return testReportDetails;\r\n });\r\n this.setState({ files: newreportDetails});\r\n\r\n };\r\n\r\n handleUpdateEvent(updateDetails) {\r\n if (updateDetails.length > 0 && this.isDuplicate(updateDetails[0].name)) {\r\n var item = {\r\n id: updateDetails[0].id,\r\n name: updateDetails[0].name.trim(),\r\n isEditing: true,\r\n UpdatedBy: localStorage.getItem('loggedinUser'),\r\n UpdatedOn: Date.now\r\n };\r\n this.setState({mymessage: \"\"})\r\n this.props.updateFile(item)\r\n .then((results) => {\r\n this.props.userDetailsSuccess(results.data.Message)\r\n this.setState({mymessage: results.data.Message})\r\n if (results.status === 200) {\r\n item.UpdatedBy = results.data.Result.UpdatedBy;\r\n item.UpdatedOn = results.data.Result.UpdatedOn;\r\n this.handleEditEvent(item)\r\n }\r\n this.setState({userIsEditing: false})\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({mymessage: \"\"})\r\n this.props.userDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.setState({mymessage: \"\"})\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n }\r\n\r\n addFile(formValue) {\r\n this.props.resetError();\r\n var fileDetail = {\r\n name: formValue.NewReport.trim(),\r\n User: localStorage.getItem('loggedinUser')\r\n }\r\n var msg = this.props.content;\r\n var result = fileDetail.name.slice((fileDetail.name.lastIndexOf(\".\") - 1 >>> 0) + 2);\r\n var flag = this.state.files.find(file => file.Name.toLowerCase() == fileDetail.name.toLowerCase()) === undefined\r\n if(result.toLowerCase() === \"pptx\"){\r\n if(!flag){\r\n this.props.userDetailsFailure('This File already exists in the folder!')\r\n }\r\n else{\r\n this.setState({mymessage: \"\"})\r\n this.props.addFile(fileDetail).then((results) => {\r\n if (results.status === 200) {\r\n var httpstatus = results.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n // Reset form\r\n this.formDispatch(actions.reset('activateUser'))\r\n this.loadData()\r\n this.setState({mymessage: getMsgfromStatus}) \r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({mymessage: \"\"})\r\n this.props.userDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else{\r\n this.setState({mymessage: \"\"})\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n \r\n }\r\n else{\r\n this.setState({mymessage: \"\"})\r\n this.props.userDetailsFailure(\"You can only add pptx files!!\")\r\n }\r\n \r\n }\r\n\r\n isDuplicate(vals) {\r\n var result = this.state.files.find(report => report.Name === vals.trim()) === undefined\r\n if (result) {\r\n return result;\r\n }\r\n else {\r\n return result;\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.formDispatch(actions.reset('activateUser'))\r\n this.props.resetError();\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n this.isDuplicate(vals)\r\n }}\r\n type='name' />\r\n field.focus}\r\n messages={{\r\n required: this.props.validation.required,\r\n duplicate: this.props.validation.duplicateFile\r\n }} />\r\n \r\n \r\n {this.props.report.AddedBy}
\r\n {moment(this.props.report.AddedOn).format('L')}\r\n \r\n \r\n {this.props.report.UpdatedBy}
\r\n {moment(this.props.report.UpdatedOn).format('L')} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nclass NonEditableRow extends React.Component {\r\n\r\n onDelEvent() {\r\n this.props.onDelEvent(this.props.cellData);\r\n }\r\n\r\n onEditEvent() {\r\n this.props.onEditEvent(this.props.cellData);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.props.cellData.name}\r\n \r\n \r\n {this.props.report.AddedBy}
\r\n {moment(this.props.report.AddedOn).format('L')}\r\n \r\n \r\n {this.props.report.UpdatedBy}
\r\n {moment(this.props.report.UpdatedOn).format('L')} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.files,\r\n validation: state.content.validation,\r\n reports: state.reports\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchFiles: (formValues) => dispatch(fetchFiles(formValues)),\r\n addFile: (formValues) => dispatch(addFile(formValues)),\r\n deleteFile: (formValues) => dispatch(deleteFile(formValues)),\r\n updateFile: (formValues) => dispatch(updateFile(formValues)),\r\n userDetailsLoading: (bool) => dispatch(userDetailsLoading(bool)),\r\n userDetailsSuccess: (bool) => dispatch(userDetailsSuccess(bool)),\r\n userDetailsFailure: (error) => dispatch(userDetailsFailure(error)),\r\n resetError: () => dispatch(resetError())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(FileManager)\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\n//import moment from 'moment'\r\nimport Select from 'react-select'\r\n// Settings\r\nimport { validators } from 'Constants'\r\nimport { SelectField, Option } from 'react-mdl-extra'\r\n\r\nimport {\r\n fetchReports,\r\n fetchFiles,\r\n fetchSections,\r\n fetchSlides,\r\n addSlide,\r\n deleteSlide,\r\n updateSlide,\r\n validateAll,\r\n userDetailsSuccess,\r\n userDetailsFailure,\r\n userDetailsLoading,\r\n resetError\r\n}\r\n from 'actions/userActions'\r\n\r\nimport { dropdownStyles } from 'react-select-css'\r\n\r\nvar options = [];\r\nvar section_options = [];\r\n\r\n\r\nclass SlideManager extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n reports: [],\r\n fileFilter: [],\r\n sections: [],\r\n slides: [],\r\n fileId: 0,\r\n sectionId: 0,\r\n mymessage: \"\",\r\n selectedOption: '',\r\n sectionOption: '',\r\n isSlideFileSelected: '',\r\n isSlideSectionSelected: ''\r\n }\r\n }\r\n\r\n addSection() { }\r\n\r\n componentWillMount() {\r\n section_options = [];\r\n this.loadFiles();\r\n this.loadSlides();\r\n }\r\n\r\n loadFiles() {\r\n this.props.fetchFiles()\r\n .then((response) => {\r\n var fileData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n fileData.push(obj);\r\n }\r\n this.setState({ fileFilter: fileData })\r\n\r\n var array = [];\r\n this.state.fileFilter.forEach((element) => {\r\n var obj = {};\r\n obj.label = element.Name;\r\n obj.value = element.Id;\r\n array.push(obj);\r\n });\r\n options = array;\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n\r\n }\r\n loadSections() {\r\n\r\n this.props.fetchSections()\r\n .then((response) => {\r\n var sectionData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n if (obj.ParentId == this.state.fileId) {\r\n sectionData.push(obj);\r\n }\r\n\r\n }\r\n this.setState({ sections: sectionData })\r\n var array = [];\r\n this.state.sections.forEach((element) => {\r\n var obj = {};\r\n obj.label = element.SectionName;\r\n obj.value = element.Id;\r\n array.push(obj);\r\n });\r\n section_options = array;\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n\r\n }\r\n\r\n loadSlides() {\r\n this.props.fetchSlides()\r\n .then((response) => {\r\n var slideData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n slideData.push(obj);\r\n }\r\n this.setState({ slides: slideData })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n\r\n }\r\n\r\n changeSections() {\r\n this.props.fetchSlides()\r\n .then((response) => {\r\n var slideData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n if (obj.FileParentId == this.state.fileId) {\r\n slideData.push(obj);\r\n }\r\n }\r\n this.setState({ slides: slideData })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n\r\n }\r\n\r\n changeSlides() {\r\n this.props.fetchSlides()\r\n .then((response) => {\r\n var slideData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n if (obj.FileParentId == this.state.fileId && obj.SectionParentId == this.state.sectionId) {\r\n slideData.push(obj);\r\n }\r\n }\r\n this.setState({ slides: slideData })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n\r\n }\r\n handleChange(value) {\r\n var filter = value.label;\r\n this.state.fileFilter.map((file) => {\r\n if (filter == file.Name) {\r\n this.setState({ fileId: file.Id, selectedOption: filter })\r\n }\r\n })\r\n this.setState({ sectionId: 0 })\r\n this.loadSections();\r\n this.formDispatch(actions.reset('slideManager'))\r\n this.formDispatch(actions.reset('userManager'))\r\n this.changeSections();\r\n }\r\n\r\n handleSectionChange(value) {\r\n var filter = value.label;\r\n this.state.sections.map((secn) => {\r\n if (filter == secn.SectionName) {\r\n this.setState({ sectionId: secn.Id, sectionOption: filter })\r\n // this.loadSections();\r\n }\r\n })\r\n this.changeSlides();\r\n }\r\n\r\n onDDLSlideFileClickEvent = () => {\r\n this.setState({ isSlideFileSelected: 'Selected' });\r\n this.setState({ isSlideSectionSelected: '' });\r\n }\r\n\r\n onDDLSlideFileBlurEvent = () => {\r\n this.setState({ isSlideFileSelected: '' });\r\n this.setState({ isSlideSectionSelected: '' });\r\n }\r\n\r\n onDDLSlideSectionClickEvent = () => {\r\n this.setState({ isSlideSectionSelected: 'Selected' });\r\n }\r\n\r\n onDDLSlideSectionBlurEvent = () => {\r\n this.setState({ isSlideSectionSelected: '' });\r\n }\r\n\r\n addSlide(formValue) {\r\n this.props.resetError();\r\n var slideDetail = {\r\n name: formValue.SlideName,\r\n User: localStorage.getItem('loggedinUser'),\r\n FileParentId: this.state.fileId,\r\n SectionParentId: this.state.sectionId\r\n }\r\n var msg = this.props.content;\r\n // var result = this.state.slides.find(slide => slide.SlideName == slideDetail.name && slide.FileParentId == slideDetail.FileParentId && slide.SectionParentId == slideDetail.SectionParentId) === undefined\r\n // if(!result){\r\n // this.props.userDetailsFailure('This section already exists in the file!')\r\n // }\r\n // else{\r\n if (slideDetail.FileParentId > 0 && slideDetail.SectionParentId > 0) {\r\n if (slideDetail.name !== \"\") {\r\n this.setState({ mymessage: \"\" })\r\n this.props.addSlide(slideDetail).then((results) => {\r\n if (results.status === 200) {\r\n var httpstatus = results.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n // Reset form\r\n this.loadSlides();\r\n this.formDispatch(actions.reset('slideManager'))\r\n this.setState({ mymessage: getMsgfromStatus, selectedOption: \"\", sectionOption: \"\" })\r\n\r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n } else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(\"Slide name must be provided!\")\r\n }\r\n } else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(\"Please select the File & Section from dropdown in which you want to add slide\")\r\n }\r\n }\r\n\r\n handleRowDel(sectionDetails) {\r\n const result = window.confirm(this.props.validation.confirmDelete);\r\n if (result) {\r\n var formValues = { SlideName: sectionDetails.slideName, SectionID: sectionDetails.sectionId };\r\n var msg = this.props.content.rowDel[0];\r\n this.setState({ mymessage: \"\" })\r\n this.props.deleteSlide(formValues)\r\n .then((response) => {\r\n this.props.userDetailsSuccess(response.data.Message)\r\n if (response.status === 200) {\r\n var httpstatus = response.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n this.setState({ mymessage: getMsgfromStatus })\r\n }\r\n this.loadSlides();\r\n this.formDispatch(actions.reset('slideManager'))\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(this.props.validation.networkError)\r\n }\r\n else {\r\n var httpstatus = error.response.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n if (getMsgfromStatus !== undefined) {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(getMsgfromStatus)\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n }\r\n })\r\n }\r\n };\r\n\r\n handleEditEvent(evt) {\r\n var item = {\r\n name: evt.slideName,\r\n id: evt.id,\r\n isEditing: evt.isEditing\r\n };\r\n var old_sectionDetails = this.state.slides.slice();\r\n var newsectionDetails = old_sectionDetails.map(function (testsectionDetails) {\r\n for (var key in testsectionDetails) {\r\n if (testsectionDetails.Id == item.id) {\r\n testsectionDetails.SlideName = item.name;\r\n testsectionDetails.isEditing = !item.isEditing;\r\n\r\n if (evt.UpdatedBy !== undefined) {\r\n testsectionDetails.UpdatedBy = evt.UpdatedBy;\r\n testsectionDetails.UpdatedOn = evt.UpdatedOn;\r\n }\r\n break;\r\n }\r\n }\r\n return testsectionDetails;\r\n });\r\n\r\n this.setState({ slides: newsectionDetails });\r\n\r\n }\r\n\r\n handleCancelEvent(originalDetails) {\r\n var item = {\r\n id: originalDetails.id,\r\n slideName: originalDetails.slideName\r\n };\r\n\r\n var old_sectionDetails = this.state.slides.slice();\r\n var newsectionDetails = old_sectionDetails.map(function (testsectionDetails) {\r\n for (var key in testsectionDetails) {\r\n if (testsectionDetails.Id === item.id) {\r\n testsectionDetails.SlideName = item.slideName;\r\n testsectionDetails[\"isEditing\"] = false;\r\n break;\r\n }\r\n }\r\n return testsectionDetails;\r\n });\r\n this.setState({ slides: newsectionDetails });\r\n\r\n };\r\n\r\n handleSectionsDetailTable(evt) {\r\n var item = {\r\n name: evt.target.name,\r\n id: evt.target.id,\r\n value: evt.target.value\r\n };\r\n\r\n var old_sectionDetails = this.state.old_sectionDetails.slice();\r\n if (old_sectionDetails.length === 0) {\r\n old_sectionDetails = this.state.slides.slice();\r\n this.setState({ old_sectionDetails: old_sectionDetails });\r\n }\r\n let testOfObjects = old_sectionDetails;\r\n var newsectionDetails = testOfObjects.map(function (testdomainDetails) {\r\n for (var key in testdomainDetails) {\r\n if (testdomainDetails.id === item.id) {\r\n testdomainDetails[key] = item.name;\r\n testdomainDetails[\"isEditing\"] = false;\r\n break;\r\n }\r\n }\r\n return testdomainDetails;\r\n });\r\n\r\n this.setState({ slides: newsectionDetails });\r\n\r\n };\r\n\r\n validateAll() {\r\n this.props.validateAll()\r\n .then((results) => {\r\n this.props.userDetailsSuccess(results.data.Message)\r\n this.setState({ mymessage: results.data.Message })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n\r\n handleUpdateEvent(updateDetails) {\r\n if (updateDetails.length > 0) {\r\n var item = {\r\n Id: updateDetails[0].id,\r\n SlideName: updateDetails[0].slideName.trim(),\r\n FileParentId: updateDetails[0].fileId,\r\n SectionParentId: updateDetails[0].sectionId,\r\n isEditing: true,\r\n UpdatedBy: localStorage.getItem('loggedinUser'),\r\n UpdatedOn: Date.now\r\n };\r\n if (item.SlideName != null && item.SlideName != \"\") {\r\n this.setState({ mymessage: \"\" })\r\n this.props.updateSlide(item)\r\n .then((results) => {\r\n this.props.userDetailsSuccess(results.data.Message)\r\n this.setState({ mymessage: results.data.Message })\r\n if (results.status === 200) {\r\n item.UpdatedBy = results.data.Result.UpdatedBy;\r\n item.UpdatedOn = results.data.Result.UpdatedOn;\r\n this.handleEditEvent(item)\r\n }\r\n this.loadSlides();\r\n this.formDispatch(actions.reset('slideManager'))\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(\"Slide Name cannot be blank\")\r\n }\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.formDispatch(actions.reset('slideManager'))\r\n this.props.resetError()\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.props.slide.FileName}
\r\n \r\n \r\n {this.props.slide.SectionName}
\r\n \r\n \r\n \r\n {/* \r\n {this.props.slide.AddedBy}
\r\n {moment(this.props.slide.AddedOn).format('L')}\r\n */}\r\n {/* \r\n {this.props.slide.UpdatedBy}
\r\n {moment(this.props.slide.UpdatedOn).format('L')} \r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nclass NonEditableRow extends React.Component {\r\n\r\n onDelEvent() {\r\n this.props.onDelEvent(this.props.cellData);\r\n }\r\n\r\n onEditEvent() {\r\n this.props.onEditEvent(this.props.cellData);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.props.slide.FileName}\r\n \r\n \r\n {this.props.slide.SectionName}\r\n \r\n \r\n {this.props.cellData.slideName}\r\n \r\n {/* \r\n {this.props.slide.UpdatedBy}
\r\n {moment(this.props.slide.UpdatedOn).format('L')} \r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.slideManager,\r\n validation: state.content.validation\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchReports: (formValues) => dispatch(fetchReports(formValues)),\r\n fetchFiles: (formValues) => dispatch(fetchFiles(formValues)),\r\n fetchSections: (formValues) => dispatch(fetchSections(formValues)),\r\n fetchSlides: (formValues) => dispatch(fetchSlides(formValues)),\r\n addSlide: (formValues) => dispatch(addSlide(formValues)),\r\n deleteSlide: (formValues) => dispatch(deleteSlide(formValues)),\r\n updateSlide: (formValues) => dispatch(updateSlide(formValues)),\r\n userDetailsLoading: (bool) => dispatch(userDetailsLoading(bool)),\r\n userDetailsSuccess: (bool) => dispatch(userDetailsSuccess(bool)),\r\n userDetailsFailure: (error) => dispatch(userDetailsFailure(error)),\r\n resetError: () => dispatch(resetError()),\r\n validateAll: () => dispatch(validateAll())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SlideManager)\r\n","import React from 'react';\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n// UI\r\nimport Button from 'UI/Button'\r\nimport Select from 'react-select'\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\n// Settings\r\nimport { SelectField, Option } from 'react-mdl-extra'\r\nimport { validators } from 'Constants'\r\nimport { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';\r\nimport {\r\n fetchReports,\r\n fetchFiles,\r\n fetchSections,\r\n fetchMappings,\r\n updateSequence,\r\n userDetailsSuccess,\r\n userDetailsFailure,\r\n userDetailsLoading,\r\n resetError\r\n}\r\n from 'actions/userActions'\r\n\r\nimport { dropdownStyles } from 'react-select-css'\r\n\r\n// // fake data generator\r\n// const getItems = count =>\r\n// Array.from({ length: count }, (v, k) => k).map(k => ({\r\n// id: `item-${k}`,\r\n// content: `item ${k}`,\r\n// }));\r\n\r\n\r\n// a little function to help us with reordering the result\r\nconst reorder = (list, startIndex, endIndex) => {\r\n const result = Array.from(list);\r\n const [removed] = result.splice(startIndex, 1);\r\n result.splice(endIndex, 0, removed);\r\n\r\n return result;\r\n};\r\n\r\nconst grid = 4;\r\n\r\nconst getItemStyle = (isDragging, draggableStyle) => ({\r\n // some basic styles to make the items look a bit nicer\r\n userSelect: 'none',\r\n cursor: 'pointer',\r\n padding: grid,\r\n margin: `0 0 ${grid}px 0`,\r\n\r\n // change background colour if dragging\r\n background: isDragging ? 'lightgreen' : 'white',\r\n\r\n // styles we need to apply on draggables\r\n ...draggableStyle,\r\n});\r\n\r\nconst getItemSelectedStyle = (isDragging, draggableStyle) => ({\r\n // some basic styles to make the items look a bit nicer\r\n userSelect: 'none',\r\n cursor: 'pointer',\r\n padding: grid,\r\n margin: `0 0 ${grid}px 0`,\r\n\r\n // change background colour if dragging\r\n background: 'rgb(101, 189, 248)',\r\n\r\n // styles we need to apply on draggables\r\n ...draggableStyle,\r\n});\r\n\r\nconst getListStyle = isDraggingOver => ({\r\n background: isDraggingOver ? 'lightblue' : ' #c7def3',\r\n padding: grid,\r\n width: 250,\r\n});\r\n\r\nvar options = [];\r\n\r\nclass SequenceManager extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n reports: [],\r\n reportId: 0,\r\n reportSelected: false,\r\n items: [],\r\n newItems: [],\r\n sections: [],\r\n switch: false,\r\n mymessage: \"\",\r\n selectedOption: '',\r\n isSequenceReportSelected: ''\r\n };\r\n this.onDragEnd = this.onDragEnd.bind(this);\r\n }\r\n\r\n componentWillMount() {\r\n document.addEventListener('mousedown', this.handleClick, false);\r\n this.loadReports();\r\n this.loadSections();\r\n }\r\n //this function is called to populate the report dropdown\r\n loadReports() {\r\n this.props.fetchReports()\r\n .then((response) => {\r\n var reportData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n if (obj.Name === \"Default\") {\r\n continue;\r\n }\r\n reportData.push(obj);\r\n }\r\n this.setState({ reports: reportData })\r\n var array = [];\r\n this.state.reports.forEach((element) => {\r\n var obj = {};\r\n obj.label = element.Name;\r\n obj.value = element.Id;\r\n array.push(obj);\r\n });\r\n options = array;\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n }\r\n //this function is called to populate sections on sequence manager\r\n loadSections() {\r\n this.props.fetchSections()\r\n .then((response) => {\r\n var sectionData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n sectionData.push(obj);\r\n }\r\n this.setState({ sections: sectionData })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n\r\n }\r\n // this function loads the preexisting sequence of reports from db\r\n loadSequence() {\r\n this.props.fetchMappings()\r\n .then((response) => {\r\n var sectionData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n if (obj.ReportID == this.state.reportId) {\r\n sectionData.push(obj);\r\n }\r\n }\r\n this.setState({ items: sectionData, newItems: sectionData })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n }\r\n\r\n onDragEnd(result) {\r\n // dropped outside the list\r\n if (!result.destination) {\r\n return;\r\n }\r\n\r\n const items = reorder(\r\n this.state.items,\r\n result.source.index,\r\n result.destination.index\r\n );\r\n\r\n this.setState({\r\n items,\r\n });\r\n\r\n this.setState({ newItems: items });\r\n }\r\n //this function is used for highlighting the entries in section table\r\n isSelected(e) {\r\n let sec = [];\r\n this.state.sections.map(section => {\r\n var concat = section.FileName + '->' + section.SectionName;\r\n if (e.target.textContent == concat) {\r\n if (section.isEditing) {\r\n section.isEditing = false;\r\n }\r\n else {\r\n section.isEditing = true;\r\n this.setState({ switch: true })\r\n }\r\n }\r\n sec.push(section)\r\n })\r\n this.setState({ sections: sec })\r\n }\r\n //this function is used for removing highlight from selected entries\r\n deselect() {\r\n this.props.resetError();\r\n this.setState({ mymessage: \"\" });\r\n let secqn = [];\r\n this.state.sections.map(section => {\r\n section.isEditing = false;\r\n secqn.push(section);\r\n })\r\n\r\n let slide = [];\r\n this.state.items.map(item => {\r\n item.highlight = false;\r\n slide.push(item);\r\n })\r\n this.setState({ sections: secqn, items: slide })\r\n }\r\n //this function is used for highlighting the entries in sequence table\r\n selectedSequence(e) {\r\n let sec = [];\r\n this.state.items.map(section => {\r\n if (e.target.textContent == section.SectionName) {\r\n if (section.highlight) {\r\n section.highlight = false;\r\n }\r\n else {\r\n section.highlight = true;\r\n this.setState({ switch: true })\r\n }\r\n }\r\n sec.push(section)\r\n })\r\n this.setState({ items: sec })\r\n }\r\n\r\n handleReportChange(value) {\r\n this.setState({ mymessage: \"\" })\r\n this.state.reports.map(report => {\r\n if (value.label == report.Name) {\r\n this.setState({ reportId: report.Id, reportSelected: true, selectedOption: value.label })\r\n }\r\n })\r\n this.loadSequence();\r\n }\r\n\r\n onDDLSequenceReportClickEvent = () => {\r\n this.setState({ isSequenceReportSelected: 'Selected' });\r\n }\r\n\r\n onDDLSequenceReportBlurEvent = () => {\r\n this.setState({ isSequenceReportSelected: '' });\r\n }\r\n\r\n //this function is only used for adding the selected sections to sequence list\r\n add() {\r\n this.props.resetError();\r\n this.setState({ mymessage: \"\" });\r\n if (this.state.reportId > 0) {\r\n if (this.state.switch) {\r\n this.state.sections.map(secn => {\r\n if (secn.isEditing) {\r\n var result = this.state.items.find(item => secn.SectionName == item.SectionName) === undefined\r\n if (result) {\r\n this.state.newItems.push(secn);\r\n secn.isEditing = false;\r\n }\r\n else {\r\n this.props.userDetailsFailure(\"This section/sections are already present\")\r\n }\r\n\r\n }\r\n // seqn.push(secn);\r\n })\r\n }\r\n this.setState({ items: this.state.newItems })\r\n }\r\n else {\r\n this.props.userDetailsFailure(\"Please Select the report from dropdown\")\r\n }\r\n\r\n }\r\n\r\n //this function is used for removing specific sections from the sequence list\r\n remove() {\r\n this.props.resetError();\r\n this.setState({ mymessage: \"\" });\r\n let seqn = [];\r\n this.state.items.map(item => {\r\n seqn.push(item)\r\n })\r\n if (this.state.switch) {\r\n this.state.items.map(secn => {\r\n if (secn.highlight) {\r\n seqn.splice(seqn.indexOf(secn), 1)\r\n secn.highlight = false;\r\n }\r\n })\r\n }\r\n this.setState({ items: seqn, newItems: seqn })\r\n }\r\n\r\n // submits the sequence provided by user to db\r\n submit() {\r\n this.props.resetError();\r\n if (this.state.reportId > 0) {\r\n var updateSequence = [];\r\n var SlideSequence = 0;\r\n this.state.items.map(slides => {\r\n var reportDetail = {\r\n SectionId: slides.SectionID,\r\n AddedBy: localStorage.getItem('loggedinUser'),\r\n ReportID: this.state.reportId,\r\n SlideSequence: ++SlideSequence\r\n }\r\n updateSequence.push(reportDetail)\r\n })\r\n if (updateSequence.length > 0) {\r\n this.setState({ mymessage: \"\" });\r\n this.props.updateSequence(updateSequence).then((results) => {\r\n this.setState({ mymessage: results.data.Message });\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n else {\r\n this.props.userDetailsFailure(\"Report Sequence cannot be empty\")\r\n }\r\n }\r\n else {\r\n this.props.userDetailsFailure(\"Please Select the report before submitting the sequence\")\r\n }\r\n\r\n }\r\n handleClick = (e) => {\r\n if (this.node.contains(e.target)) {\r\n return;\r\n }\r\n }\r\n componentWillUnmount() {\r\n //reset error message\r\n document.removeEventListener('mousedown', this.handleClick, false);\r\n this.formDispatch(actions.reset('slideManager'))\r\n this.props.resetError();\r\n }\r\n\r\n // Normally you would want to split things out into separate components.\r\n // But in this example everything is just done in one place for simplicity\r\n render() {\r\n return (\r\n \r\n \r\n {this.props.slide.FileName}
\r\n \r\n \r\n {this.props.slide.SectionName}
\r\n \r\n \r\n this.isDuplicate(vals)\r\n }}\r\n type='name' />\r\n \r\n \r\n {this.props.slide.AddedBy}
\r\n {moment(this.props.slide.AddedOn).format('L')}\r\n \r\n {/* \r\n {this.props.slide.UpdatedBy}
\r\n {moment(this.props.slide.UpdatedOn).format('L')} \r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nclass NonEditableRow extends React.Component {\r\n\r\n onEditEvent() {\r\n this.props.onEditEvent(this.props.cellData);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.props.slide.FileName}\r\n \r\n \r\n {this.props.slide.SectionName}\r\n \r\n \r\n {this.props.cellData.description}\r\n \r\n \r\n {this.props.slide.AddedBy}
\r\n {moment(this.props.slide.AddedOn).format('L')}\r\n \r\n {/* \r\n {this.props.slide.UpdatedBy}
\r\n {moment(this.props.slide.UpdatedOn).format('L')} \r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.indexManager,\r\n validation: state.content.validation\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchFiles: (formValues) => dispatch(fetchFiles(formValues)),\r\n fetchSections: (formValues) => dispatch(fetchSections(formValues)),\r\n addDescription: (formValues) => dispatch(addDescription(formValues)),\r\n deleteSection: (formValues) => dispatch(deleteSection(formValues)),\r\n updateDescription: (formValues) => dispatch(updateDescription(formValues)),\r\n userDetailsLoading: (bool) => dispatch(userDetailsLoading(bool)),\r\n userDetailsSuccess: (bool) => dispatch(userDetailsSuccess(bool)),\r\n userDetailsFailure: (error) => dispatch(userDetailsFailure(error)),\r\n resetError: () => dispatch(resetError()),\r\n resetMessage: () => dispatch(resetMessage())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Indexx)","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n Route,\r\n NavLink,\r\n MemoryRouter\r\n} from \"react-router-dom\";\r\nimport SectionManager from \"./SectionManager\";\r\nimport ReportManager from \"./ReportManager\";\r\nimport LayoutManager from \"./LayoutManager\"\r\nimport FileManager from \"./FileManager\";\r\nimport SlideManager from \"./SlideManager\"\r\nimport SequenceManager from \"./SequenceManager\"\r\nimport Indexx from \"./Index\"\r\n\r\n\r\nclass ReportContainer extends React.Component {\r\n \r\n render() {\r\n return (\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n content: state.content.reportManager\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps)(ReportContainer)\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport Button from 'UI/Button'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport moment from 'moment'\r\nimport { SelectField, Option } from 'react-mdl-extra'\r\nimport { BreakLine } from 'utils/Utils'\r\nimport { validators } from 'Constants'\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Select from 'react-select';\r\n\r\n\r\nimport {\r\n getReleaseFeatures,\r\n addReleaseFeature,\r\n deleteReleaseFeature,\r\n updateReleaseFeature,\r\n publishUnpublishReleaseVersion,\r\n getLatestPublishedReleaseFeatures,\r\n getReleaseVersions,\r\n notificationManagerLoading,\r\n notificationManagerSuccess,\r\n notificationManagerFailure,\r\n resetError\r\n} from 'actions/userActions'\r\n\r\nimport { dropdownStyles } from 'react-select-css'\r\n\r\nvar options = [];\r\n\r\nclass NotificationManager extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n releaseData: [],\r\n isPublish: false,\r\n releaseIsEditing: false,\r\n editId: 0,\r\n textData: '',\r\n responseMsg: '',\r\n currentPublishVersion: '',\r\n dbreleaseVersion: [],\r\n optionData: [],\r\n selectedOption: '',\r\n tempFloating: '',\r\n isReleaseVersionSelected: ''\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n this.loadData();\r\n this.loadReleaseVersion = this.loadReleaseVersion.bind(this);\r\n this.loadReleaseVersion();\r\n this.OnPublishEvent = this.OnPublishEvent.bind(this);\r\n }\r\n\r\n\r\n\r\n componentWillMount() {\r\n this.loadReleaseVersion();\r\n this.loadData();\r\n }\r\n\r\n loadReleaseVersion() {\r\n this.props.getReleaseVersions()\r\n .then((response) => {\r\n var versionData = [];\r\n this.props.notificationManagerSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n versionData.push(obj);\r\n }\r\n this.setState({ dbreleaseVersion: versionData })\r\n\r\n var array = [];\r\n versionData.forEach((element) => {\r\n var obj = {};\r\n obj.label = element.VersionName;\r\n obj.value = element.ID;\r\n // obj.className= \"option-style\"\r\n array.push(obj);\r\n });\r\n options = array;\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.notificationManagerFailure()\r\n }\r\n })\r\n }\r\n\r\n loadData() {\r\n this.props.getReleaseFeatures()\r\n .then((response) => {\r\n var notificationData = [];\r\n this.props.notificationManagerSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n notificationData.push(obj);\r\n }\r\n this.setState({ releaseData: notificationData });\r\n this.getLatestPublish();\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.notificationManagerFailure()\r\n }\r\n else {\r\n this.props.notificationManagerFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n\r\n getLatestPublish(versionName) {\r\n this.props.getLatestPublishedReleaseFeatures()\r\n .then((response) => {\r\n this.props.notificationManagerSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n this.setState({ currentPublishVersion: obj.ReleaseVersionName })\r\n\r\n if (obj.ReleaseVersionName == versionName) {\r\n this.setState({ isPublish: true })\r\n } else {\r\n this.setState({ isPublish: false })\r\n }\r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.notificationManagerFailure(error)\r\n }\r\n else {\r\n // this.props.notificationManagerFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n\r\n addReleaseFeatureHandler(formValues) {\r\n this.props.resetError();\r\n this.setState({ responseMsg: \"\" })\r\n this.props.user.error = \"\";\r\n var formData = { ReleaseVersionID: 0, ReleaseFeatureID: 0, ReleaseVersionName: formValues.ReleaseVersionName, ReleaseFeatureName: formValues.ReleaseFeatureName, ReleaseFeatureDescription: formValues.ReleaseFeatureDescription, AddedBy: localStorage.getItem('loggedinUser'), UpdatedBy: localStorage.getItem('loggedinUser') };\r\n\r\n if (formValues.ReleaseVersionName != null && formValues.ReleaseFeatureName != null) {\r\n this.props.addReleaseFeature(formData)\r\n .then((response) => {\r\n this.props.notificationManagerSuccess(response.data.Message)\r\n this.setState({ responseMsg: response.data.Message })\r\n this.state.releaseData.push(response.data.Result);\r\n this.setState(this.state.releaseData);\r\n this.setState({ responseMsg: response.data.Message })\r\n this.formDispatch(actions.reset('notificationManager'))\r\n this.loadData();\r\n this.loadReleaseVersion();\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.notificationManagerFailure(this.props.validation.networkError)\r\n }\r\n else {\r\n this.props.notificationManagerFailure(error.response.data.Message)\r\n this.setState({ responseMsg: \"\" })\r\n }\r\n })\r\n }\r\n else {\r\n this.props.notificationManagerFailure(formValues.ReleaseFeatureName + \" \" + this.props.validation.duplicateFeatureName + \" \" + formValues.ReleaseVersionName + \".\")\r\n }\r\n }\r\n\r\n OnPublishEvent() {\r\n this.props.resetError();\r\n this.setState({ responseMsg: \"\" })\r\n this.props.user.error = \"\";\r\n var releaseVersion = this.state.textData.slice();\r\n if (releaseVersion != null && releaseVersion != \"\") {\r\n const result = this.state.isPublish == true ? window.confirm(this.props.validation.confirmUnpublish) : window.confirm(this.props.validation.confirmPublish);\r\n if (result) {\r\n var formValues1 = { ReleaseVersionName: releaseVersion, UpdatedBy: localStorage.getItem('loggedinUser'), VersionPublishedBy: localStorage.getItem('loggedinUser'), VersionUnpublishedBy: localStorage.getItem('loggedinUser') };\r\n this.props.publishUnpublishReleaseVersion(formValues1)\r\n .then((response) => {\r\n this.props.notificationManagerSuccess(response.data.Message)\r\n this.setState({ responseMsg: response.data.Message })\r\n this.formDispatch(actions.reset('notificationManager'))\r\n this.loadData();\r\n this.setState({ currentPublishVersion: \"\" })\r\n this.getLatestPublish();\r\n formValues1 = \"\";\r\n this.setState({ textData: \"\" })\r\n this.setState({ isPublish: false });\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.notificationManagerFailure(this.props.validation.networkError)\r\n }\r\n else {\r\n this.props.notificationManagerFailure(error.response.data.Message)\r\n this.setState({ responseMsg: \"\" })\r\n }\r\n })\r\n }\r\n }\r\n else {\r\n this.props.notificationManagerFailure(this.props.validation.requiredVersion)\r\n this.setState({ responseMsg: \"\" })\r\n }\r\n };\r\n\r\n rowDeleteHandler(releaseDetails) {\r\n const result = window.confirm(this.props.validation.confirmDelete);\r\n this.setState({ responseMsg: \"\" })\r\n this.props.user.error = \"\";\r\n if (result) {\r\n var formValues = { ReleaseVersionID: releaseDetails.vid, ReleaseFeatureID: releaseDetails.id, UpdatedBy: localStorage.getItem('loggedinUser') };\r\n this.props.deleteReleaseFeature(formValues)\r\n .then((response) => {\r\n this.props.notificationManagerSuccess(response.data.Message)\r\n\r\n var index = this.state.releaseData.indexOf(releaseDetails);\r\n this.state.releaseData.splice(index, 1);\r\n this.setState(this.state.releaseData);\r\n this.setState({ responseMsg: response.data.Message })\r\n this.loadData();\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.notificationManagerFailure(this.props.validation.networkError)\r\n }\r\n else {\r\n this.props.notificationManagerFailure(error.response.data.Message)\r\n this.setState({ responseMsg: \"\" })\r\n }\r\n })\r\n }\r\n };\r\n\r\n\r\n rowEditHandler(evt) {\r\n this.setState({ responseMsg: \"\" })\r\n this.props.user.error = \"\";\r\n var item = {\r\n name: evt.name,\r\n desc: evt.desc,\r\n id: evt.id,\r\n IsEdit: evt.IsEdit\r\n };\r\n var old_relFeatureDetails = this.state.releaseData.slice();\r\n var newrelFeatureDetails = old_relFeatureDetails.map(function (testRelFeatureDetails) {\r\n for (var key in testRelFeatureDetails) {\r\n if (testRelFeatureDetails.ReleaseFeatureID == item.id) {\r\n testRelFeatureDetails.FeatureName = item.name;\r\n testRelFeatureDetails.IsEdit = !item.IsEdit;\r\n\r\n if (evt.UpdatedBy !== undefined) {\r\n testRelFeatureDetails.UpdatedBy = evt.UpdatedBy;\r\n testRelFeatureDetails.UpdatedOn = evt.UpdatedOn;\r\n }\r\n break;\r\n }\r\n }\r\n return testRelFeatureDetails;\r\n });\r\n\r\n this.setState({ releaseData: newrelFeatureDetails });\r\n }\r\n\r\n handleUpdateEvent(updateDetails) {\r\n this.setState({ responseMsg: \"\" })\r\n this.props.user.error = \"\";\r\n if (updateDetails.length > 0 && (this.isDescDuplicate(updateDetails[0].desc) || this.isDuplicate(updateDetails[0].name))) {\r\n var item = {\r\n\r\n name: updateDetails[0].name,\r\n desc: updateDetails[0].desc,\r\n id: updateDetails[0].id,\r\n vid: updateDetails[0].vid,\r\n IsEdit: true,\r\n UpdatedBy: localStorage.getItem('loggedinUser'),\r\n UpdatedOn: Date.now\r\n };\r\n\r\n this.props.updateReleaseFeature(item)\r\n .then((response) => {\r\n this.props.notificationManagerSuccess(response.data.Message)\r\n this.setState({ mymessage: response.data.Message })\r\n if (response.status === 200) {\r\n item.UpdatedBy = response.data.Result.UpdatedBy;\r\n item.UpdatedOn = response.data.Result.UpdatedOn;\r\n this.rowEditHandler(item)\r\n }\r\n this.setState({ releaseIsEditing: false });\r\n this.setState({ responseMsg: response.data.Message })\r\n this.loadData();\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.notificationManagerFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.props.notificationManagerFailure(error.response.data.Message)\r\n this.setState({ responseMsg: \"\" })\r\n }\r\n })\r\n }\r\n }\r\n\r\n\r\n handleCancelEvent(originalDetails) {\r\n this.setState({ responseMsg: \"\" })\r\n this.props.user.error = \"\";\r\n var item = {\r\n id: originalDetails[0].id,\r\n name: originalDetails[0].name,\r\n desc: originalDetails[0].desc\r\n };\r\n\r\n var old_relFeatureDetails = this.state.releaseData.slice();\r\n var newrelFeaturetDetails = old_relFeatureDetails.map(function (testRelFeatureDetails) {\r\n for (var key in testRelFeatureDetails) {\r\n if (testRelFeatureDetails.ReleaseFeatureID === item.id) {\r\n testRelFeatureDetails[\"id\"] = item.id;\r\n testRelFeatureDetails[\"desc\"] = item.desc;\r\n testRelFeatureDetails[\"IsEdit\"] = false;\r\n break;\r\n }\r\n }\r\n return testRelFeatureDetails;\r\n });\r\n this.setState({ releaseData: newrelFeaturetDetails });\r\n };\r\n\r\n componentWillUnmount() {\r\n this.formDispatch(actions.reset('notificationManager'))\r\n this.props.resetError()\r\n }\r\n\r\n componentDidUpdate() {\r\n this.formDispatch(actions.change('notificationManager.ReleaseVersionName', this.state.selectedOption));\r\n }\r\n\r\n isDuplicate(vals) {\r\n var result = this.state.releaseData.find(data => data.ReleaseFeatureName === vals.trim()) === undefined\r\n if (result) {\r\n return result;\r\n }\r\n else {\r\n return result;\r\n }\r\n }\r\n\r\n isDescDuplicate(vals) {\r\n var result = this.state.releaseData.find(data => data.ReleaseFeatureDescription === vals.trim()) === undefined\r\n if (result) {\r\n return result;\r\n }\r\n else {\r\n return result;\r\n }\r\n }\r\n\r\n onTextChangeEvent(event) {\r\n this.formDispatch(actions.setErrors('notificationManager.ReleaseVersionName', true))\r\n this.setState({ textData: event.target.value });\r\n this.getLatestPublish(event.target.value);\r\n this.setState({ selectedOption: event.target.value });\r\n this.setState({ responseMsg: \"\" });\r\n\r\n var objSelectedOption = options.filter(option => option.label === event.target.value);\r\n if (objSelectedOption.length > 0) {\r\n this.setState({ isReleaseVersionSelected: \"Selected\" });\r\n }\r\n else {\r\n this.setState({ isReleaseVersionSelected: \"\" });\r\n }\r\n }\r\n\r\n onDDLChangeEvent(value) {\r\n this.setState({ textData: value.label });\r\n this.getLatestPublish(value.label);\r\n this.setState({ selectedOption: value.label });\r\n this.setState({ responseMsg: \"\" })\r\n this.setState({ tempFloating: value.label });\r\n this.setState({ isReleaseVersionSelected: \"\" });\r\n //this.setState({ tempFloating: document.getElementById(\"notificationManager.ReleaseVersionNameDDL\").text });\r\n //this.formDispatch(actions.reset('notificationManager.ReleaseVersionName'))\r\n this.formDispatch(actions.setErrors('notificationManager.ReleaseVersionName', false))\r\n }\r\n\r\n onDDLClickEvent = () => {\r\n this.setState({ isReleaseVersionSelected: 'Selected' });\r\n }\r\n\r\n onDDLBlurEvent = () => {\r\n this.setState({ isReleaseVersionSelected: '' });\r\n }\r\n\r\n handleReportDetailTable(evt) {\r\n var item = {\r\n name: evt.target.name,\r\n id: evt.target.id,\r\n value: evt.target.value\r\n };\r\n\r\n var old_reportDetails = this.state.old_reportDetails.slice();\r\n if (old_reportDetails.length === 0) {\r\n old_reportDetails = this.state.releaseData.slice();\r\n this.setState({ old_reportDetails: old_reportDetails });\r\n }\r\n let testOfObjects = old_reportDetails;\r\n var newreportDetails = testOfObjects.map(function (testReportDetails) {\r\n for (var key in testReportDetails) {\r\n if (testReportDetails.id === item.id) {\r\n testReportDetails[key] = item.name;\r\n testReportDetails[\"IsEdit\"] = false;\r\n break;\r\n }\r\n }\r\n return testReportDetails;\r\n });\r\n\r\n this.setState({ releaseData: newreportDetails });\r\n\r\n };\r\n\r\n\r\n\r\n render() {\r\n return (\r\n \r\n {this.props.data.ReleaseVersionName} \r\n \r\n this.isDuplicate(vals)\r\n }}\r\n type='name' />\r\n field.focus}\r\n messages={{\r\n required: this.props.validation.required,\r\n duplicate: this.props.validation.duplicateFeaturename\r\n }} />\r\n \r\n\r\n \r\n this.isDescDuplicate(vals)\r\n }}\r\n type='desc' />\r\n field.focus}\r\n messages={{\r\n required: this.props.validation.required,\r\n duplicate: this.props.validation.duplicateFeatureDescription\r\n }} />\r\n \r\n\r\n \r\n {this.props.data.AddedBy}
\r\n {moment(this.props.data.AddedDate).format('L')}\r\n \r\n \r\n {this.props.data.UpdatedBy}
\r\n {moment(this.props.data.UpdatedDate).format('L')} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\n\r\nclass NonEditableRow extends React.Component {\r\n\r\n onDelEvent() {\r\n this.props.onDelEvent(this.props.cellData);\r\n }\r\n\r\n onEditEvent() {\r\n this.props.onEditEvent(this.props.cellData);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.props.data.ReleaseVersionName} \r\n \r\n {this.props.cellData.name}\r\n \r\n {this.props.data.FeatureDescription}\r\n {this.props.cellData.desc}\r\n \r\n \r\n {this.props.data.AddedBy}
\r\n {moment(this.props.data.AddedDate).format('L')}\r\n \r\n \r\n {this.props.data.UpdatedBy}
\r\n {moment(this.props.data.UpdatedDate).format('L')} \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n validation: state.content.validation,\r\n releaseData: state.releaseData,\r\n user: state.default,\r\n content : state.content.menu.adminMenuItems[0].notificationManager\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n notificationManagerLoading: (bool) => dispatch(notificationManagerLoading(bool)),\r\n notificationManagerSuccess: (bool) => dispatch(notificationManagerSuccess(bool)),\r\n notificationManagerFailure: (error) => dispatch(notificationManagerFailure(error)),\r\n getReleaseFeatures: (formValues) => dispatch(getReleaseFeatures(formValues)),\r\n addReleaseFeature: (formValues) => dispatch(addReleaseFeature(formValues)),\r\n deleteReleaseFeature: (formValues) => dispatch(deleteReleaseFeature(formValues)),\r\n updateReleaseFeature: (formValues) => dispatch(updateReleaseFeature(formValues)),\r\n publishUnpublishReleaseVersion: (formValues) => dispatch(publishUnpublishReleaseVersion(formValues)),\r\n getLatestPublishedReleaseFeatures: (formValues) => dispatch(getLatestPublishedReleaseFeatures(formValues)),\r\n getReleaseVersions: (formValues) => dispatch(getReleaseVersions(formValues)),\r\n resetError: () => dispatch(resetError())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(NotificationManager)\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport Button from 'UI/Button'\r\nimport {\r\n reportBug,\r\n reportBugLoading,\r\n reportBugSuccess,\r\n reportBugFailure\r\n} from 'actions/userActions'\r\n\r\nclass ReportBugContainer extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n selectedFile: null,\r\n addReportDataMsg: '',\r\n successMsg: '',\r\n errorMsg: '',\r\n bugDescription: ''\r\n }\r\n this.validateForReportData = this.validateForReportData.bind(this)\r\n this.handleRemoveSelectedFile = this.handleRemoveSelectedFile.bind(this)\r\n this.fileTypeValidation = this.fileTypeValidation.bind(this)\r\n }\r\n\r\n fileTypeValidation(filePath) {\r\n let allowedExtensions = /(\\.jpeg|\\.png|\\.mp4|\\.docx)$/i\r\n if (!allowedExtensions.exec(filePath)) {\r\n return false;\r\n } else return true\r\n }\r\n\r\n handleFileAttachment(e) {\r\n if (e.target.files.length > 0) {\r\n let file = e.target.files[0]\r\n var filePath = e.target.value;\r\n if (this.fileTypeValidation(filePath)) {\r\n let fileSize = file.size / 1024 / 1024; // in MB\r\n if (fileSize < 20) { //Max size to be uploaded\r\n this.setState({ selectedFile: file })\r\n //File upload \r\n let reader = new FileReader()\r\n reader.readAsDataURL(file)\r\n reader.onload = (e) => {\r\n var base64result = e.target.result.split(',')[1];\r\n this.setState({ addReportDataMsg: '', fileData: base64result, successMsg: this.props.content.fileUploadSuccessMsg, errorMsg: '' })\r\n }\r\n }\r\n else {\r\n this.setState({ errorMsg: this.props.content.fileSizeErrorMsg, successMsg: '' })\r\n }\r\n } else {\r\n this.setState({ errorMsg: this.props.content.fileTypeErrorMsg, successMsg: '' })\r\n }\r\n }\r\n }\r\n\r\n handleRemoveSelectedFile() {\r\n this.setState({ selectedFile: null, fileData: undefined, successMsg: '', errorMsg: '' })\r\n }\r\n\r\n onChange(e) {\r\n var descri = e.target.value\r\n this.setState({ bugDescription: e.target.value })\r\n descri.length > 0 && this.setState({ addReportDataMsg: '' })\r\n }\r\n\r\n // validates that user should either add description or attach file\r\n validateForReportData() {\r\n if (this.state.bugDescription === '' && this.state.fileData === undefined) {\r\n this.setState({ addReportDataMsg: this.props.content.reportDataMsg })\r\n return false\r\n } else\r\n return true\r\n }\r\n\r\n handleSubmit() {\r\n if (this.validateForReportData()) {\r\n const data = {\r\n bugDescription: this.state.bugDescription.replace(/\\r\\n|\\r|\\n/g, '
'),\r\n fileDetails: {\r\n fileData: this.state.fileData !== undefined ? this.state.fileData : '',\r\n fileName: this.state.selectedFile !== null ? this.state.selectedFile.name : ''\r\n },\r\n createdBy: this.props.user.user.Id,\r\n language: this.props.language.toUpperCase(),\r\n userEmail: localStorage.getItem('loggedinUser') //email\r\n }\r\n var content = this.props.content;\r\n this.props.reportBug(data)\r\n .then((result) => {\r\n setTimeout(() => {\r\n if (result.status === 200) {\r\n this.props.reportBugSuccess(content[result.status])\r\n this.props.hideModal('reportBug')\r\n this.props.setReportBugAlertVisibility(content[result.status])\r\n }\r\n else {\r\n var failMsg = this.props.content.error\r\n if (failMsg !== undefined) {\r\n this.props.reportBugFailure(failMsg)\r\n }\r\n this.props.hideModal('reportBug')\r\n this.props.setReportBugAlertVisibility(failMsg)\r\n }\r\n }, 500)\r\n\r\n }).catch((error) => {\r\n this.props.reportBugFailure(content[error.response.status])\r\n })\r\n }\r\n }\r\n render() {\r\n return (\r\n\r\n\t\t\t\t{this.props.role.RoleName} \r\n\r\n\t\t\t\t\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tObject.values(this.props.role.ApplicationFeatures).map((appFeature, index) => {\r\n\t\t\t\t\t\t\tif (index === (this.props.role.ApplicationFeatures.length - 1)) {\r\n\t\t\t\t\t\t\t\treturn appFeature.FeatureName\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\telse { return appFeature.FeatureName + \", \" }\r\n\t\t\t\t\t\t})\r\n\t\t\t\t\t}\r\n\t\t\t\t \r\n\r\n\r\n\t\t\t\t{this.props.role.UpdatedBy} \r\n\t\t\t\t{moment(this.props.role.UpdatedOn).format('L')} \r\n\t\t\t\t\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t!this.props.role.IsDefault && this.props.role.RoleName.toLowerCase() != \"admin\" ?\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t: null\r\n\t\t\t\t\t}\r\n\t\t\t\t \r\n\t\t\t\t{\r\n\r\n\t\t\t\t\tthis.props.roleIsEditing && this.props.editId === this.props.role.RoleId ?\r\n\t\t\t\t\t\t(\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t\t:\r\n\t\t\t\t\t\t(\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t)\r\n\t\t\t\t}\r\n\t\t\t \r\n\t\t);\r\n\t}\r\n}\r\n\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tui: state.content.ui,\r\n\t\tuser: state.default,\r\n\t\tcontent: state.content.roleManager,\r\n\t\tvalidation: state.content.validation,\r\n\t\troleManager: state.userManagerUpdates\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\troleManagerSuccess: (bool) => dispatch(roleManagerSuccess(bool)),\r\n\t\troleManagerFailure: (error) => dispatch(roleManagerFailure(error)),\r\n\t\tresetError: () => dispatch(resetError()),\r\n\t\tgetAllFeatures: () => dispatch(getAllFeatures()),\r\n\t\tfetchRoleFeatures: (formValues) => dispatch(fetchRoleFeatures(formValues)),\r\n\t\taddUpdateRoleAndFeatures: (formValues) => dispatch(addUpdateRoleAndFeatures(formValues)),\r\n\t\tdeleteRoleAndFeatures: (formValues) => dispatch(deleteRoleAndFeatures(formValues))\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(RoleManager)","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux'\r\nimport { validators } from 'Constants';\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\nimport moment from 'moment'\r\n\r\n\r\nimport {\r\n\tcapIqUserManagerLoading,\r\n\tcapIqUserManagerSuccess,\r\n\tcapIqUserManagerFailure,\t\r\n\tresetError,\r\n\tgetAllCapIqUsers,\r\n\taddCapIqUser,\r\n\tdeleteCapIqUser\r\n} from 'actions/roleAndPermissionAction';\r\n\r\nclass CapIQLicensedUser extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t\tthis.state = {\t\r\n\t\t\tcapIqUsersData : []\t,\r\n\t\t\tfilterText: \"\",\r\n\t\t\tresponseMsg: \"\"\r\n\t\t}\t\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tthis.props.resetError()\r\n\t\tthis.loadData();\r\n\t}\r\n\r\n\tcomponentWillUnmount() {\r\n\t\tthis.formDispatch(actions.reset('capIqUserManager'))\r\n\t\tthis.props.resetError()\r\n\t}\r\n\r\n\r\n\tloadData() {\r\n\t\tthis.props.getAllCapIqUsers().then((response) => {\r\n\t\t\tthis.props.capIqUserManagerSuccess(response.data.Message)\r\n\t\t\tthis.setState({ capIqUsersData: response.data.Result });\r\n\t\t})\t\t\r\n\t}\r\n\r\n\thandleUserInput(filterText) {\r\n\t\tthis.setState({ filterText: filterText.target.value.toLowerCase() });\r\n\t };\r\n\r\n\thandleAddCapIqUser(formValues) {\r\n\r\n\t\tthis.props.resetError()\r\n\t\tvar formData = { Email_Id: formValues.Email, AddedBy: this.props.user.user.Id };\r\n\r\n\t\tthis.props.addCapIqUser(formData)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tthis.loadData()\r\n\t\t\t\tthis.props.capIqUserManagerSuccess(response.data.Message)\r\n\t\t\t\tthis.setState({responseMsg : this.props.content.addSuccess})\r\n\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\tthis.props.capIqUserManagerFailure(this.props.validation.networkError)\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.props.capIqUserManagerFailure(error.response.data.Message)\r\n\t\t\t\t}\r\n\t\t\t})\r\n\r\n\t}\t\r\n\r\n\thandleRowDel(userDetails) {\r\n\t\t\r\n\t\tconst result = window.confirm(this.props.validation.confirmDelete);\r\n\t\tif (result) {\r\n\t\t\tvar formValues = { Email_Id: userDetails.Email_Id, UpdatedBy: this.props.user.user.Id };\r\n\t\t\tthis.props.deleteCapIqUser(formValues)\r\n\t\t\t\t.then((response) => {\t\t\t\t\t\r\n\t\t\t\t\tthis.setState({ responseMsg: this.props.content.deleteSuccess })\r\n\t\t\t\t\tthis.props.capIqUserManagerSuccess(response.data.Message)\r\n\t\t\t\t\tvar index = this.state.capIqUsersData.indexOf(userDetails);\r\n\t\t\t\t\tthis.state.capIqUsersData.splice(index, 1);\r\n\t\t\t\t\tthis.setState(this.state.capIqUsersData);\t\t\t\t\t\r\n\t\t\t\t}).catch((error) => {\r\n\t\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\t\tthis.props.capIqUserManagerFailure(this.props.validation.networkError)\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse {\r\n\t\t\t\t\t\tthis.props.capIqUserManagerFailure(error.response.data.Message)\r\n\t\t\t\t\t}\r\n\t\t\t\t})\r\n\t\t}\r\n\t};\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t{this.props.data.Email_Id} \t\t\t\r\n\t\t\t\t{this.props.data.AddedBy} \r\n\t\t\t\t{moment(this.props.data.AddedDate).format('L')} \r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t \t\t\t\t\r\n\t\t\t \r\n\t\t);\r\n\t}\r\n}\r\n\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tui: state.content.ui,\r\n\t\tuser: state.default,\r\n\t\tcontent: state.content.capIQUserManager,\r\n\t\tvalidation: state.content.validation,\r\n\t\troleManager: state.userManagerUpdates\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tcapIqUserManagerLoading: (bool) => dispatch(capIqUserManagerLoading(bool)),\r\n\t\tcapIqUserManagerSuccess: (bool) => dispatch(capIqUserManagerSuccess(bool)),\r\n\t\tcapIqUserManagerFailure: (error) => dispatch(capIqUserManagerFailure(error)),\r\n\t\tresetError: () => dispatch(resetError()),\t\t\r\n\t\tgetAllCapIqUsers: () => dispatch(getAllCapIqUsers()),\r\n\t\taddCapIqUser: (formValues) => dispatch(addCapIqUser(formValues)),\r\n\t\tdeleteCapIqUser: (formValues) => dispatch(deleteCapIqUser(formValues))\r\n\t}\r\n}\r\n\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps) (CapIQLicensedUser)\r\n","import React from 'react'\r\nimport FaAngleRight from 'react-icons/lib/fa/angle-right'\r\nimport FaAngleLeft from 'react-icons/lib/fa/angle-left'\r\nimport MdClear from 'react-icons/lib/md/clear'\r\nimport classnames from 'classnames'\r\n\r\nconst ButtonContent = (props) => {\r\n\t\r\n\treturn (\r\n\t\t props.onClick(e)}\r\n\t\tdisabled={props.disabled}\r\n\t\tid={props.id}\r\n\t\tvalue={props.id}\r\n\t\tclassName={'button popupButton ' + (props.float ? 'float-right ' : '') + (props.color ? 'button--accent ' : '')}>\r\n\t\t\r\n\t\r\n\r\nexport default PopupButton\r\n\r\nPopupButton.defaultProps = {\r\n\ttype: 'button',\r\n\tonClick: () => {},\r\n\tdisabled: false,\r\n\ticon: 'right-arrow',\r\n\ticonPosition: 'right',\r\n\tfloat: false,\r\n\tid: '',\r\n\tshowLoader: true\r\n}\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport ReactDOM from \"react-dom\";\r\nimport ReactPaginate from 'react-paginate';\r\nimport { path, routes } from 'Constants'\r\nimport { ExportToCsv } from 'utils/ExportToCsv';\r\nimport { getNonEmptyValue, binarySearchIndex, formatThousands } from 'utils/Utils'\r\nimport classNames from \"classnames\";\r\nimport cloneDeep from 'lodash/cloneDeep';\r\n\r\n// Settings\r\nimport Select from 'react-select'\r\nimport ReactDataGrid from 'react-data-grid';\r\nimport { Toolbar, Data, Filters, Editors, Menu } from \"react-data-grid-addons\";\r\nimport { CSVLink, CSVDownload } from \"react-csv\";\r\nimport { MultiSelect } from 'primereact/multiselect';\r\nimport { PickList } from 'primereact/picklist';\r\nimport Button from 'UI/Button';\r\nimport Popup from \"reactjs-popup\";\r\nimport TextfilterRenderer from 'UI/TextFilterRenderer';\r\nimport NumericFilterRenderer from 'UI/NumericFilterRenderer';\r\nimport * as XLSX from \"xlsx\";\r\nimport * as FileSaver from \"file-saver\";\r\nimport { Workbook } from 'exceljs/dist/exceljs';\r\nimport {\r\n columnFieldModalStyle,\r\n suggestedValueContentStyle,\r\n backdropStyle, detailedFileFields\r\n} from 'Constants';\r\nimport ColumnFields from '../Spend/ColumnFields';\r\nimport Modal from 'reboron/OutlineModal';\r\n\r\nconst { ContextMenu, MenuItem, SubMenu, ContextMenuTrigger } = Menu;\r\n\r\nconst selectors = Data.Selectors;\r\nconst {\r\n NumericFilter,\r\n AutoCompleteFilter,\r\n MultiSelectFilter,\r\n SingleSelectFilter\r\n} = Filters;\r\n\r\nclass CustomGridSCC extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isLoading: true,\r\n isError: 'No',\r\n responseMsg: '',\r\n RequestIds: [],\r\n selectedScopes: '',\r\n fileDetails: [],\r\n scopes: [],\r\n pageCount: 1,\r\n filters: {},\r\n perPage: 500,\r\n paginatedRowFrom: 0,\r\n paginatedRowTo: 500,\r\n data: [],\r\n columnDefs: [],\r\n rowData: [],\r\n filteredRows: [],\r\n columns: [],\r\n excelColumns: [],\r\n pageCountOption: [{ label: '100', value: 100 }, { label: '250', value: 250 }, { label: '500', value: 500 }, { label: '1,000', value: 1000 }],\r\n selectedPageCount: 50,\r\n filteredRows: [],\r\n cellUpdateCss: 'bisque',\r\n open: false,\r\n //slectedIndustryDetails: [],\r\n industryOverrideRowNo: -1,\r\n pendingRecords: [],\r\n warningRecords: [],\r\n errorRecords: [],\r\n exclusionReason_directSpendUpdates: [],\r\n warningDiv: true,\r\n errorDiv: true,\r\n csvRows: [],\r\n isFilterVisible: false,\r\n cleanIndustryOverrides: {},\r\n isSaveInProgress: false,\r\n actualScroll: false,\r\n dummyScroll: false,\r\n exportFlag: false,\r\n sccSaveFlag: true,\r\n filteredSummationArray: {},\r\n }\r\n this.handlePageClick = this.handlePageClick.bind(this)\r\n this.getValidFilterValues = this.getValidFilterValues.bind(this)\r\n this.handleFilterChange = this.handleFilterChange.bind(this)\r\n this.handlePageCountChange = this.handlePageCountChange.bind(this)\r\n //this.searchRowIndex = this.searchRowIndex.bind(this)\r\n this.findRowIndex = this.findRowIndex.bind(this)\r\n this.filterValidationRecords = this.filterValidationRecords.bind(this)\r\n this.warningToggle = this.warningToggle.bind(this)\r\n this.errorToggle = this.errorToggle.bind(this)\r\n this.isCellEditable = this.isCellEditable.bind(this)\r\n this.onSave = this.onSave.bind(this)\r\n this.isDisabled = this.isDisabled.bind(this)\r\n this.filterChange = this.filterChange.bind(this)\r\n this.setColumnWidth = this.setColumnWidth.bind(this)\r\n this.setHeaderHelpText = this.setHeaderHelpText.bind(this)\r\n this.columnResize = this.columnResize.bind(this)\r\n this.exportCsv = this.exportCsv.bind(this)\r\n this.uploadButtonClick = this.uploadButtonClick.bind(this)\r\n this.onGridRowsUpdated = this.onGridRowsUpdated.bind(this)\r\n this.removeFilter = this.removeFilter.bind(this)\r\n this.expandFilter = this.expandFilter.bind(this)\r\n this.actions = this.getApplicationFeatureActions()\r\n this.closeColumnFieldPopup = this.closeColumnFieldPopup.bind(this);\r\n }\r\n\r\n showModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n this.refs[action].hide()\r\n }\r\n\r\n closeColumnFieldPopup() {\r\n // this.setState({ columns: cloneDeep(this.originalColumns) });\r\n this.hideModal('ColumnFields');\r\n }\r\n\r\n setColumnWidth(paginatedRows, columnDefs, isFilterVisible = this.state.isFilterVisible) {\r\n this.timer = setInterval(() => {\r\n this.setHeaderHelpText(columnDefs)\r\n }, 2000);\r\n\r\n\r\n if (paginatedRows.length === 0) {\r\n var grid = this.myOpenGrid;\r\n if (grid) {\r\n return grid.base.props.columns\r\n }\r\n } else {\r\n columnDefs = columnDefs.map((col, i) => ({\r\n ...col,\r\n hash: new Date().getTime()\r\n }));\r\n }\r\n\r\n return columnDefs\r\n }\r\n\r\n setHeaderHelpText(columnDefs) {\r\n var grid = this.myOpenGrid;\r\n if (grid === null || grid === undefined) {\r\n return;\r\n }\r\n\r\n var gridCells = ReactDOM.findDOMNode(grid).querySelectorAll('.react-grid-HeaderCell');\r\n gridCells.forEach((item) => {\r\n const headerText = item.innerText;\r\n var col = columnDefs.findIndex((colDef) => {\r\n return colDef.name === headerText\r\n })\r\n\r\n if (col !== -1) {\r\n item.setAttribute('title', columnDefs[col].helpText)\r\n if (columnDefs[col].editable) {\r\n item.style.backgroundColor = '#ff8c00';\r\n }\r\n }\r\n })\r\n }\r\n\r\n filterChange() {\r\n const isFilterVisible = this.state.isFilterVisible\r\n if (this.state.pendingRecords.length > 0) {\r\n this.filteredColumnValues = []\r\n }\r\n\r\n this.setState({ isFilterVisible: !isFilterVisible })\r\n }\r\n\r\n isDisabled() {\r\n const errorRecords = this.state.errorRecords\r\n var errorRecordSize = 0;\r\n Object.values(errorRecords).forEach((item) => {\r\n errorRecordSize += item.length;\r\n })\r\n\r\n return errorRecordSize > 0 || this.state.pendingRecords.length === 0\r\n }\r\n\r\n handlePageCountChange(value) {\r\n var result = this.state.pageCountOption.find(page => page.value === value)\r\n var pageCount = this.state.filteredRows.length / result.value\r\n this.setState({ perPage: value, paginatedRowFrom: 0, paginatedRowTo: result.value, pageCount: pageCount })\r\n\r\n }\r\n\r\n isCellEditable(e) {\r\n return e.column.editable;\r\n }\r\n\r\n columnResize(idx, width) {\r\n // console.log(idx, width)\r\n // console.log(this.state.rowData, this.state.columns)\r\n let column = this.state.columnDefs;\r\n column.map((value, index) => {\r\n if (index == (Number(idx))) {\r\n value.width = Number(width)\r\n return;\r\n }\r\n })\r\n\r\n this.setState({ columnDefs: column })\r\n }\r\n\r\n searchRowIndex(arr, skey) {\r\n let start = 0, end = arr.length - 1;\r\n while (start <= end) {\r\n let mid = Math.floor((start + end) / 2);\r\n const val = arr[mid][this.props.keyColumn]\r\n if (val === skey) return mid;\r\n else if (val < skey)\r\n start = mid + 1;\r\n else\r\n end = mid - 1;\r\n }\r\n\r\n return -1;\r\n }\r\n\r\n findRowIndex(arr, skey) {\r\n let start = 0, end = arr.length - 1;\r\n while (start <= end) {\r\n let mid = Math.floor((start + end) / 2);\r\n const val = arr[mid]\r\n if (val === skey) return mid;\r\n else if (val < skey)\r\n start = mid + 1;\r\n else\r\n end = mid - 1;\r\n }\r\n\r\n return -1;\r\n }\r\n\r\n onGridRowsUpdated = ({ fromRow, toRow, updated }) => {\r\n if (Object.values(updated)[0] === 'DUMMY') {\r\n return\r\n }\r\n\r\n this.setState(state => {\r\n const filteredRows = state.filteredRows;\r\n const rowData = state.rowData;\r\n\r\n const pendingRecords = state.pendingRecords;\r\n pendingRecords.sort((a, b) => {\r\n return a - b;\r\n })\r\n\r\n const colIdx = state.columnDefs.findIndex((item) => {\r\n return item.key === Object.keys(updated)[0]\r\n })\r\n\r\n var warningRecords = this.state.warningRecords;\r\n var errorRecords = this.state.errorRecords;\r\n //var cleanIndustryOverrides = this.state.cleanIndustryOverrides\r\n \r\n fromRow -= 2; toRow -= 2;\r\n\r\n for (var idx = state.paginatedRowFrom + fromRow, len = (state.paginatedRowFrom + toRow); idx <= len; idx++) {\r\n const editable = { column: state.columnDefs[colIdx], row: filteredRows[idx] }\r\n if (!this.isCellEditable(editable)) {\r\n continue;\r\n }\r\n\r\n if (getNonEmptyValue(filteredRows[idx][editable.column.key]) === getNonEmptyValue(Object.values(updated)[0]))\r\n continue;\r\n\r\n let skey = filteredRows[idx][this.props.keyColumn]\r\n\r\n if (editable.column.key === 'ENABLEMENT_WAVE') {\r\n\r\n updated.ENABLEMENT_WAVE_OVERRIDE = updated.ENABLEMENT_WAVE !== \"\" ? 'Override' : 'Calculated'\r\n }\r\n\r\n if (editable.column.key === 'FINAL_SUPPLIER_ENABLE_TYPE') //SAP_ARIBA_BUY_ENABLE_MTHD_RECMD\r\n {\r\n updated.ENABLEMENT_RECOMMENDATION_OVERRIDE = 'Override'\r\n }\r\n\r\n filteredRows[idx] = { ...filteredRows[idx], ...updated };\r\n\r\n var rowIdx = binarySearchIndex(rowData, skey, this.props.keyColumn)\r\n rowData[rowIdx] = { ...rowData[rowIdx], ...updated };\r\n\r\n if (this.props.onRowUpdate) {\r\n this.props.onRowUpdate(rowData[rowIdx], updated)\r\n }\r\n\r\n var recordIdx = this.findRowIndex(pendingRecords, skey);\r\n if (recordIdx === -1) {\r\n pendingRecords.push(skey);\r\n }\r\n\r\n var validationRecords = this.props.validate ?\r\n this.props.validate(filteredRows[idx], { warningRecords: warningRecords, errorRecords: errorRecords }) :\r\n undefined;\r\n if (validationRecords) {\r\n if (validationRecords.warningRecords)\r\n warningRecords = { ...validationRecords.warningRecords }\r\n if (validationRecords.errorRecords)\r\n errorRecords = { ...validationRecords.errorRecords }\r\n }\r\n }\r\n //this.props.pendingChanges(pendingRecords)\r\n return {\r\n rowData: rowData, filteredRows: filteredRows, fromRow: fromRow, toRow: toRow, updated: updated,\r\n pendingRecords: pendingRecords, warningRecords: warningRecords,\r\n errorRecords: errorRecords\r\n };\r\n });\r\n };\r\n\r\n onSaveScc() {\r\n const pendingRecords = this.state.pendingRecords;\r\n if (pendingRecords.length === 0) {\r\n this.props.onSave(pendingRecords);\r\n this.setState({ pendingRecords: [], errorRecords: [], warningRecords: [] });\r\n } else {\r\n const pendingRecords = this.state.pendingRecords;\r\n if (pendingRecords.length === 0) {\r\n return;\r\n }\r\n\r\n let rowData = this.state.rowData\r\n let filteredRows = this.state.filteredRows;\r\n const recordsToInsert = [];\r\n\r\n pendingRecords.forEach((item) => {\r\n var rowIdx = binarySearchIndex(rowData, item, this.props.keyColumn)\r\n const row = rowData[rowIdx]\r\n recordsToInsert.push(row)\r\n })\r\n\r\n this.props.onSave(recordsToInsert)\r\n this.setState({ pendingRecords: [], errorRecords: [], warningRecords: [] });\r\n }\r\n }\r\n\r\n onSave() {\r\n const pendingRecords = this.state.pendingRecords;\r\n if (pendingRecords.length === 0) {\r\n return;\r\n }\r\n\r\n this.setState({ isLoading: true, isError: 'No', isSaveInProgress: true, responseMsg: '' })\r\n let rowData = this.state.rowData\r\n let filteredRows = this.state.filteredRows;\r\n const recordsToInsert = [];\r\n\r\n pendingRecords.forEach((item) => {\r\n var rowIdx = binarySearchIndex(rowData, item, this.props.keyColumn)\r\n const row = rowData[rowIdx]\r\n recordsToInsert.push(row)\r\n })\r\n\r\n this.props.save(recordsToInsert).then((response) => {\r\n if (response.status !== undefined && response.status === 200) {\r\n if (response.data && response.data.Result) {\r\n var modifiedRows = this.props.onCommit ? this.props.onCommit(response) : response.data.Result\r\n\r\n for (var i = 0; i < modifiedRows.length; i++) {\r\n const row = modifiedRows[i];\r\n\r\n const skey = row[this.props.keyColumn];\r\n var rowIdx = binarySearchIndex(rowData, skey, this.props.keyColumn)\r\n rowData[rowIdx] = { ...rowData[rowIdx], ...row };\r\n\r\n\r\n for (var idx = 0; idx < filteredRows.length; idx++) {\r\n if (filteredRows[idx][this.props.keyColumn] === row[this.props.keyColumn]) {\r\n filteredRows[idx] = { ...filteredRows[idx], ...row };\r\n }\r\n }\r\n }\r\n\r\n this.setState({ filteredRows: filteredRows, rowData: rowData, pendingRecords: [], errorRecords: [], warningRecords: [], responseMsg: 'Record/s has been updated successfully', isError: 'No', isSaveInProgress: false, isLoading: false }, this.props.setApiResponse ? this.props.setApiResponse({ message: 'Record/s has been updated successfully', isError: 'No', isSaveInProgress: false, isLoading: false }) : () => { })\r\n }\r\n else {\r\n this.setState({ pendingRecords: [], errorRecords: [], warningRecords: [], responseMsg: 'Record/s has been updated successfully', isError: 'No', isSaveInProgress: false, isLoading: false }, this.props.setApiResponse ? this.props.setApiResponse({ message: 'Record/s has been updated successfully', isError: 'No', isSaveInProgress: false, isLoading: false }) : () => { })\r\n return;\r\n }\r\n } else if (response && response.stack && response.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: this.props.content.validation.networkError, isError: 'Yes', isSaveInProgress: false, isLoading: false }, this.props.setApiResponse ? this.props.setApiResponse({ message: this.props.content.validation.networkError, isError: 'Yes', isSaveInProgress: false, isLoading: false }) : () => { })\r\n } else {\r\n this.setState({ responseMsg: this.props.content.validation.error, isError: 'Yes', isSaveInProgress: false, isLoading: false }, this.props.setApiResponse ? this.props.setApiResponse({ message: this.props.content.validation.error, isError: 'Yes', isSaveInProgress: false, isLoading: false }) : () => { })\r\n }\r\n }).catch((error) => {\r\n this.setState({ responseMsg: this.props.content.validation.error, isError: 'Yes', isSaveInProgress: false, isLoading: false }, this.props.setApiResponse ? this.props.setApiResponse({ message: this.props.content.validation.error, isError: 'Yes', isSaveInProgress: false, isLoading: false }) : () => { })\r\n })\r\n }\r\n\r\n /* This method can be used to highlight the cell values */\r\n RowRenderer = ({ renderBaseRow, ...props }) => {\r\n\r\n if (props.row.superHeader && Object.keys(props.row.superHeader).length > 0) {\r\n const value = props.row.superHeader\r\n let left = 0\r\n let headerGroupDiv = Object.keys(value).map((key, index) => {\r\n const val = value[key]\r\n let row = {}\r\n if (val.name === null) {\r\n let cellValue = (
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n // language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content,\r\n detailedFile: state.content.spendAnalysis.detailedFile,\r\n validation: state.content.validation,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n\r\n //insertDetailedFileRecords: (records) => dispatch(insertDetailedFileRecords(records)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CustomGridSCC)\r\n","import { Control } from 'react-redux-form'\r\nimport React from \"react\";\r\nimport { Checkbox } from 'material-ui';\r\nimport Popup from \"reactjs-popup\";\r\nimport CustomGrid from 'UI/CustomGrid'\r\nimport Button from 'UI/Button'\r\nimport PopupButton from 'UI/PopupButton'\r\nimport Select from 'react-select'\r\nimport { RadioButton } from 'material-ui';\r\n\r\nimport ReactDOM from \"react-dom\";\r\nimport CustomGridSCC from '../CustomGridSCC';\r\n//import { ReadOnlyContext } from 'Constants'\r\n\r\nexport const ReadOnlyContext = React.createContext({\r\n\treadOnly: false\r\n })\r\n\r\nexport const ScreenE = (props) => {\r\n return (\r\n
\r\n {moment(data.ModifiedDate).format('MMM Do/YYYY')}
\r\n{data.ValueStoryName} | {data.CompanyName} | {this.props.content.discovery.form.industries[data.Industry]} | {this.props.content.discovery.form.locations[data.Location]}
\r\n\r\n
- \r\n {data.Peers ?
- Peers : null}\r\n {data.Priorities ?
- Priorities : null}\r\n {data.Spend ?
- Spend : null}\r\n {data.SKUs ?
- SAP Solutions : null}\r\n {data.BusinessCase ?
- Business case : null}\r\n {data.AdoptionPlan ?
- Adoption plan : null}\r\n
\r\n
\r\n\r\n ))\r\n : \r\n
\r\n \r\n {data.content ? ![](\"images/minus_active.png\")
: ![](\"images/plus_active.svg\")
}\r\n
\r\n {/* : }\r\n { this.triggerEmail(data.Email, data.VSID, event) }}> */}\r\n
\r\n \r\n ![](\"images/email_inactive.svg\")
this.showModal(data.Email, data.VSID, data.CompanyName)} />\r\n this.callback()}\r\n modalStyle={autoHeightModalStyle}\r\n contentStyle={emailmodalContentStyle}>\r\n {EmailConfirmation()}\r\n \r\n
\r\n this.showModal(data.Email, data.VSID, data.CompanyName)} />\r\n No value stories exist with this company name.
\r\n }\r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n content: state.content,\r\n ui: state.content.ui,\r\n user: state.default,\r\n validation: state.content.validation\r\n }\r\n}\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n requestValueStorySuccess: (bool) => dispatch(requestValueStorySuccess(bool)),\r\n requestValueStoryFailure: (error) => dispatch(requestValueStoryFailure(error)),\r\n requestValueStory: (originatorEmail, requesterEmail, VSID, language) => dispatch(requestValueStory(originatorEmail, requesterEmail, VSID, language))\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ValueStoryList)\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport Popup from \"reactjs-popup\";\r\n// Utils\r\nimport moment from 'moment'\r\nimport classnames from 'classnames'\r\nimport ScrollArea from 'react-scrollbar'\r\n\r\nconst ExistingValueStoryList = (props) =>\r\n\r\n \r\n {//props.isLoading ? \r\n
\r\nexport default ExistingValueStoryList\r\n\r\nExistingValueStoryList.propTypes = {\r\n valueStories: PropTypes.array,\r\n selectedValueStory: PropTypes.number,\r\n handleValueStoryClick: PropTypes.func.isRequired,\r\n openValueStory: PropTypes.func.isRequired\r\n}","export const UPDATE_VALUESTORYNAME = 'UPDATE_VALUESTORYNAME'\r\nexport const UPDATE_CAPIQID = 'UPDATE_CAPIQID'\r\nexport const UPDATE_ORGANIZATION = 'UPDATE_ORGANIZATION'\r\nexport const CHANGE_LOCATION = 'CHANGE_LOCATION'\r\nexport const CHANGE_INDUSTRY = 'CHANGE_INDUSTRY'\r\nexport const UPDATE_CURRENCY = 'UPDATE_CURRENCY'\r\nexport const ADD_REVENUE = 'ADD_REVENUE'\r\nexport const UPDATE_TOTAL_SPEND = 'UPDATE_TOTAL_SPEND'\r\nexport const GO_TO_CHOOSE_PATH = 'GO_TO_CHOOSE_PATH'\r\nexport const UPDATE_BPID = 'UPDATE_BPID'\r\nexport const UPDATE_ANID = 'UPDATE_ANID'\r\nexport const UPDATE_VALUESTORYTYPE = 'UPDATE_VALUESTORYTYPE'\r\n\r\nexport const updateValueStoryName = (valuestoryName) => {\r\n\treturn {\r\n\t\ttype: 'UPDATE_VALUESTORYNAME',\r\n\t\tvaluestoryName\r\n\t}\r\n}\r\n\r\nexport const updateCapIQId = (capiqid) => {\r\n\treturn {\r\n\t\ttype: 'UPDATE_CAPIQID',\r\n\t\tcapiqid\r\n\t}\r\n}\r\n\r\nexport const updateOrganization = (organization) => {\r\n\treturn {\r\n\t\ttype: 'UPDATE_ORGANIZATION',\r\n\t\torganization\r\n\t}\r\n}\r\n\r\nexport const changeLocation = (location, spendAsPercentageOfRevenue) => {\r\n\treturn {\r\n\t\ttype: 'CHANGE_LOCATION',\r\n\t\tlocation,\r\n\t\tspendAsPercentageOfRevenue\r\n\t}\r\n}\r\n\r\nexport const changeIndustry = (industry, spendAsPercentageOfRevenue) => {\r\n\treturn {\r\n\t\ttype: 'CHANGE_INDUSTRY',\r\n\t\tindustry: industry,\r\n\t\tspendAsPercentageOfRevenue: spendAsPercentageOfRevenue\r\n\t}\r\n}\r\n\r\nexport const updateCurrency = (currency) => {\r\n\treturn {\r\n\t\ttype: 'UPDATE_CURRENCY',\r\n\t\tcurrency\r\n\t}\r\n}\r\n\r\nexport const updateCurrencyCode = (currencyCode) => {\r\n\treturn {\r\n\t\ttype: 'UPDATE_CURRENCY_CODE',\r\n\t\tcurrencyCode\r\n\t}\r\n}\r\n\r\nexport const addRevenue = (revenue) => {\r\n\treturn {\r\n\t\ttype: 'ADD_REVENUE',\r\n\t\trevenue\r\n\t}\r\n}\r\n\r\nexport const updateTotalSpend = (spend) => {\r\n\treturn {\r\n\t\ttype: 'UPDATE_TOTAL_SPEND',\r\n\t\tspend\r\n\t}\r\n}\r\n\r\nexport const goToChoosePath = (bool) => {\r\n\treturn {\r\n\t\ttype: 'GO_TO_CHOOSE_PATH',\r\n\t\tpayload: bool\r\n\t}\r\n}\r\n\r\nexport const capIQFetchData = (capIQData) => {\r\n\treturn {\r\n\t\ttype: 'CAPIQ_FETCH_DATA',\r\n\t\tcapIQData\r\n\t}\r\n}\r\n\r\nexport const updateBPID = (bpId) => {\r\n\treturn {\r\n\t\ttype: 'UPDATE_BPID',\r\n\t\tbpId\r\n\t}\r\n}\r\n\r\nexport const updateANID = (anId) => {\r\n\treturn {\r\n\t\ttype: 'UPDATE_ANID',\r\n\t\tanId\r\n\t}\r\n}\r\n\r\nexport const changeIndirectSolutionScope = (value) => {\r\n\treturn {\r\n\t\ttype: 'CHANGE_INDIRECTSCOPE',\r\n\t\tindirectSolutionScope: value\t\t\r\n\t}\r\n}\r\n\r\nexport const updateValueStoryType = (valueStoryType) => {\r\n\treturn {\r\n\t\ttype: 'UPDATE_VALUESTORYTYPE',\r\n\t\tvalueStoryType\r\n\t}\r\n}\r\n\r\nexport function isValueStoryPage(obj) {\r\n\treturn {\r\n\t type: 'GET_IS_VALUE_STORY_PAGE',\r\n\t payload: obj\r\n\t};\r\n }\r\n\r\n export function saveValueStoryOnRedirect(changes) {\r\n\treturn {\r\n\t type: 'SaveValueStoryOnRedirect-Changes',\r\n\t payload: changes\r\n\t};\r\n }","import React from 'react';\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport { RadioButton } from 'material-ui';\r\nimport ScrollArea from 'react-scrollbar'\r\nimport Button from 'UI/Button';\r\nimport ButtonWithoutLoader from 'UI/ButtonWithoutLoader'\r\nimport Select from 'react-select'\r\n//import fuzzysort from 'fuzzysort'\r\nimport ValueStoryList from 'Search/ValueStories'\r\nimport ExistingValueStoryList from 'ValueStory/ExistingValueStoryList'\r\nimport moment from 'moment'\r\nimport { validators, dropdownColourStyles, modalStyle, emailmodalContentStyle } from 'Constants'\r\nimport { formatThousands, BreakLine, round } from 'utils/Utils'\r\nimport _ from 'lodash'\r\n\r\nimport {\r\n userDetailsSuccess,\r\n userDetailsFailure,\r\n userDetailsLoading,\r\n fetchUserValueStories,\r\n fetchValueStories,\r\n fetchRequestDetails,\r\n requestValueStory,\r\n requestValueStoryLoading,\r\n requestValueStorySuccess,\r\n requestValueStoryFailure,\r\n fetchValueStoriesLoading,\r\n fetchValueStoriesSuccess,\r\n fetchValueStoriesFailure,\r\n resetError\r\n} from 'actions/userActions'\r\n\r\nimport {\r\n searchResult,\r\n fetchCapIqSearchResults,\r\n capIqSearchSuccess,\r\n capIqSearchFailure\r\n}\r\n from 'actions/searchActions'\r\n\r\nimport { capIQFetchData } from 'actions/discoveryActions'\r\nimport { valueStoryFetchDataSuccess } from 'actions/fetchValueStory'\r\nimport {\r\n getSPCapitalIQData,\r\n getSPCapitalIQLoading,\r\n getSPCapitalIQSuccess,\r\n getSPCapitalIQFailure\r\n} from 'actions/spendActions'\r\n\r\nimport { Checkbox } from 'material-ui';\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nconst autoHeightModalStyle = Object.assign({}, modalStyle)\r\nautoHeightModalStyle.height = 'auto'\r\nautoHeightModalStyle.width = '50%'\r\n\r\n\r\n\r\nclass DiscoveryVsSearch extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: props.data,\r\n peArray: [],\r\n bpArray: [],\r\n flag: false,\r\n index: -1,\r\n checked: false,\r\n checkIndex: -1,\r\n // companyName: [],\r\n companyName: '',\r\n capIQId: '',\r\n stockTicker: '',\r\n selectedData: null,\r\n searchOption: [{ label: 'Company Name', value: 'Company Name' }],\r\n selectedOption: 'Company Name',\r\n searchText: '',\r\n valueStories: [],\r\n vsLoad: '',\r\n valueStoriesShared: null,\r\n companyDetails: [],\r\n companyObj: [],\r\n isLoading: false,\r\n ultimateParentChecked: true,\r\n publicCompanyChecked: false,\r\n currencyCode: 'USD',\r\n capIQResult: [],\r\n firstRequestMadeOn: '-',\r\n secondRequestMadeOn: '-',\r\n thirdRequestMadeOn: '-',\r\n errorMsg: '',\r\n searchFlag: false\r\n }\r\n this.loadPE_Data = this.loadPE_Data.bind(this)\r\n this.loadCompanyData = this.loadCompanyData.bind(this)\r\n this.createCompanyProfileArray = this.createCompanyProfileArray.bind(this)\r\n this.RadioButtonChecked = this.RadioButtonChecked.bind(this);\r\n this.onSearchTextChangeEvent = this.onSearchTextChangeEvent.bind(this);\r\n this.search = this.search.bind(this);\r\n this._handleKeyDown = this._handleKeyDown.bind(this);\r\n this.save = this.save.bind(this)\r\n this.addCurrencyMask = this.addCurrencyMask.bind(this)\r\n //this.filterSearchData = this.filterSearchData.bind(this)\r\n this.clearCAPIQ = this.clearCAPIQ.bind(this);\r\n this.closePopUp = this.closePopUp.bind(this);\r\n //this.fetchUserSharedValueStories = this.fetchUserSharedValueStories.bind(this);\r\n this.triggerEmail = this.triggerEmail.bind(this);\r\n this.showModal = this.showModal.bind(this);\r\n this.showRequestModal = this.showRequestModal.bind(this);\r\n this.hideRequestModal = this.hideRequestModal.bind(this);\r\n }\r\n\r\n showModal(originatorEmail, VSID, companyName) {\r\n this.props.fetchRequestDetails(VSID, this.props.user.user.Email)\r\n .then((result) => {\r\n if (result.status === 200) {\r\n if (result.data.Result.length !== 3) {\r\n this.setState({ VSID: VSID, originatorEmail: originatorEmail, companyName: companyName, message: '', isLoading: false, isError: false })\r\n this.refs.modal.show()\r\n }\r\n else {\r\n this.setState({ message: this.props.menu.valueStory.requestValidation, isLoading: false, isError: true })\r\n }\r\n }\r\n else {\r\n this.setState({ message: this.props.menu.valueStory.errorOccured, isLoading: false, isError: true })\r\n }\r\n }).catch((error) => {\r\n this.setState({ message: this.props.menu.valueStory.errorOccured, isLoading: false, isError: true })\r\n })\r\n }\r\n\r\n hideModal() {\r\n this.refs.modal.hide()\r\n }\r\n\r\n showRequestModal(VSID) {\r\n this.setState({ isError: false, message: '', isLoading: false })\r\n this.props.fetchRequestDetails(VSID, this.props.user.user.Email)\r\n .then((result) => {\r\n if (result.data.Result.length > 0) {\r\n var firstRequest = result.data.Result[0] === null || result.data.Result[0] === undefined ? '-' : moment(result.data.Result[0]['RequestedDate']).format('ddd, Do MMM YYYY, h:mm:ss a')\r\n var secondRequest = result.data.Result[1] === null || result.data.Result[1] === undefined ? '-' : moment(result.data.Result[1]['RequestedDate']).format('ddd, Do MMM YYYY, h:mm:ss a')\r\n var thirdRequest = result.data.Result[2] === null || result.data.Result[2] === undefined ? '-' : moment(result.data.Result[2]['RequestedDate']).format('ddd, Do MMM YYYY, h:mm:ss a')\r\n this.setState({ firstRequestMadeOn: firstRequest, secondRequestMadeOn: secondRequest, thirdRequestMadeOn: thirdRequest })\r\n }\r\n else {\r\n this.setState({ firstRequestMadeOn: '-', secondRequestMadeOn: '-', thirdRequestMadeOn: '-', message: '', isLoading: false, isError: false })\r\n }\r\n this.refs.requestDetails.show()\r\n }).catch((error) => {\r\n this.setState({ message: this.props.menu.valueStory.errorOccured, isLoading: false, isError: true })\r\n })\r\n }\r\n\r\n hideRequestModal() {\r\n this.refs.requestDetails.hide()\r\n }\r\n\r\n triggerEmail(originatorEmail, VSID) {\r\n this.refs.modal.hide()\r\n this.setState({ isError: false, message: '', isLoading: false })\r\n var emailSuccess = this.props.contentDefault.search.emailSuccess\r\n var emailError = this.props.contentDefault.search.emailError\r\n var requesterEmail = this.props.user.user.Email\r\n var language = this.props.language.toUpperCase();\r\n this.props.requestValueStory(originatorEmail, requesterEmail, VSID, language)\r\n .then((response) => {\r\n if (response.status === 200) {\r\n //this.props.requestValueStorySuccess(response)\r\n let arrayValueStories = this.state.valueStories\r\n arrayValueStories.find(element => element.VSID === VSID).RequestStatus = true\r\n this.setState({ valueStories: arrayValueStories, message: emailSuccess, isLoading: false, isError: false })\r\n }\r\n else {\r\n //this.props.requestValueStoryFailure(emailError)\r\n this.setState({\r\n message: emailError, isLoading: false, isError: true\r\n })\r\n }\r\n }).catch((error) => {\r\n //this.props.requestValueStoryFailure(error.response.data.Message)\r\n this.setState({\r\n message: emailError, isLoading: false, isError: true\r\n })\r\n })\r\n }\r\n\r\n closePopUp() {\r\n this.props.close()\r\n }\r\n\r\n addCurrencyMask(value) {\r\n const regex = /\\d*\\.?\\d{0,2}/g\r\n const filteredValue = regex.exec(value)\r\n let currencySymbol = this.props.currencySymbols[this.state.currencyCode];\r\n if (this.state.currencyCode === null) {\r\n currencySymbol = '$';\r\n }\r\n\r\n if (filteredValue[0] === '') {\r\n return currencySymbol + formatThousands(this.value) + ' M'\r\n } else {\r\n this.value = filteredValue[0]\r\n return currencySymbol + formatThousands(this.value) + ' M'\r\n }\r\n\r\n }\r\n\r\n /*\r\n fetchUserSharedValueStories() {\r\n this.props.fetchValueStoriesLoading(true)\r\n this.setState({ isError: false, message: '', })\r\n this.props.fetchUserSharedValueStories(this.props.user.user.Id)\r\n .then((result) => {\r\n this.props.fetchValueStoriesSuccess(result)\r\n var obj = [];\r\n for (var i = 0; i < result.data.Result.length; i++) {\r\n\r\n obj.push(result.data.Result[i])\r\n }\r\n let temp = obj;\r\n temp.forEach((element, i) => {\r\n element.content = false;\r\n element.index = i;\r\n });\r\n this.setState({ valueStoriesShared: temp })\r\n }).catch((error) => {\r\n this.props.fetchValueStoriesFailure(error.response.data.Message)\r\n this.setState({\r\n message: error.response.data.Message, isLoading: false, isError: true\r\n })\r\n })\r\n }\r\n */\r\n save() {\r\n if (this.state.checked) {\r\n this.props.capIqRadioButtonClicked(this.state.selectedData)\r\n }\r\n this.props.close();\r\n }\r\n clearCAPIQ() {\r\n const companyData = this.props.userData;\r\n companyData.Organization = '';\r\n companyData.Industry = '';\r\n companyData.Location = '0';\r\n companyData.AnnualRevenue = null;\r\n companyData.TotalSpend = '0';\r\n companyData.CapIQId = '';\r\n companyData.CurrencyCode = 'USD';\r\n this.props.valueStoryFetchDataSuccess(companyData)\r\n this.props.capIqDataCleared()\r\n this.props.close();\r\n }\r\n\r\n onSearchTextChangeEvent(event) {\r\n this.setState({ searchText: event.target.value !== undefined ? event.target.value : '', checked: false, searchFlag: event.target.value !== '' ? true : false });\r\n }\r\n\r\n _handleKeyDown(e) {\r\n if (e.key === 'Enter') {\r\n this.search()\r\n }\r\n }\r\n\r\n /*\r\n filterSearchData() {\r\n let data = this.state.capIQResult\r\n let filteredResult = []\r\n //check if the checkbox to include only ultimate parent companies checked\r\n if (this.state.ultimateParentChecked && this.state.publicCompanyChecked) {\r\n for (let i = 0; i < data.length; i++) {\r\n //Include only the results which have a parent id & type publi\r\n if (data[i].PARENT_COMPANY_ID == data[i].COMPANY_ID && data[i].COMPANY_TYPE == 'Public Company') {\r\n filteredResult.push(data[i])\r\n }\r\n }\r\n } else if (this.state.ultimateParentChecked && !this.state.publicCompanyChecked) {\r\n for (let i = 0; i < data.length; i++) {\r\n //Include only the results which have a parent id\r\n if (data[i].PARENT_COMPANY_ID == data[i].COMPANY_ID) {\r\n filteredResult.push(data[i])\r\n }\r\n }\r\n }\r\n else if (!this.state.ultimateParentChecked && this.state.publicCompanyChecked) {\r\n for (let i = 0; i < data.length; i++) {\r\n //Include only the results which have a company type public\r\n if (data[i].COMPANY_TYPE == 'Public Company') {\r\n filteredResult.push(data[i])\r\n }\r\n }\r\n }\r\n else {\r\n filteredResult = data;\r\n }\r\n this.setState({ searchResult: filteredResult }, this.loadPE_Data)\r\n }\r\n */\r\n search() {\r\n let searchText = this.state.searchText;\r\n //let sharedVs = this.state.valueStoriesShared;\r\n // console.log(\"String length: \", searchText.trim().length)\r\n if (searchText !== null && searchText.trim().length !== 0) {\r\n this.props.fetchValueStoriesLoading(true)\r\n this.setState({ valueStories: [], isError: false, message: '', vsLoad: 'true' })\r\n this.props.fetchValueStories(searchText)\r\n .then((result) => {\r\n if (result.status === 200) {\r\n this.props.fetchValueStoriesSuccess(result)\r\n var obj = [];\r\n for (var i = 0; i < result.data.Result.length; i++) {\r\n if (result.data.Result[i].Spend) {\r\n obj.push(result.data.Result[i])\r\n }\r\n }\r\n let temp = obj;\r\n let vsList;\r\n temp.forEach((element, i) => {\r\n element.content = false;\r\n element.index = i;\r\n });\r\n //if (sharedVs.length > 0) {\r\n //vsList = temp.filter(obj => !sharedVs.filter(xobj => obj.VSID == xobj.VSId).length)\r\n //} else {\r\n vsList = temp\r\n //}\r\n if (vsList.length > 0)\r\n this.setState({ valueStories: vsList, message: '', searchText: searchText, vsLoad: '', isLoading: false, isError: false })\r\n else\r\n this.setState({ message: this.props.menu.valueStory.noResult, isLoading: false, isError: true })\r\n }\r\n else {\r\n this.setState({\r\n message: this.props.contentDefault.search.emailError, isLoading: false, isError: true\r\n })\r\n }\r\n }).catch((error) => {\r\n setTimeout(() => {\r\n this.props.fetchValueStoriesFailure(error.response.data.Message)\r\n })\r\n this.setState({\r\n message: error.response.data.Message, isLoading: false, isError: true\r\n })\r\n })\r\n }\r\n }\r\n\r\n RadioButtonChecked(e) {\r\n var companyName = [];\r\n let data = this.state.searchResult[e.currentTarget.value]\r\n if (data.AVATAR_INDUSTRY != null) {\r\n const industryIdx = this.props.contentData.industries.findIndex(item => data.AVATAR_INDUSTRY.toLowerCase() === item.toLowerCase());\r\n const companyData = this.props.userData;\r\n companyData.Industry = industryIdx;\r\n this.props.valueStoryFetchDataSuccess(companyData);\r\n }\r\n\r\n //this.props.capIqRadioButtonClicked(data)\r\n //After this send the data back to search results to populate company profile..................................\r\n\r\n this.setState({ checked: true, checkIndex: e.currentTarget.id, selectedData: data, isLoading: true, currencyCode: data.CURRENCY_CODE }, this.callMethods)\r\n }\r\n\r\n callMethods() {\r\n this.loadPE_Data();\r\n this.createCompanyProfileArray();\r\n }\r\n\r\n createCompanyProfileArray() {\r\n let id = this.state.selectedData.COMPANY_ID\r\n this.props.getSPCapitalIQData(id)\r\n .then((result) => {\r\n this.props.getSPCapitalIQSuccess(result)\r\n let data = result.data.Result;\r\n this.setState({ companyObj: data }, this.loadCompanyData)\r\n }).catch((error) => {\r\n this.props.getSPCapitalIQFailure(error.response.data.Message)\r\n })\r\n }\r\n\r\n loadPE_Data() {\r\n var result = (\r\n
\r\n \r\n
\r\n \r\n
\r\n {props.content.valueStoryNameHeader}
\r\n {props.content.ownerHeader}
\r\n {props.content.companyNameHeader}
\r\n {/* {props.content.industry}
*/}\r\n {/* {props.content.country}
*/}\r\n {/* {props.content.dateHeader}
*/}\r\n {props.content.requestStatus}
\r\n Loading...
:\r\n // Loading...
:\r\n (props.valueStories.map((data, i) =>\r\n \r\n
\r\n ))\r\n }\r\n \r\n
\r\n {\r\n \r\n
\r\n {data.ValueStoryName}
\r\n {data.Email}
\r\n {data.CompanyName}
\r\n {/* {props.contentData.industries[data.Industry]}
*/}\r\n {/* {props.contentData.locations[data.Location]}
*/}\r\n {/* {moment(data.ModifiedDate).format('MMM d, YYYY')}
*/}\r\n {data.RequestStatus ? props.content.pending : props.content.notRequested}
\r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.state.searchResult.map((data, index) => (\r\n
)\r\n this.setState({ peArray: result })\r\n }\r\n\r\n loadCompanyData() {\r\n var data = this.state.companyObj[0];\r\n this.props.capIQFetchData(data)\r\n\r\n\r\n const companyData = this.props.userData;\r\n companyData.CurrencyCode = data.CURRENCY_CODE;\r\n this.props.valueStoryFetchDataSuccess(companyData);\r\n\r\n var result = (\r\n
\r\n ))}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {data.COMPANY_NAME}\r\n | {this.props.content.capIdSearchText}: {data.COMPANY_ID}\r\n
\r\n \r\n {data.COUNTRY_NAME}\r\n | {data.EXCHANGE_SYMBOL}: {data.STOCK_TICKER}\r\n | {this.props.content.capIndustryText}: {data.COMPANY_INDUSTRY_DESC}\r\n
\r\n \r\n {this.props.content.capParentCompanyText}: {data.PARENT_COMPANY_NAME}\r\n | {\"Parent Id\"}: {data.PARENT_COMPANY_ID}\r\n
\r\n Company Name: {data.name}
*/}\r\n\r\n
\r\n \r\n
\r\n {this.props.company.COMPANY_NAME}
\r\n {data.COMPANY_NAME != null ? data.COMPANY_NAME : '-'}
\r\n \r\n
\r\n {this.props.company.COMPANY_ADDRESS}
\r\n \r\n {data.COMPANY_ADDRESS != null ? data.COMPANY_ADDRESS : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.COMPANY_TYPE}
\r\n \r\n {data.COMPANY_TYPE != null ? data.COMPANY_TYPE : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.COMPANY_STATUS}
\r\n \r\n {data.COMPANY_STATUS != null ? data.COMPANY_STATUS : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.EMPLOYEE_COUNT}
\r\n \r\n {data.EMPLOYEE_COUNT != null ? formatThousands(data.EMPLOYEE_COUNT) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.WEBPAGE}
\r\n \r\n \r\n
\r\n {this.props.company.FISCAL_YEAR}
\r\n \r\n {data.FISCAL_YEAR != null ? data.FISCAL_YEAR : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.TOT_REV}
\r\n \r\n {data.TOT_REV != null ? this.addCurrencyMask(data.TOT_REV) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.GRO_MARG}
\r\n \r\n {data.GRO_MARG != null ? round(data.GRO_MARG, 2) + ' %' : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.EBITDA_MARG}
\r\n \r\n {data.EBITDA_MARG != null ? round(data.EBITDA_MARG, 2) + ' %' : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.DSO}
\r\n \r\n {data.DSO != null ? round(data.DSO, 2) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.DPO}
\r\n \r\n {data.DPO != null ? round(data.DPO, 2) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.DIO}
\r\n \r\n {data.DIO != null ? round(data.DIO, 2) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.CCC}
\r\n \r\n {data.CCC != null ? round(data.CCC, 2) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.COGS}
\r\n \r\n {data.COGS != null ? this.addCurrencyMask(data.COGS) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.SG_A}
\r\n \r\n {data.SG_A != null ? this.addCurrencyMask(data.SG_A) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.INV}
\r\n \r\n {data.INV != null ? this.addCurrencyMask(data.INV) : '-'}\r\n
\r\n \r\n
\r\n )\r\n }\r\n var RequestDetails = () => {\r\n return (\r\n \r\n
\r\n\r\n {this.props.contentDefault.search.emailAlert.replace(\"%CompanyName%\", companyName)}
\r\n\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n return (\r\n \r\n \r\n
\r\n - \r\n
- \r\n {this.props.menu.valueStory.firstRequest}{\":\"} \r\n {this.state.firstRequestMadeOn}\r\n \r\n
- \r\n {this.props.menu.valueStory.secondRequest}{\":\"} \r\n {this.state.secondRequestMadeOn}\r\n \r\n
- \r\n {this.props.menu.valueStory.thirdRequest}{\":\"} \r\n {this.state.thirdRequestMadeOn}\r\n \r\n
\r\n *{this.props.menu.valueStory.requestValidation}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n user: state.default,\r\n content: state.content.discovery.form,\r\n data: state.treeData,\r\n firstSearchResult: state.searchData,\r\n search: state.searchResultData,\r\n ui: state.content.ui,\r\n company: state.content.capitalDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n userData: state.valueStory,\r\n contentDefault: state.content,\r\n menu: state.content.menu\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchCapIqSearchResults: (value, type, parentFlag, publicFlag) => dispatch(fetchCapIqSearchResults(value, type, parentFlag, publicFlag)),\r\n capIqSearchSuccess: (msg) => dispatch(capIqSearchSuccess(msg)),\r\n capIqSearchFailure: (error) => dispatch(capIqSearchFailure(error)),\r\n searchResult: (result) => dispatch(searchResult(result)),\r\n getSPCapitalIQSuccess: message => dispatch(getSPCapitalIQSuccess(message)),\r\n getSPCapitalIQFailure: error => dispatch(getSPCapitalIQFailure(error)),\r\n getSPCapitalIQLoading: bool => dispatch(getSPCapitalIQLoading(bool)),\r\n getSPCapitalIQData: (CapIQID) => dispatch(getSPCapitalIQData(CapIQID)),\r\n capIQFetchData: (capIQData) => dispatch(capIQFetchData(capIQData)),\r\n valueStoryFetchDataSuccess: (valueStory) => dispatch(valueStoryFetchDataSuccess(valueStory)),\r\n resetError: () => dispatch(resetError()),\r\n fetchValueStoriesLoading: (bool) => dispatch(fetchValueStoriesLoading(bool)),\r\n fetchValueStoriesSuccess: (valueStories) => dispatch(fetchValueStoriesSuccess(valueStories)),\r\n fetchValueStoriesFailure: (error) => dispatch(fetchValueStoriesFailure(error)),\r\n requestValueStoryLoading: (bool) => dispatch(requestValueStoryLoading(bool)),\r\n requestValueStorySuccess: (valueStories) => dispatch(requestValueStorySuccess(valueStories)),\r\n requestValueStoryFailure: (error) => dispatch(requestValueStoryFailure(error)),\r\n fetchValueStories: (id) => dispatch(fetchValueStories(id)),\r\n //fetchUserSharedValueStories: (id) => dispatch(fetchUserSharedValueStories(id)),\r\n requestValueStory: (originatorEmail, requesterEmail, VSID, language) => dispatch(requestValueStory(originatorEmail, requesterEmail, VSID, language)),\r\n fetchRequestDetails: (VSID, requesterEmail) => dispatch(fetchRequestDetails(VSID, requesterEmail))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DiscoveryVsSearch);\r\n","import React, { PureComponent } from 'react'\r\nimport { connect } from 'react-redux'\r\n\r\n// Components\r\nimport TabPanel from '../Tabs/TabPanel'\r\n\r\nimport ValueStoryContainer from 'ValueStory/ValueStoryContainer'\r\n\r\nimport {\r\n\tfetchValueStoriesLoading,\r\n\tfetchValueStoriesSuccess,\r\n\tfetchValueStoriesFailure,\r\n} from 'actions/userActions'\r\n\r\nimport SharedValueStories from './SharedValueStories';\r\nimport DiscoveryVsSearch from '../Discovery/DiscoveryVsSearch'\r\n\r\nclass MyWorkContainer extends PureComponent {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = {\r\n\t\t\ttabId: 1,\r\n\t\t\tsharedValueStory: []\r\n\t\t}\r\n\r\n\t\tthis.dispatchTabChange = this.dispatchTabChange.bind(this)\r\n\t\tthis.intializePrioritiesTabs = this.intializePrioritiesTabs.bind(this)\r\n\t\tthis.closeVsListPopUp = this.closeVsListPopUp.bind(this)\r\n\r\n\t\tthis.hideModal = this.hideModal.bind(this)\r\n\t}\r\n\r\n\thideModal() {\r\n\t\tthis.props.hideModal('valueStory')\r\n\t}\r\n\r\n\tintializePrioritiesTabs() {\r\n\t\tconst tabs = [\r\n\t\t\t{\r\n\t\t\t\tid: 1,\r\n\t\t\t\tlabel: this.props.menu.valueStory.yourValueStories,\r\n\t\t\t\tcomponent: (\r\n
\r\n \r\n
\r\n {this.props.menu.valueStory.existingValueStories}
\r\n {/* \r\n ![](\"images/close_inactive.svg\")
\r\n
*/}\r\n \r\n \r\n {/*
\r\n \r\n
*/}\r\n {this.props.content.searchBy}*
\r\n \r\n option.label === this.state.selectedOption)}\r\n noOptionsMessage={() => null}\r\n onChange={(value) => this.handleSelectionChange(value.label)}\r\n options={this.state.searchOption}\r\n isSearchable={false}\r\n validateOn=\"change\" styles={dropdownColourStyles}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {/*
\r\n {this.props.content.capCompanyNameSearchText}
*/}\r\n \r\n this._handleKeyDown(e)} onChange={this.onSearchTextChangeEvent} value={this.state.searchText} />\r\n {/* */}\r\n {/* ![]()
this.search()} src={this.state.searchFlag ? \"/images/search_big_active.svg\" : \"/images/search_big_inactive.svg\"} /> */}\r\n
\r\n \r\n this.search()}\r\n disabled={this.props.user.loading}\r\n content={this.props.menu.valueStory.search}\r\n />\r\n
\r\n \r\n
\r\n \r\n {/* */}\r\n {//this.props.search.isLoading ?\r\n // */}\r\n
\r\n Loading...
:\r\n {this.state.message}
:\r\n {this.state.message}
}\r\n {/* \r\n this.callback()}\r\n modalStyle={autoHeightModalStyle}\r\n contentStyle={emailmodalContentStyle}>\r\n {EmailConfirmation()}\r\n \r\n
\r\n \r\n this.callback()}\r\n modalStyle={autoHeightModalStyle}\r\n contentStyle={emailmodalContentStyle}>\r\n {RequestDetails()}\r\n \r\n
\r\n {this.state.valueStories.length > 0 ?\r\n \r\n
: null\r\n }\r\n {/* \r\n \r\n {this.props.menu.valueStory.envelopText}\r\n
\r\n \r\n {this.props.menu.valueStory.envelopText}\r\n \r\n \r\n {this.props.menu.valueStory.requestDetailsText}\r\n
\r\n \r\n {this.props.menu.valueStory.requestDetailsText}\r\n \r\n
*/}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n\t\t\t\t\t
)\r\n\t\t\t}\r\n\t\t];\r\n\r\n\t\tthis.setState({\r\n\t\t\ttabs: tabs,\r\n\t\t\ttabId: 1\r\n\t\t})\r\n\t}\r\n\r\n\tcloseVsListPopUp() {\r\n\t\tthis.setState({ openVSList: !this.state.openVSList, vsLoad: '' })\r\n\t}\r\n\r\n\tdispatchTabChange(tabId) {\r\n\t\tthis.setState({\r\n\t\t\ttabId: tabId,\r\n\t\t\tnextButtonLabel: this.props.ui.next\r\n\t\t})\r\n\t}\r\n\r\n\tdispatchLastButtonClick(tabId) {\r\n\t\tthis.props.history.push(`/next-steps`)\r\n\t}\r\n\r\n\tcomponentWillMount() {\r\n\t\tthis.intializePrioritiesTabs()\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tui: state.content.ui,\r\n\t\tcontent: state.content,\r\n\t\tmenu: state.content.menu,\r\n\t\tuser: state.default,\r\n\t\tcontentData: state.content.discovery.form,\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tfetchValueStoriesLoading: (bool) => dispatch(fetchValueStoriesLoading(bool)),\r\n\t\tfetchValueStoriesSuccess: (valueStories) => dispatch(fetchValueStoriesSuccess(valueStories)),\r\n\t\tfetchValueStoriesFailure: (error) => dispatch(fetchValueStoriesFailure(error)),\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(MyWorkContainer)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport ReactAvatarEditor from \"react-avatar-editor\";\r\n\r\nclass ProfileEditor extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n image: \"avatar.png\",\r\n allowZoomOut: false,\r\n position: { x: 0.5, y: 0.5 },\r\n scale: 1,\r\n rotate: 0,\r\n borderRadius: 50,\r\n preview: null,\r\n width: 200,\r\n height: 200\r\n };\r\n }\r\n\r\n handleNewImage = e => {\r\n this.setState({ image: e.target.files[0] });\r\n };\r\n\r\n handleUpload = e => {\r\n if (this.editor) {\r\n \r\n // If you want the image resized to the canvas size (also a HTMLCanvasElement)\r\n const canvasScaled = this.editor.getImageScaledToCanvas().toDataURL();\r\n this.props.changeImage(canvasScaled);\r\n }\r\n //this.props.changeImage(this.state.image);\r\n this.props.hideModal(\"profileEditor\")\r\n }\r\n handleScale = e => {\r\n const scale = parseFloat(e.target.value);\r\n this.setState({ scale });\r\n };\r\n\r\n handleRotateLeft = e => {\r\n let rotate = this.state.rotate - 90;\r\n this.setState({rotate})\r\n }\r\n\r\n handleRotateRight = e => {\r\n let rotate = this.state.rotate + 90;\r\n this.setState({rotate})\r\n }\r\n\r\n handlePositionChange = position => {\r\n this.setState({ position });\r\n };\r\n\r\n setEditorRef = (editor) => this.editor = editor\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default ProfileEditor;","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n\r\n// Actions\r\nimport {\r\n\tchangePassword,\r\n\tchangePasswordSuccess,\r\n\tchangePasswordFailure\r\n}\r\n\tfrom 'actions/userActions'\r\n\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\n\r\n// Settings\r\nimport { validators } from 'Constants'\r\n\r\nconst styles = { width: '100%' }\r\n\r\nclass ChangePassword extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t\tthis.state = {\r\n\t\t\tSuccessMessage:''\r\n\t\t}\r\n\r\n\t\tthis.changePassword = this.changePassword.bind(this)\r\n\t\tthis.redirect = this.redirect.bind(this)\r\n\t}\r\n\r\n\tchangePassword(formValues) {\r\n\t\tlet values = Object.assign({}, formValues)\r\n\t\tvalues.Language = this.props.language.toUpperCase()\r\n\t\tvar content = this.props.content\r\n\t\tthis.props.changePassword(values)\r\n\t\t\t.then((result) => {\r\n\r\n\t\t\t\tif (result.status === 200) {\r\n\t\t\t\t\t//this.props.changePasswordSuccess(content['200'])\r\n\t\t\t\t\tthis.props.changePasswordSuccess('success')\r\n this.setState({SuccessMessage:result.data.Message})\r\n\t\t\t\t\t// Reset form\r\n\t\t\t\t\tthis.formDispatch(actions.reset('changePassword'))\r\n\r\n\t\t\t\t\t// Close modal\r\n\t\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\t\tthis.props.hideModal('changePassword')\r\n\t\t\t\t\t}, 500)\r\n\t\t\t\t\t\r\n\t\t\t\t\t//Redirect to login page\r\n\t\t\t\t\tthis.redirect()\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tvar failmsg = content[result.response.status]\r\n\t\t\t\t\tif (failmsg === undefined) {\r\n\t\t\t\t\t\tthis.props.changePasswordFailure(result.response.data.Message)\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse {\r\n\t\t\t\t\t\tthis.props.changePasswordFailure(failmsg)\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tthis.props.changePasswordFailure(error.response.data.Message)\r\n\t\t\t})\r\n\t}\r\n\r\n\tredirect() {\r\n\t\tif(this.props.props !=undefined)\r\n\t\t{\r\n\t\t\tthis.props.props.push(`/login`)\r\n\t\t}else{\r\n\t\tthis.props.history.push(`/login`)\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tuser: state.default,\r\n\t\tvalidation: state.content.validation,\r\n\t\tcontent: state.content.menu.changePassword,\r\n\t\tlanguage: state.language\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tchangePassword: (formValues) => dispatch(changePassword(formValues)),\r\n\t\tchangePasswordSuccess: (bool) => dispatch(changePasswordSuccess(bool)),\r\n\t\tchangePasswordFailure: (error) => dispatch(changePasswordFailure(error))\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ChangePassword)\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\n\r\n// Actions\r\nimport {\r\n fetchUserProfileData,\r\n fetchUserProfileLoading,\r\n fetchUserProfileSuccess,\r\n fetchUserProfileFailure,\r\n fetchUserProfileRoles,\r\n uploadUserProfilePic,\r\n updateUserName,\r\n fetchUserPercentileData,\r\n resetError,\r\n resetMessage,\r\n logoutUser,\r\n resetToken\r\n}\r\n from 'actions/userActions'\r\n\r\n// UI\r\nimport Modal from 'reboron/OutlineModal'\r\nimport Popup from \"reactjs-popup\"\r\nimport Button from 'UI/Button'\r\nimport classnames from 'classnames'\r\nimport FaCamera from 'react-icons/lib/fa/camera'\r\nimport { clearLocalStorage } from '../../utils/Utils'\r\n\r\n// Settings\r\nimport { routes, modalStyle, modalContentStyle, path, changeModalStyle, changeModalContentStyle } from 'Constants'\r\nimport ProfileEditor from './ProfileEditor'\r\nimport ChangePassword from '../Menu/ChangePassword'\r\n\r\nclass UserPopUp extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n open: false,\r\n vsCount: 0, //Value story count\r\n vssCount: 0, //Value story shared count\r\n date: null,\r\n flag: false,\r\n name: \"John Doe\",\r\n updatedName: \"John Doe\",\r\n image: null,\r\n disabled: true,\r\n roles: [],\r\n percentileRank: 0,\r\n powerFlag: false\r\n };\r\n this.openPopUp = this.openPopUp.bind(this);\r\n this.closePopUp = this.closePopUp.bind(this);\r\n this.showModal = this.showModal.bind(this);\r\n this.hideModal = this.hideModal.bind(this);\r\n this.openModal = this.openModal.bind(this);\r\n this.fetchUserProfileData = this.fetchUserProfileData.bind(this);\r\n this.setWrapperRef = this.setWrapperRef.bind(this);\r\n this.handleClickOutside = this.handleClickOutside.bind(this);\r\n this.handleEditName = this.handleEditName.bind(this);\r\n this.handleUpdateName = this.handleUpdateName.bind(this);\r\n this.handleUpdateNameCancel = this.handleUpdateNameCancel.bind(this);\r\n this.fetchUserPercentileData = this.fetchUserPercentileData.bind(this);\r\n this.handleLogout = this.handleLogout.bind(this);\r\n }\r\n\r\n openPopUp() {\r\n //this.setState({ open: true }, this.fetchUserProfileData);\r\n //this.showModal(\"profile\")\r\n this.setState({ flag: true }, this.fetchUserProfileData)\r\n }\r\n\r\n closePopUp() {\r\n //this.setState({ open: false });\r\n }\r\n\r\n openModal() {\r\n this.showModal(\"profileEditor\")\r\n }\r\n\r\n showModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n this.refs[action].hide()\r\n this.setState({ flag: true })\r\n }\r\n\r\n handleNameChange = e => {\r\n this.setState({ updatedName: e.target.value })\r\n }\r\n\r\n handleEditName = e => {\r\n this.setState({ disabled: !this.state.disabled })\r\n }\r\n\r\n handleUpdateName = e => {\r\n var obj = {\r\n email: this.props.user.user.Email,\r\n name: this.state.updatedName\r\n }\r\n this.props.updateUserName(obj)\r\n .then((result) => {\r\n if (result.status === 200) {\r\n this.props.fetchUserProfileSuccess(result.data.Message)\r\n this.setState({ name: this.state.updatedName, disabled: !this.state.disabled })\r\n }\r\n }).catch((error) => {\r\n if (error.response !== undefined && error.response.data !== undefined && error.response.data.Message !== undefined) {\r\n this.props.fetchUserProfileFailure(error.response.data.Message)\r\n }\r\n //this.props.fetchUserProfileFailure('API service is down. Please contact administrator.')\r\n\r\n })\r\n //this.setState({name: this.state.updatedName, disabled: !this.state.disabled})\r\n }\r\n\r\n handleUpdateNameCancel = e => {\r\n this.setState({ updatedName: this.state.name, disabled: !this.state.disabled })\r\n }\r\n\r\n changeImage = e => {\r\n //this.setState({image: e})\r\n let callProfileDataFetch = this.fetchUserProfileData;\r\n var source;\r\n var _this = this;\r\n source = btoa(e);\r\n var obj = {\r\n email: _this.props.user.user.Email,\r\n imgSrc: source\r\n }\r\n _this.props.uploadUserProfilePic(obj)\r\n .then((result) => {\r\n if (result.status === 200) {\r\n _this.props.fetchUserProfileSuccess(result.data.Message)\r\n //code pending...\r\n callProfileDataFetch()\r\n }\r\n }).catch((error) => {\r\n if (error.response !== undefined && error.response.data !== undefined && error.response.data.Message !== undefined) {\r\n _this.props.fetchUserProfileFailure(error.response.data.Message)\r\n }\r\n //_this.props.fetchUserProfileFailure('API service is down. Please contact administrator.')\r\n\r\n })\r\n\r\n }\r\n componentWillMount() {\r\n this.fetchUserProfileData()\r\n this.fetchUserPercentileData()\r\n }\r\n componentDidMount() {\r\n document.addEventListener('mousedown', this.handleClickOutside);\r\n //this.props.setClick(this.openPopUp);\r\n }\r\n\r\n componentWillUnmount() {\r\n document.removeEventListener('mousedown', this.handleClickOutside);\r\n\r\n this.props.resetError();\r\n this.props.resetMessage();\r\n }\r\n\r\n /**\r\n * Set the wrapper ref\r\n */\r\n setWrapperRef(node) {\r\n this.wrapperRef = node;\r\n }\r\n\r\n /**\r\n * Alert if clicked on outside of element\r\n */\r\n handleClickOutside(event) {\r\n if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {\r\n this.setState({\r\n flag: false\r\n })\r\n }\r\n }\r\n\r\n fetchUserPercentileData() {\r\n if (this.props.user.user != null) {\r\n this.props.fetchUserPercentileData(this.props.user.user.Id, this.props.user.user.Email)\r\n .then((result) => {\r\n if (result.status === 200) {\r\n this.props.fetchUserProfileSuccess(result.data.Message)\r\n let data = result.data;\r\n let user;\r\n if (data != null) {\r\n user = data.find(item => item.id == this.props.user.user.Id)\r\n }\r\n let percentileRank = user.Percent_Rank;\r\n let flag = false;\r\n if (percentileRank >= 0.9) {\r\n flag = true;\r\n }\r\n this.setState({ percentileRank: percentileRank, powerFlag: flag })\r\n }\r\n }).catch((error) => {\r\n if (error.response !== undefined && error.response.data !== undefined && error.response.data.Message !== undefined) {\r\n this.props.fetchUserProfileFailure(error.response.data.Message)\r\n }\r\n //this.props.fetchUserProfileFailure('API service is down. Please contact administrator.')\r\n\r\n })\r\n }\r\n }\r\n\r\n fetchUserProfileData() {\r\n if (this.props.user.user != null) {\r\n this.props.fetchUserProfileData(this.props.user.user.Id, this.props.user.user.Email)\r\n .then((result) => {\r\n if (result.status === 200) {\r\n this.props.fetchUserProfileSuccess(result.data.Message)\r\n this.props.fetchUserProfileRoles(result.data)\r\n let vsCount = result.data.Result.VsCount;\r\n let vssCount = result.data.Result.VssCount;\r\n let name = result.data.Result.Name;\r\n let Roles = result.data.Result.Roles['0'].join(\", \");\r\n let image = null;\r\n if (result.data.Result.ProfileImage != null) {\r\n image = atob(result.data.Result.ProfileImage);\r\n }\r\n\r\n const d = new Date(result.data.Result.JoinedDate)\r\n const dtf = new Intl.DateTimeFormat('en', { year: 'numeric', month: 'long', day: '2-digit' })\r\n const [{ value: mo }, , { value: da }, , { value: ye }] = dtf.formatToParts(d)\r\n let date = `${mo} ${da}, ${ye}`\r\n //console.log(`${da}-${mo}-${ye}`)\r\n //'current_user.png',\r\n this.setState({ vsCount: vsCount, vssCount: vssCount, date: date, image: image, name: name, roles: Roles, updatedName: name }, this.fetchUserPercentileData)\r\n }\r\n }).catch((error) => {\r\n if (error.response !== undefined && error.response.data !== undefined && error.response.data.Message !== undefined) {\r\n this.props.fetchUserProfileFailure(error.response.data.Message)\r\n }\r\n //this.props.fetchUserProfileFailure('API service is down. Please contact administrator.')\r\n\r\n })\r\n }\r\n }\r\n\r\n handleLogout() {\r\n this.props\r\n .logoutUser()\r\n .then(() => {\r\n this.props.resetToken()\r\n clearLocalStorage()\r\n\r\n // Redirect to home page\r\n window.location.href = path\r\n\r\n // this.props.resetValueStory()\r\n })\r\n .catch(() => {\r\n clearLocalStorage();\r\n // Redirect to home page\r\n window.location.href = path;\r\n })\r\n }\r\n\r\n render() {\r\n const applicationFeatures = this.props.user && this.props.user.user && this.props.user.user.applicationFeatures ? this.props.user.user.applicationFeatures : [];\r\n let showChangePassword = false;\r\n let showLogout = false;\r\n applicationFeatures.map((feature) => {\r\n if (feature[\"Action\"] === \"password\") showChangePassword = true;\r\n if (feature[\"Action\"] === \"logout\") showLogout = true;\r\n });\r\n return (\r\n \r\n\t\t\t\t\t this.changePassword(formValues)}\r\n\t\t\t\t\t\tgetDispatch={(dispatch) => this.formDispatch = dispatch}\r\n\t\t\t\t\t\tvalidators={{\r\n\t\t\t\t\t\t\t'': {\r\n\t\t\t\t\t\t\t\tpasswordsMatch: (vals) => vals.NewPassword === vals.ConfirmPassword,\r\n\t\t\t\t\t\t\t\tnewPasswordsMatch : (vals) => vals.OldPassword !== vals.NewPassword,\r\n\t\t\t\t\t\t\t\tcharMatch: (vals) => (vals.NewPassword.toLowerCase().indexOf(this.props.user.user.FirstName.toLowerCase())=== -1 && vals.NewPassword.toLowerCase().indexOf(this.props.user.user.LastName.toLowerCase())=== -1 \r\n\t\t\t\t\t\t\t\t\t&& vals.NewPassword.toLowerCase().indexOf(this.props.user.user.Company.toLowerCase()) === -1)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t
\r\n\t\t\t{this.props.content.title}
\r\n\t\t\t\t\t{this.props.content.description}
\r\n\t\t\t\t\t\t{this.props.user.error}
\r\n\t\t\t\t\t{this.state.SuccessMessage}
\r\n\t\t\t\t\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n user: state.default,\r\n content: state.content\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchUserProfileData: (id, email) => dispatch(fetchUserProfileData(id, email)),\r\n fetchUserProfileLoading: (bool) => dispatch(fetchUserProfileLoading(bool)),\r\n fetchUserProfileSuccess: (success) => dispatch(fetchUserProfileSuccess(success)),\r\n fetchUserProfileFailure: (error) => dispatch(fetchUserProfileFailure(error)),\r\n fetchUserProfileRoles: (success) => dispatch(fetchUserProfileRoles(success)),\r\n uploadUserProfilePic: (image) => dispatch(uploadUserProfilePic(image)),\r\n updateUserName: (obj) => dispatch(updateUserName(obj)),\r\n fetchUserPercentileData: (id, email) => dispatch(fetchUserPercentileData(id, email)),\r\n resetError: () => dispatch(resetError()),\r\n resetMessage: () => dispatch(resetMessage()),\r\n logoutUser: () => dispatch(logoutUser()),\r\n resetToken: () => dispatch(resetToken())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(UserPopUp);\r\n\r\n\r\n\r\n\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport Marquee from 'utils/marquee'\r\n// Components\r\nimport CaseStudy from 'CaseStudy/CaseStudyContainer'\r\nimport ValueStoryContainer from 'ValueStory/ValueStoryContainer'\r\nimport MyWorkContainer from 'ValueStory/MyWorkContainer'\r\nimport SharedValueStories from 'ValueStory/SharedValueStories';\r\n// UI\r\nimport Modal from 'reboron/OutlineModal'\r\nimport Popup from \"reactjs-popup\"\r\n\r\n// Utils\r\nimport { BreakLine, getCurrentSubLeverId, getCurrentLanguage } from 'utils/Utils'\r\nimport Linkify from 'react-linkify'\r\nimport classnames from 'classnames'\r\nimport {\r\n\tperiodicEmailConfirmation,\r\n\tperiodicEmailConfirmationFailure,\r\n\tperiodicEmailConfirmationSuccess\r\n}\r\n\tfrom 'actions/userActions'\r\n// Settings\r\nimport { routes, modalStyle, modalContentStyle, path, changeModalStyle, changeModalContentStyle, backdropStyle } from 'Constants'\r\nimport {\r\n\tpendingChanges,\r\n\tsaveKPIOnRedirect,\r\n\tisEnablementStrategyContainerPage,\r\n\tdeleteIntermediateKPIOnRedirect,\r\n\tisSpendParameterPage,\r\n saveSpendParametersOnRedirect\r\n} from 'actions/spendActions'\r\nimport {\r\n saveValueStoryOnRedirect,\r\n isValueStoryPage\r\n} from 'actions/discoveryActions'\r\nimport Button from 'UI/Button'\r\nimport UserPopUp from './UserPopUp'\r\n\r\nconst changeBackdropStyle = Object.assign({}, backdropStyle);\r\nchangeBackdropStyle.zIndex = '1050';\r\n\r\nconst alertModalStyle = Object.assign({}, changeModalStyle);\r\nalertModalStyle.zIndex = '1060';\r\nalertModalStyle.width = '50%';\r\n\r\nconst valueStoryModalStyle = Object.assign({}, modalStyle);\r\nvalueStoryModalStyle.width = \"60%\";\r\nvalueStoryModalStyle.maxWidth = \"1250px\";\r\nvalueStoryModalStyle.height = \"515px\";\r\n\r\nconst valueStoryContentModalStyle = Object.assign({}, modalContentStyle);\r\nvalueStoryContentModalStyle.paddingTop = \"20px\";\r\nvalueStoryContentModalStyle.paddingLeft = \"30px\";\r\nvalueStoryContentModalStyle.paddingRight = \"30px\";\r\nvalueStoryContentModalStyle.paddingBottom = \"10px\";\r\n\r\nconst Help = (props) =>\r\n\t\r\n \r\n \r\n \r\n
\r\n - \r\n
- {this.props.content.userProfile.Vs_Count} {this.state.vsCount} \r\n
- {this.props.content.userProfile.Vss_Count} {this.state.vssCount} \r\n
- {this.props.content.userProfile.User_Since} {this.state.date} \r\n
- {this.props.content.userProfile.Roles}{this.state.roles} \r\n
- this.showModal('changePassword')}>{this.props.content.userProfile.changePassword} : null\r\n }\r\n {\r\n showLogout ?
- {this.props.content.userProfile.logout} : null\r\n }\r\n
\r\n
\r\n \r\n 
\r\n {this.props.content.userProfile.Power_User}\r\n
\r\n \r\n {this.props.content.userProfile.Power_User}\r\n \r\n 
\r\n \r\n
\r\n {this.state.disabled ?\r\n \r\n
:\r\n {this.state.name}\r\n \r\n
\r\n\r\n\r\n
\r\n }\r\n\r\n \r\n
\r\n - \r\n
\r\n
\r\n \r\n
\r\n - \r\n {\r\n showChangePassword ?
\r\n \r\n this.hideModal(\"changePassword\")} />\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {/* \r\n
*/}\r\n \r\n
\r\n \r\n this.hideModal(\"profileEditor\")}\r\n color />\r\n
\r\n\r\n \r\n\t\t
\r\n\r\nconst SubLeverCalculationHelp = (props) =>\r\n\t{props.content.title}
\r\n\t\t{BreakLine(props.content.description)}
\r\n\t\r\n\t\t{props.content.map((data, i) =>\r\n\t\t\t
\r\n\r\nconst NavUI = (props) =>\r\n\t\r\n\t\t\t\t{data.title &&
\r\n\t\t)}\r\n\t{data.title}
}\r\n\t\t\t\t{data.listTitle}
\r\n\t\t\t\t- \r\n\t\t\t\t\t{data.listItems.map((text, j) =>\r\n\t\t\t\t\t\t
- {BreakLine(text)} \r\n\t\t\t\t\t)}\r\n\t\t\t\t
{data.sources.title}
}\r\n\t\t\t\t- \r\n\t\t\t\t\t
- {BreakLine(source)} \r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t
\r\n\t\t
\r\n\r\nconst LanguageSelector = (props) =>\r\n\t\r\n\t\t\t
\r\n\t\t\r\n\t\t\t\t![](\"/images/sap_logo.png\")
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t
\r\n\t\t\r\n\t\t\t
\r\n\t\t\r\n\t\t\t\t![](\"/images/avatar_logo.png\")
\r\n\t\t\t
\r\n\t\t\r\n\t\t\t\r\n\t\t\t
\r\n\t\r\n\t\t\t\t
\r\n\t\t\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t!props.noHelp ?\r\n\t\t\t\t\t\t\t() :\r\n\t\t\t\t\t\t\tnull\r\n\t\t\t\t\t}\r\n\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tprops.caseStudy ?\r\n\t\t\t\t\t\t\t() :\r\n\t\t\t\t\t\t\tnull\r\n\t\t\t\t\t}\r\n\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t{/*
\r\n\t\t\t{props.currentLang}
\r\n\t\t\t\r\n\t\t\t\t![](\"/images/dropdown_inactive.svg\")
\r\n\t\t\t
\r\n\t\t\r\n\t\t\r\n\t\t\t- \r\n\t\t\t{props.content.languageSelector.map((data, i) =>\r\n\t\t\t\t
- \r\n\t\t\t\t\t { props.handleLanguageSelection(data.text, data.lang) }} >\r\n\t\t\t\t\t\t{data.text}\r\n\t\t\t\t\t\r\n\t\t\t\t \r\n\t\t\t)}\r\n\t\t
- \r\n\r\n\t{ \r\n\t\tprops.content.map((data, i) =>\r\n\t\t (props.user !== null && props.user.applicationFeatures !== undefined && (Object.values(props.user.applicationFeatures).map((feature)=> feature.Action === data.action).indexOf(true) > -1) ) ?\r\n\t\t\t
- \r\n\t\t\t\t\r\n\t\t\t \r\n\t\t\t: null\r\n\t)}\r\n\t
- \r\n\t\t\t{props.content.map((data, i) =>\r\n\t\t\t\t
- \r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tprops.disabled && data.action === 'report' && userFeatures.indexOf(data.action) > -1 ?\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\t isSubMenuEnable(data ,userFeatures, props.userData) ? \r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t: null\r\n\t\t\t\t\t }\r\n\t\t\t\t\t { data.subItems !== undefined ? \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t: null\r\n\t\t\t\t\t}\r\n \r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t \r\n\t\t\t\r\n\t\t\t)}\r\n\t\t
\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t: \r\n\r\n\t\t\t\t\t) // return ends\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\treturn null;\r\n\t\t\t\t}\r\n\t\t\t});//object map end\r\n\t\t\treturn obj;\r\n\r\n\r\n\t\t};\r\n\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t{item[childitem].title}
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t _props.handleRadioButtonClick(e.target.value)}>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{Checked = false}\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tuser: state.default,\r\n\t\tvalidation: state.content.validation,\r\n\t\tsubLeverCalculationContent: state.content.subLeverCalculations.subLeverCalculation,\r\n\t\tspendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n\t\tWACC: state.valueStory.BusinessValueToYou[0].ValueDriver[3].SubLever[1].UserInput[4].UserInput,\r\n\t\tNPV: state.valueStory.BusinessValueFromSap[0].NPV,\r\n\t\tROI: state.valueStory.BusinessValueFromSap[0].ROIValue,\r\n\t\tROIData: state.valueStory.BusinessValueFromSap[0].ROI,\r\n\t\tvalueOfDelayedInvestment: state.valueStory.BusinessValueFromSap[0].ValueOfDelayedInvestment,\r\n\t\tpaybackPeriod: state.valueStory.BusinessValueFromSap[0].Payback,\r\n\t\tuserData: state.valueStory,\r\n\t\tbusinessValueFromSAPAribaData: state.valueStory.BusinessValueFromSap[0],\r\n\t\tcalculateROIData: state.valueStory.BusinessValueFromSap[0].ROI\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tupdateSubLeverRowValue: (value, subLeverId, rowNumber, valueType) => dispatch(updateSubLeverRowValue(value, subLeverId, rowNumber, valueType)),\r\n\t\tsetEstimatedAnnualValue: (value, subLeverId) => dispatch(setEstimatedAnnualValue(value, subLeverId)),\r\n\t\tupdateTotalBenefit: (value, year) => dispatch(updateTotalBenefit(value, year)),\r\n\t\tautoSave: (ValueStory, isBusinessCaseAccess) => dispatch(autoSave(ValueStory, isBusinessCaseAccess)),\r\n\t\tresetMessage: () => dispatch(resetMessage()),\r\n\t\tresetError: () => dispatch(resetError())\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Report)\r\n\r\n\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\n// Utils\r\nimport Linkify from 'react-linkify'\r\nimport { BreakLine } from 'utils/Utils'\r\n\r\nconst About = (props) =>\r\n\t{this.props.content.title}
\r\n\t\t\t\t{this.props.content.description}
\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t{this.state.enablementInsightFlag ? displayAllReports(this.props.allReports.enablementReportTypes, this.props) : displayAllReports(this.props.allReports.reportTypes, this.props)}\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t
\r\n\r\nexport default About\r\n\r\nAbout.propTypes = {\r\n\tcontent: PropTypes.shape({\r\n\t\ttitle: PropTypes.string.isRequired,\r\n\t\tdescription: PropTypes.string.isRequired\r\n\t})\r\n}\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n\r\n// Actions\r\nimport {\r\n\tautoSave,\r\n\tautoSaveSuccess,\r\n\tautoSaveFailure,\r\n\tresetError,\r\n\tsaveAs,\r\n\tsaveAsSuccess,\r\n\tsaveAsFailure,\r\n\topenValueStory,\r\n\topenValueStoryFailure,\r\n\tsaveAsLoading\r\n}\r\n\tfrom 'actions/userActions'\r\n\r\n\r\n\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nimport { valueStoryFetchDataSuccess } from 'actions/fetchValueStory'\r\n\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\n\r\n// Settings\r\nimport { validators, routes } from 'Constants'\r\n\r\n// Utils\r\nimport { isDuplicate } from 'utils/Utils'\r\n\r\nimport {changeModalStyle, changeModalContentStyle } from 'Constants'\r\n\r\nconst confirmationMessageModalStyle = Object.assign({}, changeModalStyle);\r\nconfirmationMessageModalStyle.width = \"40%\";\r\n//confirmationMessageModalStyle.height = \"450px\";\r\n\r\nclass SaveAs extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.save = this.save.bind(this)\r\n\t\tthis.saveAs = this.saveAs.bind(this)\r\n\t\tthis.showModal = this.showModal.bind(this)\r\n\t\tthis.hideModal = this.hideModal.bind(this)\r\n\r\n\t\tthis.redirect = this.redirect.bind(this)\r\n\t\tthis.actions = this.getApplicationFeatureActions();\r\n\t}\r\n\r\n\tshowModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n\t\tthis.refs[action].hide()\r\n }\r\n\r\n\tcomponentDidMount() {\r\n\t\tthis.props.resetError()\r\n\t\tthis.formDispatch(actions.reset('saveAs.ValueStoryName'))\r\n\t}\r\n\r\n\tsave(formValues) {\r\n\t\tvar content = this.props.content;\r\n\t\tlet token = localStorage.getItem('jwtToken')\r\n\t\tthis.props.saveAsLoading(true);\r\n\t\tlet values = Object.assign({}, formValues)\r\n\t\tvalues.Language = this.props.language.toUpperCase()\r\n\r\n\t\tif (this.props.user.user && token) {\r\n\t\t\tthis.props.autoSave(this.props.userData, this.props.user.userprofile.Roles[0].indexOf(\"BusinessCaseRole\") > -1)\r\n\t\t\t\t.then((result) => {\r\n\t\t\t\t\tthis.props.autoSaveSuccess(result.data.Message)\r\n\t\t\t\t\tthis.saveAs(values)\r\n\t\t\t\t})\r\n\t\t\t\t.catch((error) => {\r\n\t\t\t\t\t//console.log('saveAs error', error)\r\n\t\t\t\t\tvar msg = content[error.response.status]\r\n\t\t\t\t\tif (msg === undefined) {\r\n\t\t\t\t\t\tthis.props.openValueStoryFailure(error.response.data.Message)\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse {\r\n\t\t\t\t\t\tthis.props.openValueStoryFailure(msg)\r\n\t\t\t\t\t}\r\n\t\t\t\t\t//this.props.autoSaveFailure(error.response.data.Message)\r\n\r\n\t\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\t\tthis.props.resetError()\r\n\t\t\t\t\t}, 1000)\r\n\t\t\t\t})\r\n\t\t}\r\n\t}\r\n\r\n\tsaveAs(values) {\r\n\t\tvar content = this.props.content;\r\n\t\tthis.props.saveAs(values, values.VSId)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tif (response.status === 200) {\r\n\t\t\t\t\t// fetch newly created value story\r\n\t\t\t\t\tthis.props.openValueStory(response.data.Result.VSId, this.props.user.user.Id)\r\n\t\t\t\t\t\t.then((response) => {\r\n\t\t\t\t\t\t\tthis.props.saveAsSuccess()\r\n\t\t\t\t\t\t\t// Replace existing value story with newly created value story data in store\r\n\r\n\t\t\t\t\t\t\tthis.props.valueStoryFetchDataSuccess(response.data.Result)\r\n\t\t\t\t\t\t\t// Reset form\r\n\t\t\t\t\t\t\tthis.formDispatch(actions.reset('saveAs'))\r\n\t\t\t\t\t\t\tthis.props.hideModal('saveAs')\t\r\n\t\t\t\t\t\t\tthis.redirect()\t\r\n\t\t\t\t\t\t\t// Hide modal\r\n\t\t\t\t\t\t\t//this.showModal('confirmation')\r\n\t\t\t\t\t\t}).catch((error) => {\r\n\t\t\t\t\t\t\t//console.log('saveAs error', error)\r\n\t\t\t\t\t\t\tvar msg = content[error.response.status]\r\n\t\t\t\t\t\t\tif (msg === undefined) {\r\n\t\t\t\t\t\t\t\tthis.props.openValueStoryFailure(error.response.data.Message)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\tthis.props.openValueStoryFailure(msg)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\t\t\t\tthis.props.resetError()\r\n\t\t\t\t\t\t\t}, 1000)\r\n\t\t\t\t\t\t})\r\n\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tvar httpStattus = response.response.status;\r\n\t\t\t\t\tvar failMsg = content[httpStattus]\r\n\t\t\t\t\tif (failMsg !== undefined) {\r\n\r\n\t\t\t\t\t\tthis.props.openValueStoryFailure(failMsg)\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse {\r\n\t\t\t\t\t\tthis.props.openValueStoryFailure(response.response.data.Message)\r\n\r\n\t\t\t\t\t}\r\n\t\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\t\tthis.props.resetError()\r\n\t\t\t\t\t}, 1000)\r\n\t\t\t\t}\r\n\r\n\t\t\t}).catch((error) => {\r\n\r\n\t\t\t\tvar msg = content[error.response.status]\r\n\t\t\t\tif (msg === undefined) {\r\n\t\t\t\t\tthis.props.openValueStoryFailure(error.response.data.Message)\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.props.openValueStoryFailure(msg)\r\n\t\t\t\t}\r\n\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\tthis.props.resetError()\r\n\t\t\t\t}, 1000)\r\n\t\t\t})\r\n\t}\r\n\r\n\tredirect() {\r\n\t\tif(this.actions.indexOf(routes.yourSpend)> -1)\r\n\t\t{\r\n this.props.history.push(this.actions.indexOf(routes.businessValue)> -1 ? `/discovery` : `/yourSpend`)\t\t\r\n\t\t}\r\n\t\telse{\r\n\t\t\tthis.props.history.push(`/discovery`)\r\n\t\t}\r\n\t\t\r\n\t}\r\n\r\n\tgetApplicationFeatureActions() {\r\n\t\tlet actions = [];\r\n\t\tlet applicationFeatures = this.props.user && this.props.user.user && this.props.user.user.applicationFeatures ? this.props.user.user.applicationFeatures : [];\r\n\t\tapplicationFeatures.map(applicationFeat => {\r\n\t\t\tactions.push(applicationFeat.Action);\r\n\t\t})\r\n\t\treturn actions;\r\n\t}\r\n\r\n\trender() {\r\n\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t
\r\n\t\r\n\t\t\t\t
\r\n\t\t{props.content.title}
\r\n\t\t\t\t{BreakLine(props.content.description)}
\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tcontent: state.content.menu.saveAs,\r\n\t\tuser: state.default,\r\n\t\tuserData: state.valueStory,\r\n\t\tvalidation: state.content.validation\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tautoSave: (valueStory, isBusinessCaseAccess) => dispatch(autoSave(valueStory, isBusinessCaseAccess)),\r\n\t\tautoSaveSuccess: (message) => dispatch(autoSaveSuccess(message)),\r\n\t\tautoSaveFailure: (error) => dispatch(autoSaveFailure(error)),\r\n\t\tresetError: () => dispatch(resetError()),\r\n\t\tsaveAs: (formValues, id) => dispatch(saveAs(formValues, id)),\r\n\t\tsaveAsSuccess: () => dispatch(saveAsSuccess()),\r\n\t\tsaveAsFailure: (error) => dispatch(saveAsFailure(error)),\r\n\t\tvalueStoryFetchDataSuccess: (valueStory) => dispatch(valueStoryFetchDataSuccess(valueStory)),\r\n\t\topenValueStory: (VSId, Id) => dispatch(openValueStory(VSId, Id)),\r\n\t\topenValueStoryFailure: (error) => dispatch(openValueStoryFailure(error)),\r\n\t\tsaveAsLoading: (bool) => dispatch(saveAsLoading(bool))\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SaveAs)\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport moment from 'moment'\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\n// Settings\r\nimport { validators } from 'Constants'\r\n\r\n// Actions\r\nimport {\r\n domainDetails,\r\n domainDetailsSuccess,\r\n domainDetailsFailure,\r\n deleteDomain,\r\n addDomain,\r\n updateDomain\r\n}\r\n from 'actions/userActions'\r\n\r\n\r\n\r\nclass DomainDetails extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { filterText: \"\", message: \"\" }\r\n this.state.domainDetails = [\r\n {\r\n id: 0,\r\n name: '',\r\n isEditing: false\r\n }]\r\n this.domainDetails = this.domainDetails.bind(this)\r\n this.addNewDomain = this.addNewDomain.bind(this)\r\n this.handleUserInput = this.handleUserInput.bind(this)\r\n\r\n }\r\n\r\n domainDetails() {\r\n this.props.domainDetails()\r\n .then((results) => {\r\n this.setState({ domainDetails: results.data.Result });\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.domainDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.props.domainDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n\r\n componentWillMount() {\r\n this.domainDetails()\r\n }\r\n\r\n handleUserInput(filterText) {\r\n this.setState({ filterText: filterText.target.value.toLowerCase() });\r\n };\r\n\r\n handleRowDel(domainDetail) {\r\n const result = window.confirm('Do you want to delete the domain ' + domainDetail.name + ' ? ');\r\n if (result) {\r\n var index = this.state.domainDetails.map(function (x) { return x.id; }).indexOf(domainDetail.id);\r\n if (index === -1) {\r\n return false;\r\n }\r\n this.props.deleteDomain(domainDetail.id)\r\n .then((results) => {\r\n this.setState({ message: results.data.Message });\r\n this.state.domainDetails.splice(index, 1);\r\n this.setState(this.state.domainDetails);\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.domainDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.props.domainDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n };\r\n\r\n handleAddEvent(evt) {\r\n var domainDetail = {\r\n name: evt\r\n }\r\n this.state.domainDetails.push(domainDetail);\r\n this.setState(this.state.domainDetails);\r\n }\r\n\r\n handleEditEvent(evt) {\r\n var item = {\r\n name: evt.name,\r\n id: evt.id,\r\n isEditing: evt.isEditing\r\n };\r\n var old_domainDetails = this.state.domainDetails.slice();\r\n var newdomainDetails = old_domainDetails.map(function (testdomainDetails) {\r\n for (var key in testdomainDetails) {\r\n if (testdomainDetails.id == item.id) {\r\n testdomainDetails.name = item.name;\r\n testdomainDetails.isEditing = !item.isEditing;\r\n\r\n if (evt.UpdatedBy !== undefined) {\r\n testdomainDetails.UpdatedBy = evt.UpdatedBy;\r\n testdomainDetails.UpdatedOn = evt.UpdatedOn;\r\n }\r\n break;\r\n }\r\n }\r\n return testdomainDetails;\r\n });\r\n\r\n this.setState({ domainDetails: newdomainDetails });\r\n\r\n }\r\n\r\n handleCancelEvent(originalDetails) {\r\n var item = {\r\n id: originalDetails[0].id,\r\n name: originalDetails[0].name\r\n };\r\n\r\n var old_domainDetails = this.state.domainDetails.slice();\r\n var newdomainDetails = old_domainDetails.map(function (testdomainDetails) {\r\n for (var key in testdomainDetails) {\r\n if (testdomainDetails.id === item.id) {\r\n testdomainDetails[key] = item.name;\r\n testdomainDetails[\"isEditing\"] = false;\r\n break;\r\n }\r\n }\r\n return testdomainDetails;\r\n });\r\n this.setState({ domainDetails: newdomainDetails });\r\n\r\n };\r\n\r\n addNewDomain(formValue) {\r\n //this.props.resetError();\r\n var domainDetail = {\r\n name: formValue.DomainName.trim()\r\n }\r\n\r\n this.props.addDomain(domainDetail).then((results) => {\r\n var item = {\r\n name: results.data.Result.WDomains,\r\n id: results.data.Result.WDId,\r\n isEditing: false,\r\n AddedBy: results.data.Result.AddedBy,\r\n AddedOn: results.data.Result.AddedOn\r\n\r\n };\r\n this.setState({ message: results.data.Message }); //this.state.message \r\n // Reset form\r\n this.formDispatch(actions.reset('addDomain'))\r\n this.state.domainDetails.push(item)\r\n this.setState(this.state.domainDetails)\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.domainDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.props.domainDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n\r\n handleDomainDetailTable(evt) {\r\n var item = {\r\n name: evt.target.name,\r\n id: evt.target.id,\r\n value: evt.target.value\r\n };\r\n\r\n var old_domainDetails = this.state.old_domainDetails.slice();\r\n if (old_domainDetails.length === 0) {\r\n old_domainDetails = this.state.domainDetails.slice();\r\n this.setState({ old_domainDetails: old_domainDetails });\r\n }\r\n let testOfObjects = old_domainDetails;\r\n var newdomainDetails = testOfObjects.map(function (testdomainDetails) {\r\n for (var key in testdomainDetails) {\r\n if (testdomainDetails.id === item.id) {\r\n testdomainDetails[key] = item.name;\r\n testdomainDetails[\"isEditing\"] = false;\r\n break;\r\n }\r\n }\r\n return testdomainDetails;\r\n });\r\n\r\n this.setState({ domainDetails: newdomainDetails });\r\n\r\n };\r\n\r\n handleUpdateEvent(updateDetails) {\r\n if (updateDetails.length > 0 && this.isDuplicate(updateDetails[0].name)) {\r\n var item = {\r\n id: updateDetails[0].id,\r\n name: updateDetails[0].name,\r\n isEditing: true,\r\n UpdatedBy: '',\r\n UpdatedOn: Date.now\r\n };\r\n\r\n this.props.updateDomain(item)\r\n .then((results) => {\r\n if (results.status === 200) {\r\n item.UpdatedBy = results.data.Result.UpdatedBy;\r\n item.UpdatedOn = results.data.Result.UpdatedOn;\r\n this.setState({ message: results.data.Message });\r\n this.handleEditEvent(item)\r\n }\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.domainDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.props.domainDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n }\r\n\r\n isDuplicate(vals) {\r\n var result = this.state.domainDetails.find(domain => domain.name === vals.trim()) === undefined\r\n if (result) {\r\n return result;\r\n }\r\n else {\r\n return result;\r\n }\r\n }\r\n \r\n componentWillUnmount() {\r\n this.formDispatch(actions.reset('addDomain'))\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t this.formDispatch = dispatch}\r\n\t\t\t\t\t\t\tonSubmit={(values) => this.save(values)}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t isDuplicate(this.props.user.valueStories, vals, undefined) }}\r\n\t\t\t\t\t\t\t\tvalidateOn=\"blur\"\r\n\t\t\t\t\t\t\t\tstyle={{ width: '100%' }}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t
\r\n\t\t\t{this.props.content.title}
\r\n\t\t\t\t\t\t{this.props.content.description}
\r\n\t\t\t\t\t\t{this.props.user.error}
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{this.props.content.confirmationMessage}\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t this.hideModal(\"confirmation\")}\r\n\t\t\t\t\t\t\t\t\t\t\t\tcolor /> \r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nclass SearchBar extends React.Component {\r\n handleChange(event) {\r\n this.props.onUserInput(event);\r\n }\r\n render() {\r\n return (\r\n {this.props.content.title}
\r\n \r\n {this.state.message}
\r\n {(this.state.domainDetails.length > 1) ?\r\n \r\n
: \"\"}\r\n\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass DomainDetailTable extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n }\r\n render() {\r\n var onDomainDetailTableUpdate = this.props.onDomainTableUpdate;\r\n var rowDel = this.props.onRowDel;\r\n var rowEdit = this.props.onRowEdit;\r\n var rowCancel = this.props.onRowCancel;\r\n var rowUpdate = this.props.onRowUpdate;\r\n var filterText = this.props.filterText;\r\n var isEditing = this.props.isEditing;\r\n var validation = this.props.validation;\r\n var isDuplicate = this.props.isDuplicate;\r\n var domainDetail = this.props.domainDetails.map(function (domainDetail) {\r\n if (domainDetail.name.toLowerCase().indexOf(filterText) === -1) {\r\n return;\r\n }\r\n return (\r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass DomainDetailRow extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n }\r\n onDelEvent() {\r\n this.props.onDelEvent(this.props.domainDetail);\r\n }\r\n onEditEvent() {\r\n this.props.onEditEvent(this.props.domainDetail);\r\n }\r\n\r\n onDomainDetailTableUpdate() {\r\n this.props.onDomainDetailTableUpdate()\r\n }\r\n\r\n render() {\r\n return (\r\n this.props.domainDetail.isEditing ?\r\n | Domain Name | \r\nAdded By/On | \r\nUpdated By/On | \r\n\r\n | \r\n |
|---|
\r\n {moment(this.props.domainDetail.AddedOn).format('L')}\r\n
\r\n {moment(this.props.domainDetail.UpdatedOn).format('L')} \r\n
\r\n {moment(this.props.domainDetail.AddedOn).format('L')}\r\n
\r\n {moment(this.props.domainDetail.UpdatedOn).format('L')} \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nclass SearchBar extends React.Component {\r\n handleChange(event) {\r\n this.props.onUserInput(event);\r\n }\r\n render() {\r\n return (\r\n {this.props.content.title}
\r\n \r\n {this.state.message}
\r\n {(this.state.domainDetails.length > 0) ?\r\n \r\n
: \"\"}\r\n\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass DomainDetailTable extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n }\r\n render() {\r\n var onDomainDetailTableUpdate = this.props.onDomainTableUpdate;\r\n var rowDel = this.props.onRowDel;\r\n var rowEdit = this.props.onRowEdit;\r\n var rowCancel = this.props.onRowCancel;\r\n var rowUpdate = this.props.onRowUpdate;\r\n var filterText = this.props.filterText;\r\n var isEditing = this.props.isEditing;\r\n var validation = this.props.validation;\r\n var isDuplicate = this.props.isDuplicate;\r\n var domainDetail = this.props.domainDetails.map(function (domainDetail) {\r\n if (domainDetail.name.toLowerCase().indexOf(filterText) === -1) {\r\n return;\r\n }\r\n return (\r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass DomainDetailRow extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n }\r\n onDelEvent() {\r\n this.props.onDelEvent(this.props.domainDetail);\r\n }\r\n onEditEvent() {\r\n this.props.onEditEvent(this.props.domainDetail);\r\n }\r\n\r\n onDomainDetailTableUpdate() {\r\n this.props.onDomainDetailTableUpdate()\r\n }\r\n\r\n render() {\r\n return (\r\n this.props.domainDetail.isEditing ?\r\n | Domain Name | \r\nAdded By/On | \r\nUpdated By/On | \r\n\r\n | \r\n |
|---|
\r\n {moment(this.props.domainDetail.AddedOn).format('L')}\r\n
\r\n {moment(this.props.domainDetail.UpdatedOn).format('L')} \r\n
\r\n {moment(this.props.domainDetail.AddedOn).format('L')}\r\n
\r\n {moment(this.props.domainDetail.UpdatedOn).format('L')} \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nTabPanelGeneric.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n tabs: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n label: PropTypes.string.isRequired,\r\n id: PropTypes.number.isRequired,\r\n component: PropTypes.object.isRequired,\r\n }).isRequired)\r\n .isRequired,\r\n};\r\n\r\nTabPanelGeneric.defaultProps = {\r\n\tisLoading: false\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n \r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n pendingChanges: changes => dispatch(pendingChanges(changes))\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(TabPanelGeneric));","import React, { Component } from 'react'\r\nimport { Link } from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\n\r\nimport AllowedDomain from 'components/Admin/AllowedDomain'\r\nimport BlockedDomain from 'components/Admin/BlockedDomain'\r\n// Components\r\nimport TabPanelGeneric from '../Tabs/TabPanelGeneric'\r\n\r\nimport {\r\n\tvalueStoryCurrentMenu,\r\n\tshowValueStoryMenu\r\n} from 'actions/userActions'\r\nimport {\r\n\tpendingChanges\r\n} from 'actions/spendActions'\r\nimport { UpdateComment } from 'actions/spendActions'\r\nimport { networkInterfaces } from 'os';\r\n\r\nimport {\r\n\tsetValueStoryDmciDetails,\r\n\tsetResultSummaryDetails,\r\n\tsetTopDetails,\r\n\tresetError,\r\n} from 'actions/spendActions'\r\n\r\nimport {\r\n\tgetCurrentLanguage\r\n} from 'utils/Utils'\r\n\r\n\r\nclass DomainManager extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = {\r\n\t\t\ttabId: 1,\r\n\t\t\tnextButtonLabel: props.ui.next,\r\n\t\t\tlanguage: '',\r\n\t\t\ttabs: [],\r\n\t\t\tpendingChanges: false\r\n\t\t}\r\n\r\n\t\tthis.dispatchTabChange = this.dispatchTabChange.bind(this)\r\n\t\tthis.handleNextButton = this.handleNextButton.bind(this)\r\n\t\tthis.pendingChanges = this.pendingChanges.bind(this)\r\n\t}\r\n\r\n\tcomponentWillReceiveProps(nextProps) {\r\n\t\t//if (this.props.spendDetails.currentActiveRequest !== nextProps.spendDetails.currentActiveRequest) {\r\n\t\tthis.intializeTabs();\r\n\t\t//}\r\n\t\tlet language = getCurrentLanguage();\r\n\t\tif(language != this.state.language){\t\t\t\r\n\t\t\tthis.dispatchTabChange(this.state.tabId)\r\n\t\t\t//this.setState({language: language})\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentWillUnmount(){\r\n\t\tthis.props.resetError();\r\n\t}\r\n\r\n\tintializeTabs() {\r\n\t\tconst tabs = [\r\n\t\t\t{\r\n\t\t\t\tid: 1,\r\n\t\t\t\tlabel: this.props.domainLang.allowed,\r\n\t\t\t\tcomponent: (\r\n
\r\n {this.props.tabs[this.props.tabs.length - 1].id !== activeTab ? \r\n \r\n \r\n \r\n {\r\n this.props.tabs.map((tab, i) => {\r\n var disabledTab = isLoading && activeTab === tab.id ? false : isLoading;\r\n return ( \r\n {\r\n this.props.tabs.map(tab => (\r\n activeTab === tab.id\r\n ? {tab.component} \r\n : null\r\n ))\r\n }\r\n
\r\n \r\n
: '' }\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n {this.props.tabMessage}\r\n
\r\n \r\n
\r\n \r\n this.closeModal(\"terms\")}\r\n color /> \r\n this.hideModal(\"terms\")}\r\n color /> \r\n
\r\n \r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tui: state.content.ui,\r\n\t\tcontent: state.content,\r\n\t\tspendDetails: state.spendDetails,\r\n\t\tpendingChanges: state.detailedFileChanges.changes,\r\n\t\tuserData: state.valueStory,\r\n\t\tnewValueStory: state.isNewValueStory,\r\n\t\tdomainLang : state.content.menu.DomainManager[0]\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tvalueStoryCurrentMenu: (menuItem) => dispatch(valueStoryCurrentMenu(menuItem)),\r\n\t\tshowValueStoryMenu: (menuItem) => dispatch(showValueStoryMenu(menuItem)),\r\n\t\tUpdateComment: requestDetails => dispatch(UpdateComment(requestDetails)),\r\n\t\tsetValueStoryDmciDetails: (data) => dispatch(setValueStoryDmciDetails(data)),\r\n\t\tsetResultSummaryDetails: (data) => dispatch(setResultSummaryDetails(data)),\r\n\t\tsetTopDetails: (data) => dispatch(setTopDetails(data)),\r\n\t\tresetError: error => dispatch(resetError(error))\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DomainManager)","\r\nimport axios from 'axios'\r\nimport { env, ROOT_URL } from 'Constants'\r\n\r\n//user manager\r\nexport const USER_MANAGER_LOADING = 'USER_MANAGER_LOADING';\r\nexport const USER_MANAGER_SUCCESS = 'USER_MANAGER_SUCCESS';\r\nexport const USER_MANAGER_FAILURE = 'USER_MANAGER_FAILURE';\r\nexport const RESET_ERROR = 'RESET_ERROR';\r\n\r\n//role manager\r\nexport const ROLE_MANAGER_LOADING = 'ROLE_MANAGER_LOADING';\r\nexport const ROLE_MANAGER_SUCCESS = 'ROLE_MANAGER_SUCCESS';\r\nexport const ROLE_MANAGER_FAILURE = 'ROLE_MANAGER_FAILURE';\r\n\r\n//CapIqUser manager\r\nexport const CAPIQUSER_MANAGER_LOADING = 'CAPIQUSER_MANAGER_LOADING';\r\nexport const CAPIQUSER_MANAGER_SUCCESS = 'CAPIQUSER_MANAGER_SUCCESS';\r\nexport const CAPIQUSER_MANAGER_FAILURE = 'CAPIQUSER_MANAGER_FAILURE';\r\n\r\nexport function resetError() {\r\n return {\r\n type: RESET_ERROR,\r\n payload: null\r\n };\r\n}\r\n\r\nexport function userManagerLoading(bool) {\r\n return {\r\n type: USER_MANAGER_LOADING,\r\n isLoading: bool\r\n }\r\n}\r\n\r\nexport function userManagerSuccess(message) {\r\n return {\r\n type: USER_MANAGER_SUCCESS,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function userManagerFailure(error) {\r\n return {\r\n type: USER_MANAGER_FAILURE,\r\n payload: error\r\n };\r\n}\r\n\r\nexport function roleManagerLoading(bool) {\r\n return {\r\n type: ROLE_MANAGER_LOADING,\r\n isLoading: bool\r\n }\r\n}\r\n\r\nexport function roleManagerSuccess(message) {\r\n return {\r\n type: ROLE_MANAGER_SUCCESS,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function roleManagerFailure(error) {\r\n return {\r\n type: ROLE_MANAGER_FAILURE,\r\n payload: error\r\n };\r\n}\r\n\r\nexport function capIqUserManagerLoading(bool) {\r\n return {\r\n type: CAPIQUSER_MANAGER_LOADING,\r\n isLoading: bool\r\n }\r\n}\r\n\r\nexport function capIqUserManagerSuccess(message) {\r\n return {\r\n type: CAPIQUSER_MANAGER_SUCCESS,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function capIqUserManagerFailure(error) {\r\n return {\r\n type: CAPIQUSER_MANAGER_FAILURE,\r\n payload: error\r\n };\r\n}\r\n\r\nexport function GetAllRoles() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/RoleAndPermission/GetAllRoles`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function fetchUserRoles() {\r\n return (dispatch) => {\r\n dispatch(userManagerLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/RoleAndPermission/FetchUserRoles`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function addUserRole(formValues) {\r\n return (dispatch) => {\r\n dispatch(userManagerLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: formValues,\r\n url: `${ROOT_URL}/RoleAndPermission/AddUserRole`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function addCustomerRole(formValues) {\r\n return (dispatch) => {\r\n dispatch(userManagerLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: formValues,\r\n url: `${ROOT_URL}/RoleAndPermission/AddUpdateCustomerRole`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function deleteCustomerRole(formValues) {\r\n return (dispatch) => {\r\n dispatch(userManagerLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: formValues,\r\n url: `${ROOT_URL}/RoleAndPermission/DeleteCustomer`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function deleteUserRole(formValues) {\r\n return (dispatch) => {\r\n dispatch(userManagerLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: formValues,\r\n url: `${ROOT_URL}/RoleAndPermission/DeleteUserRole`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function updateUserRole(formValues) {\r\n return (dispatch) => {\r\n dispatch(userManagerLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: formValues,\r\n url: `${ROOT_URL}/RoleAndPermission/UpdateUserRole`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getAllFeatures() {\r\n return (dispatch) => {\r\n dispatch(userManagerLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/RoleAndPermission/GetAllFeatures`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function fetchRoleFeatures() {\r\n return (dispatch) => {\r\n dispatch(userManagerLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/RoleAndPermission/FetchRoleFeatures`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function fetchCustomerRoles() {\r\n return (dispatch) => {\r\n setTimeout(() => { dispatch(userManagerLoading(true)) }, 1500);\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/RoleAndPermission/FetchCustomerRoles`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function addUpdateRoleAndFeatures(formValues) {\r\n return (dispatch) => {\r\n dispatch(roleManagerLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: formValues,\r\n url: `${ROOT_URL}/RoleAndPermission/AddUpdateRoleAndFeatures`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function deleteRoleAndFeatures(formValues) {\r\n return (dispatch) => {\r\n dispatch(roleManagerLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: formValues,\r\n url: `${ROOT_URL}/RoleAndPermission/DeleteRoleAndFeatures`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\n\r\nexport function getAllCapIqUsers() {\r\n return (dispatch) => {\r\n dispatch(roleManagerLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/RoleAndPermission/GetAllCapIqUsers`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\n\r\nexport function addCapIqUser(formValues) {\r\n return (dispatch) => {\r\n dispatch(roleManagerLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: formValues,\r\n url: `${ROOT_URL}/RoleAndPermission/AddCapIqUser`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\n\r\nexport function deleteCapIqUser(formValues) {\r\n return (dispatch) => {\r\n dispatch(roleManagerLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: formValues,\r\n url: `${ROOT_URL}/RoleAndPermission/DeleteCapIqUser`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function submitSpendColumnsForRole(spendRole) {\r\n return (dispatch) => {\r\n dispatch(userManagerLoading(true));\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/RoleAndPermission/SubmitSpendColumnsForRole`,\r\n data: spendRole,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(userManagerLoading(false));\r\n return response\r\n })\r\n }\r\n}\r\n\r\n\r\nexport function GetSpendColumnsForRole() {\r\n return (dispatch) => {\r\n dispatch(userManagerLoading(true));\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/RoleAndPermission/GetSpendColumnsForRole`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(userManagerLoading(false));\r\n return response\r\n })\r\n }\r\n}\r\n\r\n\r\nexport function DeleteSpendColumnsForRole(spendRole) {\r\n return (dispatch) => {\r\n dispatch(userManagerLoading(true));\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/RoleAndPermission/DeleteSpendColumnsForRole?RoleId=${spendRole}`,\r\n data: spendRole,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(userManagerLoading(false));\r\n return response\r\n })\r\n }\r\n}","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport moment from 'moment'\r\n// Actions\r\nimport {\r\n\tuserManagerFailure,\r\n\tuserManagerSuccess,\r\n\tfetchUserRoles,\r\n\taddUserRole,\r\n\tdeleteUserRole,\r\n\tupdateUserRole,\t\r\n\tGetAllRoles,\r\n\tresetError\r\n} from 'actions/roleAndPermissionAction'\r\n \r\n\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\n// Settings\r\nimport { validators } from 'Constants'\r\nimport { SelectField, Option } from 'react-mdl-extra'\r\nimport Select from 'react-select';\r\nimport { dropdownStyles } from 'react-select-css'\r\nimport { Checkbox } from 'material-ui';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\n\r\nclass UserManagerContainer extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t\tthis.state = {\r\n\t\t\tuserIsEditing: false,\r\n\t\t\teditId: 0,\r\n\t\t\tfilterText: \"\",\r\n\t\t\tfilterRole: \"\",\r\n\t\t\tusers: [],\r\n\t\t\troleState: [],\r\n\t\t\tselectedOption: '',\r\n\t\t\tisRoleSelected: '',\r\n\t\t\trolesForUsers: [],\r\n\t\t\tselectedRolesIDForUsers:[]\r\n\t\t}\r\n\t\tthis.handleRoleChange = this.handleRoleChange.bind(this)\r\n\t\tthis.loadData = this.loadData.bind(this)\r\n\t\t this.filterTextInput = React.createRef();\r\n\t}\r\n\r\n\tcomponentDidMount(){\t\t\r\n\t\t\r\n\t\tthis.loadData();\r\n\t}\r\n\r\n\tloadData() {\r\n\t\tthis.getAllRoles();\r\n\t\tthis.fetchUsersAndRoleDetails();\r\n\t}\r\n\tgetAllRoles(){\r\n\t\tthis.props.GetAllRoles().then((response)=>\r\n\t\t{\r\n\t\t\tthis.setState({ rolesForUsers: response.data.Result});\r\n\t\t})\r\n\t}\r\n\r\n\tfetchUsersAndRoleDetails(){\r\n\t\t\tthis.props.fetchUserRoles()\r\n\t\t\t.then((response) => { \r\n\t\t\t\tthis.setState({ users: response.data.Result })\r\n\t\t\t\tthis.props.userManagerSuccess(response.data.Message)\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\tthis.props.userManagerFailure(this.props.validation.networkError)\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.props.userManagerFailure(error.response.data.Message)\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t}\r\n\t\r\n\r\n\thandleUserInput(filterText) {\r\n\t \r\n\t\t\r\n\t\tvar selectedUser = \tthis.state.users.filter(us=>us.Email.toLowerCase().includes(filterText.target.value.toLowerCase()));\r\n\t\tif(selectedUser.length===1){\r\n\t\t\tthis.handleRowEdit(selectedUser[0],null);\r\n\t\t\tfilterText.target.value = selectedUser[0].Email;\r\n\t\t}\r\n\t\telse{\r\n\t\t\t\tthis.setState({ editId: 0, userIsEditing: false });\r\n\t\t\t\tthis.setState({selectedRolesIDForUsers: []\t})\r\n\t\t}\r\n\t\tthis.setState({ filterText: filterText.target.value.toLowerCase() });\r\n\t};\r\n\r\n\tonDDLRoleClickEvent = () => {\r\n\t\tthis.setState({ isRoleSelected: 'Selected' });\r\n\t}\r\n\r\n\tonDDLRoleBlurEvent = () => {\r\n\t\tthis.setState({ isRoleSelected: '' });\r\n\t}\r\n\r\n\thandleRowDel(userDetails) {\r\n\t\tconst result = window.confirm(this.props.validation.confirmDelete);\r\n\t\tif (result) {\r\n\t\t\tvar formValues = { Email: userDetails.Email, UserRole: userDetails.objRoles, User: this.props.user.user.Id };\r\n\t\t\tthis.props.deleteUserRole(formValues)\r\n\t\t\t\t.then((response) => {\r\n\t\t\t\t\tthis.updateUserData(userDetails,response)\r\n\t\t\t\t\tthis.props.userManagerSuccess(response.data.Message)\r\n\t\t\t\t\t\r\n\t\t\t\t}).catch((error) => {\r\n\t\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\t\tthis.props.userManagerFailure(this.props.validation.networkError)\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse {\r\n\t\t\t\t\t\tthis.props.userManagerFailure(error.response.data.Message)\r\n\t\t\t\t\t}\r\n\t\t\t\t})\r\n\t\t}\r\n\t};\r\n\r\n\thandleRowEdit(userDetails, userIsEditing) {\r\n\t\t userDetails.isEditing = true;\r\n\t\tthis.setState({ editId: userDetails.Id, userIsEditing: true });\r\n\t\tthis.setState({selectedRolesIDForUsers: userDetails.objRoles.map((rol)=>{\r\n\t\t\t\treturn rol.RoleId\t\r\n\t\t\t\t}) })\r\n\t\t \r\n\t this.formDispatch(actions.change('userManager.Email', userDetails.Email)); \r\n\t this.formDispatch(actions.load('userManager.Email', userDetails.Email)); \r\n\t this.formDispatch(actions.setErrors('userManager.Email', false)) \r\n\t this.formDispatch(actions.setTouched('userManager.Email', true)) \r\n\t \r\n\t}\r\n\r\n\t \r\n\r\n\thandleRowCancel(userIsEditing) {\r\n\t\t this.setState({ editId: 0 });\r\n\t\t this.formDispatch(actions.change('userManager.Email', ''));\r\n\t\t this.setState({selectedRolesIDForUsers: [] })\r\n\t\t this.setState({ filterText: '' });\r\n\t\t \r\n\t};\r\n\r\n\thandleRoleChange(value) {\r\n\t\tvar role = value;\r\n\t\tthis.setState({ filterRole: role });\r\n\t\tthis.setState({ selectedOption: value });\r\n\t\tthis.formDispatch(actions.setErrors('userManager.Role', false))\r\n\t}\r\n\r\n\thandleAddUserRole(formValues) {\r\n\r\n\t\tif(this.state.selectedRolesIDForUsers.length < 1){\r\n\t\t\treturn this.props.userManagerFailure(this.props.validation.requiredRole)\r\n\t\t}\r\n\t\t\r\n\t\tthis.props.resetError()\r\n\t\tvar userRole = [];\r\n\t\tObject.values(this.state.selectedRolesIDForUsers).map((roleid)=>{\r\n\t\t\tuserRole.push({RoleName : '' ,RoleId: roleid});\r\n\t\t})\r\n\t\tvar formData = { Email: formValues.Email, UserRole: userRole, User: this.props.user.user.Id };\r\n\t\t \r\n\t\tthis.props.updateUserRole(formData)\r\n\t\t\t.then((response) => {\r\n\t\t\t\t \r\n\t\t\t\tthis.updateUserData(formValues,response)\r\n\t\t\t\tthis.props.userManagerSuccess(response.data.Message)\r\n\t\t\t\tthis.setState({selectedRolesIDForUsers: []});\r\n\t\t\t\tthis.setState({ filterText: \"\", filterRole: \"\" });\r\n\t\t\t\tthis.formDispatch(actions.change('userManager.Email',''));\r\n\t\t\t\t\t\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\tthis.props.userManagerFailure(this.props.validation.networkError)\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.props.userManagerFailure(error.response.data.Message)\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t\t\t \r\n\t}\r\n\r\n\tcomponentDidUpdate() {\r\n\t\tthis.formDispatch(actions.change('userManager.Role', this.state.selectedOption));\r\n\t}\r\n\r\n\tcomponentWillUnmount() {\r\n\t\tthis.formDispatch(actions.reset('userManager'))\r\n\t\tthis.props.resetError()\r\n\t}\r\n\r\n\tupdateUserData(userDetails,response){\r\n\t\tvar oldStateObject = this.state.users;\r\n\t\tuserDetails = oldStateObject.filter(a=>a.Email === userDetails.Email)\r\n\t\tvar index = oldStateObject.indexOf(userDetails[0]);\r\n\t\toldStateObject.splice(index, 1);\r\n\t\toldStateObject.push(response.data.Result);\r\n\t\toldStateObject.sort((itemA, itemB) => (itemA.Email.toLowerCase() > itemB.Email.toLowerCase()) ? 1 : (itemA.Email.toLowerCase() === itemB.Email.toLowerCase()) ? ((itemA.Email.toLowerCase() > itemB.Email.toLowerCase()) ? 1 : -1) : -1 )\r\n\t\tthis.setState({users : oldStateObject});\r\n\t}\r\n\r\n\r\n\r\n\thandleFeatureCheckChanged(value){\r\n\t\tvar id = value.target.id;\r\n\t\tif(this.state.selectedRolesIDForUsers.indexOf(id) < 0){\r\n\t\t\tthis.setState(state => ({\r\n \t\t\tselectedRolesIDForUsers: [...state.selectedRolesIDForUsers, id]}));\r\n\t\t}\r\n\t\telse{\r\n\t\t\t this.setState({\r\n\t\t\t\tselectedRolesIDForUsers: this.state.selectedRolesIDForUsers.filter((item) => item !== id)\t\t\t\t\r\n\t\t\t});\r\n\t\t}\r\n\t\t\r\n\t}\r\n\r\n\trender() {\r\n\r\n\t\tvar getRoleComponent = (instance) => \r\n\t\t{ \r\n\t\t\tvar row = Object.values(instance.state.rolesForUsers).map((role) =>{\r\n\t\t\t\tvar check = (instance.state.selectedRolesIDForUsers.indexOf(role.RoleId) > -1)\r\n\t\t\t\treturn (\r\n\t\t\t\t\t \r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t \t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t)\r\n\t\t\t})\r\n\t\t\treturn row;\r\n\t\t}\r\n\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t\t\t\tinstance.handleFeatureCheckChanged(e)} \r\n\t\t\t\t\t\t\t\tname={role.RoleId} value={role.RoleName} /> \r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\tinstance.handleFeatureCheckChanged(e)} defaultValue={role.RoleId} >{role.RoleName}
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\n \r\n\r\nclass SearchBar extends React.Component {\r\n\thandleChange(event) {\r\n\t\tthis.props.onUserInput(event);\r\n\t}\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t{BreakLine(this.props.content.title)}
\r\n\t\t\t\t\t\t\t this.formDispatch = dispatch}\r\n\t\t\t\t\t\t\t\tonSubmit={(values) => this.handleAddUserRole(values)}\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{this.props.content.rolesLabel}\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{getRoleComponent(this)}\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t{this.props.userManager.error}
\r\n\t\t\t\t\t\t\t{this.props.userManager.message}
\r\n\t\t\t\t\t\t\r\n\t\t\t\t{ this.state.users !== undefined ?\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t);\r\n\t}\r\n}\r\n\r\nclass UserTable extends React.Component {\r\n\trender() {\r\n\t\tvar rowDel = this.props.onRowDel;\r\n\t\tvar rowEdit = this.props.onRowEdit;\r\n\t\t \r\n\t\tvar rowCancel = this.props.onRowCancel;\r\n\t\tvar filterText = this.props.filterText;\r\n\t\tvar filterRole = this.props.filterRole;\r\n\t\tvar userEditing = this.props.userEditing;\r\n\t\tvar editId = this.props.editId;\r\n\t\tvar roles = this.props.roles;\r\n\t\tvar instance = this;\r\n\t\tvar user = this.props.users.map(function (user) {\r\n\t\t\t if (user.Email.toLowerCase().indexOf(filterText) === -1) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\telse return (\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t
\r\n\t\t);\r\n\t}\r\n}\r\n\r\nclass UserRow extends React.Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = {\r\n\t\t\trole: this.props.user.role,\r\n\t\t\toriginalRole: this.props.user.role,\r\n\t\t\troles: this.props.roles\r\n\t\t};\r\n\t\tthis.onChange = this.onChange.bind(this)\r\n\t\tthis.onChangeCancel = this.onChangeCancel.bind(this)\r\n\t\tthis.onCancelEvent = this.onCancelEvent.bind(this)\r\n\t}\r\n\r\n\tonChange(e) {\r\n\t\tthis.setState({\r\n\t\t\trole: e.target.value\r\n\t\t})\r\n\t}\r\n\tonChangeCancel(e) {\r\n\t\tthis.setState({\r\n\t\t\trole: this.state.originalRole\r\n\t\t})\r\n\t\tthis.props.onCancelEvent()\r\n\t}\r\n\r\n\tonDelEvent() {\r\n\t\tthis.props.onDelEvent(this.props.user);\r\n\t}\r\n\r\n\tonEditEvent() {\r\n\t\tthis.props.user.isEditing = true;\r\n\t\t\r\n\t\tthis.props.onEditEvent(this.props.user, this.props.userIsEditing);\r\n\t}\r\n\r\n\tonSaveEvent() {\r\n\t\tthis.setState({\r\n\t\t\toriginalRole: this.state.role\r\n\t\t})\r\n\t\tthis.props.onSaveEvent(this.props.user, this.props.userIsEditing, this.state.role);\r\n\t}\r\n\r\n\tonCancelEvent() {\r\n\t\tthis.props.user.isEditing = false; \r\n\t}\r\n\tshowDeleteLink(){\r\n\t\tif((this.props.user.objRoles.length === 1 && this.props.allRoles.indexOf(this.props.user.objRoles[0].RoleName) === -1) || this.props.user.Customer){\r\n return false;\r\n }\r\n else{\r\n return true;\r\n }\r\n\r\n\t}\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t| First Name | \r\n\t\t\t\t\t\t\tLast Name | \r\n\t\t\t\t\t\t\tRole | \r\n\t\t\t\t\t\t\tUpdated By | \r\n\t\t\t\t\t\t\tUpdated On | \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t | \r\n\t\t\t\t\t\t |
|---|
\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass SearchBar extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n handleChange(event) {\r\n this.props.onUserInput(event);\r\n }\r\n\r\n render() {\r\n return (\r\n {this.props.content.title}
\r\n \r\n \r\n
\r\n {this.props.user.error}
\r\n {this.state.mymessage}
\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass UserTable extends React.Component {\r\n render() {\r\n var filterText = this.props.filterText;\r\n var filterValue = this.props.filterValue;\r\n var user = this.props.users.map(function (user) {\r\n if (user.email.toLowerCase().indexOf(filterText) === -1) {\r\n return;\r\n }\r\n else if (user.emailConfirmed.indexOf(filterValue) === -1 && filterValue !== \"\") {\r\n return;\r\n }\r\n else return (\r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nclass UserRow extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n | User Email | \r\nRegistered On | \r\n
|---|
\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass SearchBar extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n handleChange(event) {\r\n this.props.onUserInput(event);\r\n }\r\n\r\n render() {\r\n return (\r\n {this.props.content.title}
\r\n \r\n \r\n
\r\n {this.props.user.error}
\r\n {this.state.mymessage}
\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass UserTable extends React.Component {\r\n render() {\r\n var filterText = this.props.filterText;\r\n var filterValue = this.props.filterValue;\r\n var user = this.props.users.map(function (user) {\r\n if (user.email.toLowerCase().indexOf(filterText) === -1) {\r\n return;\r\n }\r\n else if (user.emailConfirmed.indexOf(filterValue) === -1 && filterValue !== \"\") {\r\n return;\r\n }\r\n else return (\r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nclass UserRow extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n | User Email | \r\nActivated | \r\nRegistered On | \r\n
|---|
\r\n
\r\n {this.props.content.title}
\r\n - \r\n
Reset Password \r\n UserActivationManager \r\n
\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass UserTable extends React.Component {\r\n render() {\r\n var rowDel = this.props.onRowDel;\r\n var onSectionDetailTableUpdate = this.props.onSectionsTableUpdate;\r\n var rowEdit = this.props.onRowEdit;\r\n var rowCancel = this.props.onRowCancel;\r\n var rowUpdate = this.props.onRowUpdate;\r\n var validation = this.props.validation;\r\n var slide = this.props.sections.map(function (slide) {\r\n return ({this.props.content.title}
\r\n \r\n \r\n
\r\n {this.props.user.error}
\r\n {this.state.mymessage}
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass UserRow extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n // onDelEvent() {\r\n // \tthis.props.onDelEvent(this.props.report);\r\n // }\r\n\r\n // onEditEvent() {\r\n // this.props.onEditEvent(this.props.report);\r\n // }\r\n\r\n onSectionDetailTableUpdate() {\r\n this.props.onSectionDetailTableUpdate()\r\n }\r\n\r\n render() {\r\n return (\r\n this.props.slide.isEditing ?\r\n | File Name | \r\nSection Name | \r\nAdded By/On | \r\n\r\n | \r\n |
|---|
\r\n
\r\n {moment(this.props.slide.AddedOn).format('L')}\r\n
\r\n {moment(this.props.slide.UpdatedOn).format('L')} \r\n
\r\n {moment(this.props.slide.AddedOn).format('L')}\r\n
\r\n {moment(this.props.slide.UpdatedOn).format('L')} \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass UserTable extends React.Component {\r\n render() {\r\n var onReportUpdate = this.props.onReportUpdate;\r\n var rowDel = this.props.onRowDel;\r\n var rowAct = this.props.onRowAct;\r\n var rowEdit = this.props.onRowEdit;\r\n var rowCancel = this.props.onRowCancel;\r\n var rowUpdate = this.props.onRowUpdate;\r\n var userEditing = this.props.userEditing;\r\n var isDuplicate = this.props.isDuplicate;\r\n var editId = this.props.editId;\r\n var layouts = this.props.layouts;\r\n var sizeFiles = this.props.sizes;\r\n var validation = this.props.validation;\r\n var report = this.props.reports.map(function (report) {\r\n return ({this.props.content.title}
\r\n \r\n \r\n
\r\n {this.props.user.error}
\r\n {this.state.mymessage}
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n\r\nclass UserRow extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n // onDelEvent() {\r\n // \tthis.props.onDelEvent(this.props.report);\r\n // }\r\n\r\n // onEditEvent() {\r\n // this.props.onEditEvent(this.props.report);\r\n // }\r\n\r\n onReportUpdate() {\r\n this.props.onReportUpdate()\r\n }\r\n\r\n render() {\r\n return (\r\n this.props.report.isEditing ?\r\n | Name | \r\nActive | \r\nDescription | \r\nLayout FileName | \r\nSize FileName | \r\n {/*Added By/On | \r\nUpdated By/On | */}\r\n\r\n | \r\n |
|---|
\r\n
*/}\r\n \r\n
*/}\r\n \r\n
\r\n {moment(this.props.report.AddedOn).format('L')}\r\n
\r\n {moment(this.props.report.UpdatedOn).format('L')} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {moment(this.props.report.AddedOn).format('L')}\r\n
\r\n {moment(this.props.report.UpdatedOn).format('L')} \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass LayoutsTable extends React.Component {\r\n render() {\r\n var rowDel = this.props.onRowDel;\r\n var tableContents = this.props.tableContents.map(function (tableContent) {\r\n return ({this.props.content.title}
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {this.props.user.error}
\r\n {this.state.mymessage}
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass UserRow extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n onDelEvent() {\r\n this.props.onDelEvent(this.props.tableContent);\r\n }\r\n\r\n render() {\r\n return (\r\n | FileName | \r\nType | \r\nAdded By | \r\nAdded Date | \r\n\r\n |
|---|
\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass UserTable extends React.Component {\r\n render() {\r\n var onReportUpdate = this.props.onReportUpdate;\r\n var rowDel = this.props.onRowDel;\r\n var rowEdit = this.props.onRowEdit;\r\n var rowCancel = this.props.onRowCancel;\r\n var rowUpdate = this.props.onRowUpdate;\r\n var userEditing = this.props.userEditing;\r\n var isDuplicate = this.props.isDuplicate;\r\n var editId = this.props.editId;\r\n var validation = this.props.validation;\r\n var report = this.props.files.map(function (report) {\r\n return ({this.props.content.title}
\r\n\r\n \r\n
\r\n {this.props.user.error}
\r\n {this.state.mymessage}
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n\r\nclass UserRow extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n // onDelEvent() {\r\n\t// \tthis.props.onDelEvent(this.props.report);\r\n // }\r\n\r\n // onEditEvent() {\r\n // this.props.onEditEvent(this.props.report);\r\n // }\r\n\r\n onReportUpdate() {\r\n this.props.onReportUpdate()\r\n }\r\n\r\n render() {\r\n return (\r\n this.props.report.isEditing ?\r\n | Name | \r\nAdded By/On | \r\nUpdated By/On | \r\n\r\n | \r\n |
|---|
\r\n {moment(this.props.report.AddedOn).format('L')}\r\n
\r\n {moment(this.props.report.UpdatedOn).format('L')} \r\n
\r\n {moment(this.props.report.AddedOn).format('L')}\r\n
\r\n {moment(this.props.report.UpdatedOn).format('L')} \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass UserTable extends React.Component {\r\n render() {\r\n var rowDel = this.props.onRowDel;\r\n var onSectionDetailTableUpdate = this.props.onSectionsTableUpdate;\r\n var rowEdit = this.props.onRowEdit;\r\n var rowCancel = this.props.onRowCancel;\r\n var rowUpdate = this.props.onRowUpdate;\r\n var validation = this.props.validation;\r\n var slide = this.props.sections.map(function (slide) {\r\n return ({this.props.content.title}
\r\n\r\n \r\n
\r\n {this.props.user.error}
\r\n {this.state.mymessage}
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass UserRow extends React.Component {\r\n\r\n onSectionDetailTableUpdate() {\r\n this.props.onSectionDetailTableUpdate()\r\n }\r\n\r\n render() {\r\n return (\r\n this.props.slide.isEditing ?\r\n | Report Name | */}\r\nFile Name | \r\nSection Name | \r\nSlide Name | \r\n\r\n | \r\n |
|---|
\r\n
\r\n
\r\n {moment(this.props.slide.AddedOn).format('L')}\r\n
\r\n {moment(this.props.slide.UpdatedOn).format('L')} \r\n
\r\n {moment(this.props.slide.UpdatedOn).format('L')} \r\n
this.node = node}>\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.sequenceManager,\r\n validation: state.content.validation\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchReports: (formValues) => dispatch(fetchReports(formValues)),\r\n fetchFiles: (formValues) => dispatch(fetchFiles(formValues)),\r\n fetchSections: (formValues) => dispatch(fetchSections(formValues)),\r\n fetchMappings: (formValues) => dispatch(fetchMappings(formValues)),\r\n updateSequence: (formValues) => dispatch(updateSequence(formValues)),\r\n userDetailsLoading: (bool) => dispatch(userDetailsLoading(bool)),\r\n userDetailsSuccess: (bool) => dispatch(userDetailsSuccess(bool)),\r\n userDetailsFailure: (error) => dispatch(userDetailsFailure(error)),\r\n resetError: () => dispatch(resetError())\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SequenceManager)","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\nimport moment from 'moment'\r\n// Settings\r\nimport { validators } from 'Constants'\r\nimport { SelectField, Option } from 'react-mdl-extra'\r\n\r\nimport {\r\n fetchFiles,\r\n fetchSections,\r\n addDescription,\r\n deleteSection,\r\n updateDescription,\r\n userDetailsSuccess,\r\n userDetailsFailure,\r\n userDetailsLoading,\r\n resetError,\r\n resetMessage\r\n}\r\n from 'actions/userActions'\r\n\r\nlet messageDuration = 10// this is used for the seState async behavior for language dropdown\r\n\r\nclass Indexx extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n Language: [{ id: 'EN', name: 'English' }, { id: 'CN', name: 'Chinese' },\r\n { id: 'JP', name: 'Japanese' }, { id: 'PT', name: 'Portugues' }, { id: 'ES', name: 'Espanol' }],\r\n Files: [],\r\n Sections: [],\r\n fileId: 0,\r\n sectionId: 0,\r\n languageName: 'EN',\r\n flag1: false,\r\n flag2: false,\r\n flag3: false\r\n }\r\n }\r\n\r\n componentWillMount() {\r\n this.loadFiles();\r\n this.loadSections();\r\n }\r\n\r\n loadFiles() {\r\n this.props.fetchFiles()\r\n .then((response) => {\r\n var fileData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n fileData.push(obj);\r\n }\r\n this.setState({ Files: fileData })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n\r\n }\r\n\r\n loadSections() {\r\n this.props.fetchSections()\r\n .then((response) => {\r\n var sectionData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n sectionData.push(obj);\r\n }\r\n this.setState({ Sections: sectionData })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n\r\n }\r\n\r\n changeSections() {\r\n this.props.fetchSections()\r\n .then((response) => {\r\n var sectionData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n if (this.state.fileId == obj.ParentId) {\r\n sectionData.push(obj);\r\n }\r\n }\r\n this.setState({ Sections: sectionData })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n }\r\n\r\n filesChange(value) {\r\n var filter = value;\r\n this.state.Files.map((file) => {\r\n if (filter == file.Name) {\r\n this.setState({ fileId: file.Id, flag1: true })\r\n }\r\n })\r\n this.formDispatch(actions.reset('sectionManager'))\r\n this.setState({ flag2: false, flag3: false })\r\n this.changeSections()\r\n\r\n }\r\n\r\n changeSection(value) {\r\n if (this.state.flag1) {\r\n var filter = value;\r\n this.state.Sections.map((sec) => {\r\n if (filter == sec.SectionName) {\r\n this.setState({ sectionId: sec.Id, flag2: true })\r\n }\r\n })\r\n }\r\n else {\r\n this.props.userDetailsFailure(\"Please select the File first\")\r\n }\r\n }\r\n\r\n changeLang(value) {\r\n if (this.state.flag1 && this.state.flag2) {\r\n var filter = value;\r\n var result = this.state.Language.find(report => report.name.toLowerCase() == filter.toLowerCase())\r\n this.setState({languageName: result.id, flag3: true})\r\n \r\n // this.state.Language.map((lan) => {\r\n // if (filter == lan.name) {\r\n // this.setState({ languageName: lan.id})\r\n // this.setState({flag3: true})\r\n // console.log(this.state)\r\n // }\r\n // })\r\n // this.props.fetchSections()\r\n // .then((response) => {\r\n // var sectionData = [];\r\n // this.props.userDetailsSuccess(response.data.Message)\r\n // for (var i = 0; i < response.data.Result.length; i++) {\r\n // var obj = response.data.Result[i];\r\n // if(obj.ParentId == this.state.fileId || this.state.language == 'EN'){\r\n // sectionData.push(obj); \r\n // }\r\n // if(obj.ParentId == this.state.fileId || this.state.language == 'ES'){\r\n // obj.Description = obj.DescriptionES;\r\n // sectionData.push(obj); \r\n // } \r\n // if(obj.ParentId == this.state.fileId || this.state.language == 'CN'){\r\n // obj.Description = obj.DescriptionCN;\r\n // sectionData.push(obj); \r\n // } \r\n // if(obj.ParentId == this.state.fileId || this.state.language == 'JP'){\r\n // obj.Description = obj.DescriptionJP;\r\n // sectionData.push(obj); \r\n // } \r\n // if(obj.ParentId == this.state.fileId || this.state.language == 'PT'){\r\n // obj.Description = obj.DescriptionPT;\r\n // sectionData.push(obj); \r\n // } \r\n // }\r\n // this.setState({ Sections: sectionData})\r\n setTimeout(() => { \r\n this.filterTable();\r\n }, messageDuration)\r\n \r\n // }).catch((error) => {\r\n // if (error.stack.includes('Network Error')) {\r\n // this.props.userDetailsFailure()\r\n // }\r\n // })\r\n }\r\n else {\r\n this.props.userDetailsFailure(\"Please select the other two dropdowns first\")\r\n }\r\n }\r\n\r\n //filters the table according to the drop down values\r\n filterTable() {\r\n if (this.state.flag1 && this.state.flag2 && this.state.flag3) {\r\n this.props.fetchSections()\r\n .then((response) => {\r\n var sectionData = [];\r\n this.props.userDetailsSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n if (obj.ParentId == this.state.fileId && this.state.languageName == 'EN') {\r\n sectionData.push(obj);\r\n }\r\n if (obj.ParentId == this.state.fileId && this.state.languageName == 'ES') {\r\n obj.Description = obj.DescriptionES;\r\n sectionData.push(obj);\r\n }\r\n if (obj.ParentId == this.state.fileId && this.state.languageName == 'CN') {\r\n obj.Description = obj.DescriptionCN;\r\n sectionData.push(obj);\r\n }\r\n if (obj.ParentId == this.state.fileId && this.state.languageName == 'JP') {\r\n obj.Description = obj.DescriptionJP;\r\n sectionData.push(obj);\r\n }\r\n if (obj.ParentId == this.state.fileId && this.state.languageName == 'PT') {\r\n obj.Description = obj.DescriptionPT;\r\n sectionData.push(obj);\r\n }\r\n }\r\n this.setState({ Sections: sectionData })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n }\r\n }\r\n\r\n addDescription(formValue) {\r\n if (this.state.flag1 && this.state.flag2 && this.state.flag3) {\r\n var sectionDetail = {\r\n name: formValue.SectionName.trim(),\r\n desc: formValue.Description.trim(),\r\n User: localStorage.getItem('loggedinUser'),\r\n FileID: this.state.fileId,\r\n Id: this.state.sectionId,\r\n Language: this.state.languageName\r\n }\r\n var msg = this.props.content;\r\n if (sectionDetail.FileID > 0 && sectionDetail.Id > 0 && sectionDetail.Language) {\r\n if (sectionDetail.desc != \"\") {\r\n this.setState({ mymessage: \"\" })\r\n this.props.addDescription(sectionDetail).then((results) => {\r\n if (results.status === 200) {\r\n var httpstatus = results.status\r\n var getMsgfromStatus = msg[httpstatus]\r\n // Reset form\r\n this.formDispatch(actions.reset('sectionManager'))\r\n this.loadSections()\r\n this.setState({ mymessage: getMsgfromStatus })\r\n // setTimeout(() => { \r\n // this.loadData()\r\n // this.setState({mymessage: \"\"})\r\n // }, messageDuration) \r\n\r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(\"All the fields are not filled\")\r\n }\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(\"Please select all the respective dropdown in which you want to add description\")\r\n }\r\n }\r\n else {\r\n this.setState({ mymessage: \"\" })\r\n this.props.userDetailsFailure(\"Please make sure that all fields are filled\")\r\n }\r\n }\r\n\r\n handleEditEvent(evt) {\r\n if (this.state.flag3) {\r\n var item = {\r\n name: evt.sectionName,\r\n desc: evt.description,\r\n id: evt.id,\r\n pid: evt.parentId,\r\n isEditing: evt.isEditing\r\n };\r\n var old_sectionDetails = this.state.Sections.slice();\r\n // if(this.state.filterId > 0){\r\n var newsectionDetails = old_sectionDetails.map(function (testsectionDetails) {\r\n for (var key in testsectionDetails) {\r\n if (testsectionDetails.Id == item.id) {\r\n testsectionDetails.SectionName = item.name;\r\n testsectionDetails.Description = item.desc;\r\n testsectionDetails.isEditing = !item.isEditing;\r\n\r\n if (evt.UpdatedBy !== undefined) {\r\n testsectionDetails.UpdatedBy = evt.UpdatedBy;\r\n testsectionDetails.UpdatedOn = evt.UpdatedOn;\r\n }\r\n break;\r\n }\r\n }\r\n return testsectionDetails;\r\n });\r\n\r\n this.setState({ Sections: newsectionDetails });\r\n // }\r\n // else{\r\n // this.props.userDetailsFailure(\"Please Select the Respective File from dropdown first!!\")\r\n // }\r\n }\r\n else {\r\n this.props.userDetailsFailure(\"Please select All the Dropdowns to Edit\");\r\n }\r\n }\r\n\r\n handleCancelEvent(originalDetails) {\r\n var item = {\r\n id: originalDetails[0].id,\r\n sectionName: originalDetails[0].sectionName,\r\n description: originalDetails[0].description\r\n };\r\n\r\n var old_sectionDetails = this.state.Sections.slice();\r\n var newsectionDetails = old_sectionDetails.map(function (testsectionDetails) {\r\n for (var key in testsectionDetails) {\r\n if (testsectionDetails.Id === item.id) {\r\n testsectionDetails.SectionName = item.sectionName;\r\n testsectionDetails.Description = item.description;\r\n testsectionDetails[\"isEditing\"] = false;\r\n break;\r\n }\r\n }\r\n return testsectionDetails;\r\n });\r\n this.setState({ Sections: newsectionDetails });\r\n\r\n };\r\n\r\n handleUpdateEvent(updateDetails) {\r\n if (updateDetails.length > 0 && this.isDuplicate(updateDetails[0].description.trim())) {\r\n var item = {\r\n Id: updateDetails[0].id,\r\n name: updateDetails[0].sectionName.trim(),\r\n FileID: updateDetails[0].parentId,\r\n desc: updateDetails[0].description.trim(),\r\n Language: this.state.languageName,\r\n isEditing: true,\r\n User: localStorage.getItem('loggedinUser'),\r\n UpdatedOn: Date.now\r\n };\r\n if (item.desc != null && item.desc != \"\") {\r\n this.props.updateDescription(item)\r\n .then((results) => {\r\n this.props.userDetailsSuccess(results.data.Message)\r\n this.setState({ mymessage: results.data.Message })\r\n if (results.status === 200) {\r\n item.UpdatedBy = results.data.Result.UpdatedBy;\r\n item.UpdatedOn = results.data.Result.UpdatedOn;\r\n this.handleEditEvent(item)\r\n }\r\n this.loadSections()\r\n this.formDispatch(actions.reset('sectionManager'))\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.props.userDetailsFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n else {\r\n this.props.userDetailsFailure(\"Description cannot be blank\")\r\n }\r\n }\r\n }\r\n\r\n isDuplicate(vals) {\r\n var result = this.state.Sections.find(sec => sec.Description === vals.trim()) === undefined\r\n if (result) {\r\n return result;\r\n }\r\n else {\r\n return result;\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.formDispatch(actions.reset('sectionManager'))\r\n this.formDispatch(actions.reset('editDomain'))\r\n this.props.resetError();\r\n }\r\n\r\n render() {\r\n return (\r\n {this.props.content.title}
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {this.props.user.error}
\r\n {this.state.mymessage}
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n {/* */}\r\n {/* \r\n
*/}\r\n\r\n
\r\n \r\n
\r\n Section Name\r\n {this.state.sections.map((secn) => (\r\n
\r\n \r\n {secn.FileName + '->' + secn.SectionName}\r\n
\r\n ))}\r\n \r\n
\r\n \r\n \r\n \r\n {(provided, snapshot) => (\r\n Section Sequence\r\n {this.state.items.map((item, index) => (\r\n \r\n {(provided, snapshot) => (\r\n \r\n ))}\r\n {provided.placeholder}\r\n
\r\n )}\r\n \r\n \r\n \r\n {item.SectionName}\r\n
\r\n )}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass UserTable extends React.Component {\r\n render() {\r\n var rowEdit = this.props.onRowEdit;\r\n var rowCancel = this.props.onRowCancel;\r\n var rowUpdate = this.props.onRowUpdate;\r\n var validation = this.props.validation;\r\n var isDuplicate = this.props.isDuplicate;\r\n var slide = this.props.sections.map(function (slide) {\r\n return ({this.props.content.title}
\r\n\r\n \r\n
\r\n {this.props.user.error}
\r\n {this.state.mymessage}
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass UserRow extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n // onDelEvent() {\r\n // \tthis.props.onDelEvent(this.props.report);\r\n // }\r\n\r\n // onEditEvent() {\r\n // this.props.onEditEvent(this.props.report);\r\n // }\r\n\r\n render() {\r\n return (\r\n this.props.slide.isEditing ?\r\n | File Name | \r\nSection Name | \r\nDescription | \r\nAdded By/On | \r\n\r\n | \r\n |
|---|
\r\n
\r\n
\r\n {moment(this.props.slide.AddedOn).format('L')}\r\n
\r\n {moment(this.props.slide.UpdatedOn).format('L')} \r\n
\r\n {moment(this.props.slide.AddedOn).format('L')}\r\n
\r\n {moment(this.props.slide.UpdatedOn).format('L')} \r\n
\r\n
\r\n {this.props.content.title}
\r\n - \r\n
{this.props.content.report} \r\n {this.props.content.layout} \r\n {this.props.content.file} \r\n {this.props.content.section} \r\n {this.props.content.slide} \r\n {this.props.content.sequence} \r\n {/* {this.props.content.index} */}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* */}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nclass ReleaseFeatureTable extends React.Component {\r\n render() {\r\n var onReportUpdate = this.props.onReportUpdate;\r\n var rowDel = this.props.onRowDel;\r\n var rowEdit = this.props.onRowEdit;\r\n var rowUpdate = this.props.onRowUpdate;\r\n // var rowSave = this.props.onRowSave;\r\n var rowCancel = this.props.onRowCancel;\r\n var releaseEditing = this.props.releaseEditing;\r\n var editId = this.props.editId;\r\n var validation = this.props.validation;\r\n var isDuplicate = this.props.isDuplicate;\r\n var isDescDuplicate = this.props.isDescDuplicate;\r\n\r\n var data = this.props.releaseData.map(function (data) {\r\n return ({this.props.content.title}
\r\n \r\n\r\n {this.state.responseMsg}
\r\n {this.props.user.error}
\r\n\r\n\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass ReleaseFeatureRow extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n onReportUpdate() {\r\n this.props.onReportUpdate()\r\n }\r\n\r\n render() {\r\n return (\r\n this.props.data.IsEdit ?\r\n | Version | \r\nShort Description | \r\nFeature Description | \r\nCreated By/On | \r\nLast Updated By/On | \r\n\r\n | \r\n |
|---|
\r\n {moment(this.props.data.AddedDate).format('L')}\r\n
\r\n {moment(this.props.data.UpdatedDate).format('L')} \r\n
\r\n {moment(this.props.data.AddedDate).format('L')}\r\n
\r\n {moment(this.props.data.UpdatedDate).format('L')} \r\n
'),\r\n fileDetails: {\r\n fileData: this.state.fileData !== undefined ? this.state.fileData : '',\r\n fileName: this.state.selectedFile !== null ? this.state.selectedFile.name : ''\r\n },\r\n createdBy: this.props.user.user.Id,\r\n language: this.props.language.toUpperCase(),\r\n userEmail: localStorage.getItem('loggedinUser') //email\r\n }\r\n var content = this.props.content;\r\n this.props.reportBug(data)\r\n .then((result) => {\r\n setTimeout(() => {\r\n if (result.status === 200) {\r\n this.props.reportBugSuccess(content[result.status])\r\n this.props.hideModal('reportBug')\r\n this.props.setReportBugAlertVisibility(content[result.status])\r\n }\r\n else {\r\n var failMsg = this.props.content.error\r\n if (failMsg !== undefined) {\r\n this.props.reportBugFailure(failMsg)\r\n }\r\n this.props.hideModal('reportBug')\r\n this.props.setReportBugAlertVisibility(failMsg)\r\n }\r\n }, 500)\r\n\r\n }).catch((error) => {\r\n this.props.reportBugFailure(content[error.response.status])\r\n })\r\n }\r\n }\r\n render() {\r\n return (\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n validation: state.content.validation,\r\n user: state.default,\r\n content: state.content.menu.ReportBug[0].ReportBugDetails,\r\n language: state.language\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n reportBug: (data) => dispatch(reportBug(data)),\r\n reportBugLoading: (bool) => dispatch(reportBugLoading(bool)),\r\n reportBugSuccess: (message) => dispatch(reportBugSuccess(message)),\r\n reportBugFailure: (error) => dispatch(reportBugFailure(error))\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ReportBugContainer)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n\r\n// Actions\r\nimport { tableSchemaFetchData } from '../../actions/fetchContent'\r\nimport {\r\n\tuploadExcelFileRequestToServer,\r\n\tgenerateBenchMarkJSON,\r\n\tuploadFileFailure,\r\n\tuploadFileSuccess,\r\n\tuploadFileLoading,\r\n\tresetError\r\n} from 'actions/userActions'\r\n\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\n\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\n\r\n// Settings\r\nimport { validators, path } from 'Constants'\r\nimport { SelectField, Option } from 'react-mdl-extra'\r\nimport Select from 'react-select';\r\nimport { inherits } from 'util';\r\n\r\n//Style\r\nimport { dropdownStyles } from 'react-select-css'\r\n\r\nclass FileUploadManager extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t\tthis.state = {\r\n\t\t\tresponseMsg: '',\r\n\t\t\tselectedFileName: '',\r\n\t\t\tselectedTableSchemaName: '',\r\n\t\t\tselectedTableSchemaDisplayName: '',\r\n\t\t\tisTableSchemaNameSelected: false,\r\n\t\t\ttableSCHEMA: [],\r\n\t\t\tlanguages: [\"en\", \"jp\", \"cn\", \"pt\", \"es\"]\r\n\t\t}\r\n\t\t//this.handleTableSchemaChange = this.handleTableSchemaChange.bind(this);\r\n\t\t//this.fetchTableSchemaData = this.fetchTableSchemaData.bind(this);\r\n\t\t//this.uploadExcelFileRequest = this.uploadExcelFileRequest.bind(this);\r\n\t\tthis.loadData = this.loadData.bind(this);\r\n\t}\r\n\r\n\tcomponentDidUpdate() {\r\n\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tthis.loadData();\r\n\t\tthis.setState({ selectedTableSchemaName: '' });\r\n\t\tthis.setState({ selectedTableSchemaDisplayName: '' });\r\n\t}\r\n\r\n\tcomponentWillMount() {\r\n\r\n\t}\r\n\r\n\tcomponentWillUnmount() {\r\n\t\tthis.setState({ selectedTableSchemaName: '' });\r\n\t\tthis.setState({ selectedTableSchemaDisplayName: '' });\r\n\t\tthis.formDispatch(actions.reset('fileUploadManager'));\r\n\t\tthis.props.resetError();\r\n\t}\r\n\r\n\tloadData() {\r\n\t\tthis.props.fetchTableSchemaData(path + 'data/sqlTableSchema/tableSchema.json');\r\n\t\tthis.setState({ tableSCHEMA: this.props.tableSCHEMA });\r\n\r\n\t\t//Set default value\r\n\t\tif (this.props.tableSCHEMA.length > 0) {\r\n\t\t\tthis.setState({ selectedTableSchemaName: this.props.tableSCHEMA[0].value });\r\n\t\t\tthis.setState({ selectedTableSchemaDisplayName: this.props.tableSCHEMA[0].label });\r\n\t\t}\r\n\t}\r\n\r\n\tonTableSchemaClickEvent = () => {\r\n\t\tthis.setState({ isTableSchemaNameSelected: 'Selected' });\r\n\t}\r\n\r\n\tonTableSchemaBlurEvent = () => {\r\n\t\tthis.setState({ isTableSchemaNameSelected: '' });\r\n\t}\r\n\r\n\thandleTableSchemaChange(tableSchema) {\r\n\t\t//Set Selected Table Schema Name\r\n\t\tthis.setState({ selectedTableSchemaName: tableSchema.value });\r\n\t\tthis.setState({ selectedTableSchemaDisplayName: tableSchema.label });\r\n\t\tthis.formDispatch(actions.reset('fileUploadManager'));\r\n\t\tthis.props.resetError();\r\n\t\tthis.setState({ responseMsg: \"\" });\r\n\t\tthis.props.user.error = \"\";\r\n\t}\r\n\r\n\thandleUploadFile(event) {\r\n\t\tthis.props.resetError();\r\n\t\tthis.setState({ responseMsg: \"\" });\r\n\t\tthis.props.user.error = \"\";\r\n\r\n\t\tvar propsContent = this.props.content;\r\n\r\n\t\tif (this.state.selectedTableSchemaName.length > 0 && event.target.files[0] != null) {\r\n\t\t\tthis.formDispatch(actions.setErrors('fileUploadManager.TableSchema', false));\r\n\r\n\t\t\tconst file = event.target.files[0];\r\n\t\t\tconst fileName = this.state.selectedTableSchemaName + '.' + file.name.split('.').pop();\r\n\t\t\tconst tableName = this.state.selectedTableSchemaName;\r\n\t\t\tconst userName = localStorage.getItem('loggedinUser');\r\n\t\t\tthis.setState({ selectedFileName: fileName });\r\n\r\n\t\t\tthis.props.uploadExcelFileRequestToServer(file, fileName, tableName, userName)\r\n\t\t\t\t.then((responseFromAPI) => {\r\n\t\t\t\t\tvar response = responseFromAPI.response === undefined ? responseFromAPI : responseFromAPI.response;\r\n\t\t\t\t\tif (response.status === 201) {\r\n\t\t\t\t\t\tif (response.data.Message === \"msgUploadSuccess\") {\r\n\t\t\t\t\t\t\tthis.props.uploadFileSuccess(propsContent.msgUploadSuccess);\r\n\t\t\t\t\t\t\tthis.setState({ responseMsg: propsContent.msgUploadSuccess }, this.createJsonFiles);\r\n\t\t\t\t\t\t\tthis.props.user.error = \"\";\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse if (response.status === 404 || response.status === 417) {\r\n\t\t\t\t\t\tvar responseMessage = '';\r\n\t\t\t\t\t\tswitch (response.data.Message) {\r\n\t\t\t\t\t\t\tcase \"msgNotAbleToProcess\":\r\n\t\t\t\t\t\t\t\tresponseMessage = propsContent.msgNotAbleToProcess;\r\n\t\t\t\t\t\t\tcase \"msgDataNotFound\":\r\n\t\t\t\t\t\t\t\tresponseMessage = propsContent.msgDataNotFound;\r\n\t\t\t\t\t\t\tcase \"msgInvalidExtension\":\r\n\t\t\t\t\t\t\t\tresponseMessage = propsContent.msgInvalidExtension;\r\n\t\t\t\t\t\t\tcase \"msgEntityNotFound\":\r\n\t\t\t\t\t\t\t\tresponseMessage = propsContent.msgEntityNotFound;\r\n\t\t\t\t\t\t\tcase \"msgUploadFailed\":\r\n\t\t\t\t\t\t\t\tresponseMessage = propsContent.msgUploadFailed;\r\n\t\t\t\t\t\t\tdefault:\r\n\t\t\t\t\t\t\t\tresponseMessage = propsContent.msgErrorUpload;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tthis.props.uploadFileFailure(responseMessage);\r\n\t\t\t\t\t\tthis.props.user.error = responseMessage;\r\n\t\t\t\t\t\tthis.setState({ responseMsg: \"\" });\r\n\t\t\t\t\t}\r\n\t\t\t\t}).catch((error) => {\r\n\t\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\t\tthis.props.uploadFileFailure(propsContent.msgNetworkError);\r\n\t\t\t\t\t\tthis.props.user.error = propsContent.msgErrorUpload;\r\n\t\t\t\t\t\tthis.setState({ responseMsg: \"\" });\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse {\r\n\t\t\t\t\t\tthis.props.uploadFileFailure(propsContent.msgErrorUpload) //error.response.data.Message\r\n\t\t\t\t\t\tthis.props.user.error = propsContent.msgErrorUpload;\r\n\t\t\t\t\t\tthis.setState({ responseMsg: \"\" });\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.props.uploadFileFailure(propsContent.msgErrorUpload);\r\n\t\t\tthis.props.user.error = propsContent.msgErrorUpload;\r\n\t\t\tthis.setState({ responseMsg: \"\" });\r\n\t\t}\r\n\t}\r\n\r\n\tcreateJsonFiles() {\r\n\t\tlet language = this.state.languages;\r\n\t\tthis.props.generateBenchMarkJSON(\"en\")\r\n\t\t\t.then((response) => {\r\n\t\t\t\tif (response.status === 200) {\r\n\t\t\t\t\tlet msg = this.props.content.msgEnglish\r\n\t\t\t\t\tthis.props.uploadFileSuccess(msg);\r\n\t\t\t\t\tthis.setState({ responseMsg: msg });\r\n\t\t\t\t\tthis.props.user.error = \"\";\r\n\t\t\t\t\tthis.props.generateBenchMarkJSON(\"cn\")\r\n\t\t\t\t\t\t.then((response) => {\r\n\t\t\t\t\t\t\tif (response.status === 200) {\r\n\t\t\t\t\t\t\t\tlet msg = this.props.content.msgChinese;\r\n\t\t\t\t\t\t\t\tthis.props.uploadFileSuccess(msg);\r\n\t\t\t\t\t\t\t\tthis.setState({ responseMsg: msg });\r\n\t\t\t\t\t\t\t\tthis.props.user.error = \"\";\r\n\t\t\t\t\t\t\t\tthis.props.generateBenchMarkJSON(\"jp\")\r\n\t\t\t\t\t\t\t\t\t.then((response) => {\r\n\t\t\t\t\t\t\t\t\t\tif (response.status === 200) {\r\n\t\t\t\t\t\t\t\t\t\t\tlet msg = this.props.content.msgJapanese;\r\n\t\t\t\t\t\t\t\t\t\t\tthis.props.uploadFileSuccess(msg);\r\n\t\t\t\t\t\t\t\t\t\t\tthis.setState({ responseMsg: msg });\r\n\t\t\t\t\t\t\t\t\t\t\tthis.props.user.error = \"\";\r\n\t\t\t\t\t\t\t\t\t\t\tthis.props.generateBenchMarkJSON(\"pt\")\r\n\t\t\t\t\t\t\t\t\t\t\t\t.then((response) => {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (response.status === 200) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlet msg = this.props.content.msgPortuguese;\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.props.uploadFileSuccess(msg);\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setState({ responseMsg: msg });\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.props.user.error = \"\";\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.props.generateBenchMarkJSON(\"es\")\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.then((response) => {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (response.status === 200) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlet msg = this.props.content.msgSpanish;\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.props.uploadFileSuccess(msg);\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setState({ responseMsg: msg });\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.props.user.error = \"\";\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}).catch((error) => {this.props.uploadFileFailure(this.props.content.msgErrorSpanish)})\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t\t}).catch((error) => { this.props.uploadFileFailure(this.props.content.msgErrorPortuguese)})\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t}).catch((error) => { this.props.uploadFileFailure(this.props.content.msgErrorJapanese)})\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}).catch((error) => { this.props.uploadFileFailure(this.props.content.msgErrorChinese)})\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {this.props.uploadFileFailure(this.props.content.msgErrorEnglish) })\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n
\r\n {this.props.content.title}
\r\n {this.props.content.bugDescInfo}
\r\n \r\n this.onChange(e)}\r\n placeholder=\"Type bug description...\"\r\n />\r\n
\r\n {this.props.content.informativeText}
\r\n \r\n \r\n {this.state.selectedFile !== null ?\r\n
\r\n \r\n
:\r\n {this.props.content.noFile}}\r\n {this.state.selectedFile.name}
\r\n \r\n
\r\n \r\n
\r\n {this.state.errorMsg}
\r\n {this.state.successMsg}
\r\n {this.state.addReportDataMsg}
\r\n \r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tui: state.content.ui,\r\n\t\tuser: state.default,\r\n\t\ttableSCHEMA: state.tableSCHEMA,\r\n\t\tvalidation: state.content.validation,\r\n\t\tcontent: state.content.menu.adminMenuItems[0].fileUploadManager\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tfetchTableSchemaData: (url) => dispatch(tableSchemaFetchData(url)),\r\n\t\tuploadExcelFileRequestToServer: (file, name, tableName, userName) => dispatch(uploadExcelFileRequestToServer(file, name, tableName, userName)),\r\n\t\tgenerateBenchMarkJSON: (lang) => dispatch(generateBenchMarkJSON(lang)),\r\n\t\tuploadFileLoading: (bool) => dispatch(uploadFileLoading(bool)),\r\n\t\tuploadFileSuccess: (bool) => dispatch(uploadFileSuccess(bool)),\r\n\t\tuploadFileFailure: (error) => dispatch(uploadFileFailure(error)),\r\n\t\tresetError: () => dispatch(resetError())\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(FileUploadManager)\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport { Checkbox } from 'material-ui';\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\nimport moment from 'moment'\r\n// Settings\r\nimport { validators } from 'Constants'\r\nimport {\r\n\troleManagerSuccess,\r\n\troleManagerFailure,\r\n\tgetAllFeatures,\r\n\tfetchRoleFeatures,\r\n\taddUpdateRoleAndFeatures,\r\n\tdeleteRoleAndFeatures,\r\n\tresetError\r\n} from 'actions/roleAndPermissionAction'\r\n\r\nclass RoleManager extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t\tthis.state = {\r\n\t\t\troleFeatures: [],\r\n\t\t\tselectedFeaturesIDForUsers: [],\r\n\t\t\tfilterText: '',\r\n\t\t\troles: [],\r\n\t\t\troleIsEditing: false,\r\n\t\t\troleId: null\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tthis.props.resetError()\r\n\t\tthis.loadData();\r\n\t}\r\n\r\n\tcomponentWillUnmount() {\r\n\t\tthis.formDispatch(actions.reset('roleManager'))\r\n\t\tthis.props.resetError()\r\n\t}\r\n\r\n\r\n\tloadData() {\r\n\t\tthis.props.getAllFeatures().then((response) => {\r\n\t\t\t// this.props.roleManagerSuccess(response.data.Message)\r\n\t\t\tthis.setState({ roleFeatures: response.data.Result });\r\n\t\t})\r\n\r\n\t\tthis.fetchRolesAndFeatures(true);\r\n\t}\r\n\r\n\tfetchRolesAndFeatures(showLoading) {\r\n\t\tthis.props.fetchRoleFeatures()\r\n\t\t\t.then((response) => {\r\n\t\t\t\tvar t = (showLoading === true ? this.props.roleManagerSuccess(response.data.Message) : null)\r\n\t\t\t\tthis.setState({ roles: response.data.Result })\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\tthis.props.roleManagerFailure()\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.props.roleManagerFailure(error.response.data.Message)\r\n\t\t\t\t}\r\n\t\t\t})\r\n\r\n\t}\r\n\r\n\thandleFeatureCheckChanged(value) {\r\n\t\tvar id = value.target.id;\r\n\t\tif (this.state.selectedFeaturesIDForUsers.indexOf(id) < 0) {\r\n\t\t\tthis.setState(state => ({\r\n\t\t\t\tselectedFeaturesIDForUsers: [...state.selectedFeaturesIDForUsers, id]\r\n\t\t\t}));\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.setState({\r\n\t\t\t\tselectedFeaturesIDForUsers: this.state.selectedFeaturesIDForUsers.filter((item) => item !== id)\r\n\t\t\t});\r\n\t\t}\r\n\r\n\t}\r\n\r\n\thandleAddUpdateRoleAndFeatures(formValues) {\r\n\t\tif (this.state.selectedFeaturesIDForUsers.length < 1) {\r\n\t\t\treturn this.props.roleManagerFailure(this.props.validation.requiredFeature)\r\n\t\t}\r\n\r\n\t\tthis.props.resetError()\r\n\r\n\t\tvar userRoleFeatures = [];\r\n\t\tObject.values(this.state.selectedFeaturesIDForUsers).map((featureId) => {\r\n\t\t\tuserRoleFeatures.push({ FeatureId: featureId, IsMapped: true, AddedBy: this.props.user.user.Id, UpdatedBy: this.props.user.user.Id });\r\n\t\t})\r\n\r\n\t\tvar editRoleId = this.state.roleId != null ? this.state.roleId : null\r\n\t\tvar formData = { RoleName: formValues.Role, RoleId: editRoleId, RoleFeatures: userRoleFeatures, CurrentUser: this.props.user.user.Id };\r\n\r\n\t\tthis.props.addUpdateRoleAndFeatures(formData)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tthis.fetchRolesAndFeatures()\r\n\t\t\t\tthis.props.roleManagerSuccess(response.data.Message)\r\n\t\t\t\tthis.resetSelection()\r\n\t\t\t\tthis.setState({ filterText: \"\", filterRole: \"\", roleIsEditing: false, roleId: null })\r\n\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\tthis.props.roleManagerFailure(this.props.validation.networkError)\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.props.roleManagerFailure(error.response.data.Message)\r\n\t\t\t\t}\r\n\t\t\t})\r\n\r\n\t}\r\n\r\n\thandleRowEdit(roleDetails, roleIsEditing) {\r\n\t\tthis.props.roleManager.message = ''\r\n\t\tthis.setState({\r\n\t\t\tselectedFeaturesIDForUsers: roleDetails.ApplicationFeatures.map((feature) => {\r\n\t\t\t\treturn feature.ID.toString()\r\n\t\t\t}), roleIsEditing: !roleIsEditing, roleId: roleDetails.RoleId, editId: roleDetails.RoleId, roleName: roleDetails.RoleName\r\n\t\t})\r\n\t\tthis.formDispatch(actions.change('roleManager.Role', roleDetails.RoleName));\r\n\t\tthis.formDispatch(actions.setErrors('roleManager.Role', false));\r\n\t};\r\n\r\n\thandleRowDel(roleDetails) {\r\n\t\tthis.props.roleManager.message = ''\r\n\t\tconst result = window.confirm(this.props.validation.confirmDelete);\r\n\t\tif (result) {\r\n\t\t\tvar formValues = { RoleName: roleDetails.RoleName, RoleId: roleDetails.RoleId, CurrentUser: this.props.user.user.Id };\r\n\t\t\tthis.props.deleteRoleAndFeatures(formValues)\r\n\t\t\t\t.then((response) => {\r\n\t\t\t\t\tthis.props.roleManagerSuccess(response.data.Message)\r\n\t\t\t\t\tvar index = this.state.roles.indexOf(roleDetails);\r\n\t\t\t\t\tthis.state.roles.splice(index, 1);\r\n\t\t\t\t\tthis.setState(this.state.roles);\r\n\t\t\t\t\tthis.resetSelection();\r\n\t\t\t\t\tthis.setState({ roleIsEditing: false });\r\n\t\t\t\t}).catch((error) => {\r\n\t\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\t\tthis.props.roleManagerFailure(this.props.validation.networkError)\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse {\r\n\t\t\t\t\t\tthis.props.roleManagerFailure(error.response.data.Message)\r\n\t\t\t\t\t}\r\n\t\t\t\t})\r\n\t\t}\r\n\t};\r\n\r\n\thandleRowCancel() {\r\n\t\tvar isRoleEditing = !this.state.roleIsEditing\r\n\t\tthis.setState({\r\n\t\t\troleIsEditing: isRoleEditing,\r\n\t\t\tselectedFeaturesIDForUsers: ''\r\n\t\t})\r\n\t\tthis.formDispatch(actions.change('roleManager.Role', ''));\r\n\t\tthis.setState({ filterText: '' });\r\n\t\tthis.props.roleManager.message = ''\r\n\t};\r\n\r\n\t// handleUserInput(filterText) {\r\n\t// \tvar selectedRole = this.state.roles.filter(r => r.RoleName.toLowerCase() === (filterText.target.value.toLowerCase()));\r\n\t// \tif (selectedRole.length === 1) {\r\n\t// \t\tthis.handleRowEdit(selectedRole[0], null);\r\n\t// \t\tfilterText.target.value = selectedRole[0].RoleName;\r\n\t// \t\tthis.setState({ filterText: filterText.target.value.toLowerCase() });\r\n\t// \t}\r\n\t// \telse {\r\n\t// \t\tthis.fetchRolesAndFeatures();\r\n\t// \t\tthis.setState({ selectedFeaturesIDForUsers: \"\", roleIsEditing: false });\r\n\t// \t}\r\n\r\n\t// };\r\n\r\n\thandleUserInput(filterText) {\r\n\t\tthis.setState({ filterText: filterText.target.value.toLowerCase() });\r\n\t\tthis.props.roleManager.message = '';\r\n\r\n\t};\r\n\r\n\tresetSelection() {\r\n\t\tthis.formDispatch(actions.change('roleManager.Role', ''));\r\n\t\tthis.setState({ selectedFeaturesIDForUsers: '' });\r\n\t}\r\n\r\n\tisDuplicate(vals) {\r\n\t\tvar response = true;\r\n\t\tvar result = this.state.roles.filter((obj) => {\r\n\t\t\tif (obj.RoleName.toLowerCase() === vals.toLowerCase() && this.state.roleId !== obj.RoleId) {\r\n\t\t\t\treturn true;\r\n\t\t\t}\r\n\t\t});\r\n\t\tresult.length > 0 ? response = false : response = true;\r\n\t\treturn response;\r\n\t}\r\n\r\n\trender() {\r\n\t\tvar getFeatureComponent = (instance) => {\r\n\t\t\tvar row = Object.values(instance.state.roleFeatures).map((features) => {\r\n\t\t\t\tvar check = (instance.state.selectedFeaturesIDForUsers.indexOf(features.ID.toString()) > -1)\r\n\r\n\t\t\t\treturn (\r\n\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t{BreakLine(this.props.content.title)}
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t this.formDispatch = dispatch}\r\n\t\t\t\t\t\t\t\tenctype=\"multipart/form-data\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\t\t\t((this.state.isTableSchemaNameSelected === 'Selected' && this.state.selectedTableSchemaDisplayName !== '')\r\n\t\t\t\t\t\t\t\t\t\t\t\t||\r\n\t\t\t\t\t\t\t\t\t\t\t\t(this.state.isTableSchemaNameSelected === '' && this.state.selectedTableSchemaDisplayName !== ''))\r\n\t\t\t\t\t\t\t\t\t\t\t\t? \r\n\t\t\t\t\t\t\t\t\t\t\t\t: \r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t option.label === this.state.selectedTableSchemaDisplayName)}\r\n\t\t\t\t\t\t\t\t\t\t\t//defaultValue={this.state.selectedTableSchemaDisplayName.length === 0 && this.props.tableSCHEMA.length > 0 ? this.props.tableSCHEMA[0].label : ''}\r\n\t\t\t\t\t\t\t\t\t\t\tnoOptionsMessage={() => null}\r\n\t\t\t\t\t\t\t\t\t\t\tonChange={(value) => this.handleTableSchemaChange(value)}\r\n\t\t\t\t\t\t\t\t\t\t\tvalidators={{ required: (value) => validators.validSelect(this.props.tableSCHEMA.indexOf(value.label)) }}\r\n\t\t\t\t\t\t\t\t\t\t\tvalidateOn=\"change\"\r\n\t\t\t\t\t\t\t\t\t\t\toptions={this.props.tableSCHEMA}\r\n\t\t\t\t\t\t\t\t\t\t\tplaceholder={this.props.content.tableName}\r\n\t\t\t\t\t\t\t\t\t\t\tisSearchable={false}\r\n\t\t\t\t\t\t\t\t\t\t\tclassNamePrefix=\"gen-react-select\"\r\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"gen-react-select-container\"\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\t\t\t(this.state.selectedTableSchemaName.length > 0 && !this.props.user.loading)\r\n\t\t\t\t\t\t\t\t\t\t\t\t?\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t: (this.state.selectedTableSchemaName.length > 0 && this.props.user.loading)\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t?\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t{/* \r\n\t\t\t\t\t\t\t\t\t
*/}\r\n\t\t\t\t\t\t\t\t{this.state.responseMsg}
\r\n\t\t\t\t\t\t\t{this.props.user.error}
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t)\r\n\t\t\t})\r\n\t\t\treturn row;\r\n\t\t}\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t\t\t instance.handleFeatureCheckChanged(e)}\r\n\t\t\t\t\t\t\t\tname={features.ID} value={features.FeatureName} />\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\tinstance.handleFeatureCheckChanged(e)} defaultValue={features.ID} >{features.FeatureName}
\r\n\t\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n\r\n}\r\n\r\nclass SearchBar extends React.Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t}\r\n\thandleChange(event) {\r\n\t\tthis.props.onUserInput(event);\r\n\t}\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t{BreakLine(this.props.content.title)}
\r\n\t\t\t\t\t\t\t this.formDispatch = dispatch}\r\n\t\t\t\t\t\t\t\tonSubmit={(values) => this.handleAddUpdateRoleAndFeatures(values)}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{this.props.content.featureLabel}\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{getFeatureComponent(this)}\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t{this.props.roleManager.error}
\r\n\t\t\t\t\t\t\t{this.props.roleManager.message}
\r\n\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\r\n\t\t\t\r\n\t\t\t\t this.props.isDuplicate(vals)\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tvalidateOn=\"blur\"\r\n\t\t\t\t/>\r\n\t\t\t\t
\r\n\t\t);\r\n\t}\r\n}\r\n\r\nclass RoleFeatureTable extends React.Component {\r\n\trender() {\r\n\t\tvar rowDel = this.props.onRowDel;\r\n\t\tvar rowEdit = this.props.onRowEdit;\r\n\t\t// var rowSave = this.props.onRowSave;\r\n\t\tvar rowCancel = this.props.onRowCancel;\r\n\t\tvar filterText = this.props.filterText;\r\n\t\tvar filterRole = this.props.filterRole;\r\n\t\tvar roleEditing = this.props.roleEditing;\r\n\t\tvar editId = this.props.editId;\r\n\r\n\t\tvar role = this.props.roles.map(function (role) {\r\n\t\t\tif (role.RoleName.toLowerCase().indexOf(filterText) === -1) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\telse return (\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t
\r\n\t\t);\r\n\t}\r\n}\r\n\r\nclass RoleFeatureRow extends React.Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = {\r\n\t\t\tfeatures: this.props.role.features,\r\n\t\t\toriginalFeatures: this.props.role.features,\r\n\t\t};\r\n\t\tthis.onChangeCancel = this.onChangeCancel.bind(this)\r\n\t\tthis.onCancelEvent = this.onCancelEvent.bind(this)\r\n\t}\r\n\r\n\tonChangeCancel(e) {\r\n\t\tthis.setState({\r\n\t\t\tfeatures: this.state.originalFeatures\r\n\t\t})\r\n\t\tthis.props.onCancelEvent()\r\n\t}\r\n\r\n\tonDelEvent() {\r\n\t\tthis.props.onDelEvent(this.props.role);\r\n\t}\r\n\r\n\tonEditEvent() {\r\n\t\tthis.props.onEditEvent(this.props.role, this.props.roleIsEditing);\r\n\t}\r\n\r\n\tonCancelEvent() {\r\n\t\tthis.props.onCancelEvent(this.props.roleIsEditing);\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t| Role Name | \r\n\t\t\t\t\t\t\tFeatures | \r\n\t\t\t\t\t\t\tUpdated By | \r\n\t\t\t\t\t\t\tUpdated On | \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t | \r\n\t\t\t\t\t\t |
|---|
\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nclass SearchBar extends React.Component {\r\n\tconstructor(props) {\r\n\t super(props);\r\n\t}\r\n \r\n\thandleChange(event) {\r\n\t this.props.onUserInput(event);\r\n\t}\r\n \r\n\trender() {\r\n\t return (\r\n\t\t\r\n\t\t\t\t\t
\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t{this.props.content.title}
\r\n\t\t\t\t\t\t\t this.formDispatch = dispatch}\r\n\t\t\t\t\t\t\t\tonSubmit={(values) => this.handleAddCapIqUser(values)}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t
\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t{this.props.user.error}
\r\n {this.state.responseMsg}
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{ this.state.capIqUsersData !== undefined ?\r\n\t\t\t\t \t
\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t
\r\n\t );\r\n\t}\r\n }\r\n\r\nclass CapIqUserTable extends React.Component {\r\n\trender() {\r\n\r\n var filterText = this.props.filterText;\r\n\tvar rowDel = this.props.onRowDel;\r\n\t\r\n\tvar data = this.props.data.map(function (data) {\r\n if (data.Email_Id.toLowerCase().indexOf(filterText) === -1) {\r\n return;\r\n }\r\n \r\n else return (\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t
\r\n\t\t);\r\n\t}\r\n}\r\n\r\nclass CapIqUserRow extends React.Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = {\t\t\t\r\n\t\t};\t\t\r\n\t}\t\r\n\r\n\tonDelEvent() {\r\n\t\tthis.props.onDelEvent(this.props.data);\r\n\t}\t\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t| AddedBy | \r\n\t\t\t\t\t\t\tAdded On | \t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t |
|---|
\r\n\t\t\t{\r\n\t\t\t\tprops.disabled && props.showLoader ? : {props.content}\r\n\t\t\t}\r\n\t\t
\r\n\t)\r\n}\r\n\r\nconst PopupButton = (props) =>\r\n\t\r\n
)\r\n\r\n left = left + val.width\r\n\r\n return cellValue\r\n } else {\r\n let width = 0\r\n val.forEach(item => {\r\n width = width + item.width\r\n })\r\n // const width = val.length * val.width\r\n let cellValue = (\r\n
\r\n \r\n
)\r\n\r\n val.forEach(item => {\r\n left = left + item.width\r\n })\r\n\r\n return cellValue\r\n }\r\n })\r\n\r\n return \r\n {key}\r\n
\r\n {headerGroupDiv}
\r\n }\r\n\r\n\r\n if (this.state.pendingRecords.length === 0) {\r\n return renderBaseRow(props);\r\n }\r\n //let rowData = this.state.rowData\r\n let backgroundColor = '';\r\n let textAlign = 'left';\r\n\r\n const pendingRecords = this.state.pendingRecords;\r\n const warningRecords = this.state.warningRecords;\r\n const errorRecords = this.state.errorRecords;\r\n\r\n var totalPendingRecords = []\r\n Object.values(pendingRecords).forEach((item) => {\r\n totalPendingRecords = totalPendingRecords.concat(item);\r\n })\r\n\r\n var totalWarningRecords = []\r\n Object.values(warningRecords).forEach((item) => {\r\n totalWarningRecords = totalWarningRecords.concat(item);\r\n })\r\n\r\n var totalErrorRecords = []\r\n Object.values(errorRecords).forEach((item) => {\r\n totalErrorRecords = totalErrorRecords.concat(item);\r\n })\r\n\r\n totalPendingRecords.map(item => {\r\n if (item == props.row[this.props.keyColumn]) {\r\n backgroundColor = 'lightgray'\r\n }\r\n })\r\n\r\n totalWarningRecords.map(item => {\r\n if (item == props.row[this.props.keyColumn]) {\r\n backgroundColor = 'yellow'\r\n }\r\n })\r\n\r\n totalErrorRecords.map(item => {\r\n if (item == props.row[this.props.keyColumn]) {\r\n backgroundColor = 'red'\r\n }\r\n })\r\n\r\n return {renderBaseRow(props)}
;\r\n\r\n };\r\n\r\n componentDidMount() {\r\n if (this.props.onRef)\r\n this.props.onRef(this)\r\n\r\n // const canvas = document.getElementsByClassName('react-grid-Canvas')[0]\r\n\r\n // const length = this.state.columnDefs.length * 120\r\n // const dummyScrollRatio = length / document.documentElement.clientWidth\r\n // canvas.scrollLeft = dummy.scrollLeft //* dummyScrollRatio\r\n }\r\n\r\n getApplicationFeatureActions() {\r\n let actions = [];\r\n let applicationFeatures = this.props.user && this.props.user.user && this.props.user.user.applicationFeatures ? this.props.user.user.applicationFeatures : [];\r\n applicationFeatures.map(applicationFeat => {\r\n actions.push(applicationFeat.Action);\r\n })\r\n return actions;\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this.props.onRef)\r\n this.props.onRef(undefined)\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.apiResponse && (nextProps.apiResponse.isError !== this.state.isError || nextProps.apiResponse.message != this.state.responseMsg)) {\r\n this.setState({ responseMsg: nextProps.apiResponse.message, isError: nextProps.apiResponse.isError, isLoading: nextProps.apiResponse.isLoading })\r\n }\r\n else if (nextProps.columns && (nextProps.data != this.state.rowData || nextProps.data.length != this.state.rowData.length)) {\r\n this.loadData(nextProps);\r\n }\r\n else if(nextProps.scc && nextProps.columns !== this.state.sccColumns){\r\n this.setState({sccColumns: nextProps.columns})\r\n this.loadData(nextProps);\r\n }\r\n\r\n }\r\n\r\n loadData(props) {\r\n const colConfigArr = props.columns;\r\n\r\n if(props.keyColumn == 'GICS_ID' && \r\n (\r\n (props.user.userprofile && props.user.userprofile.Roles && props.user.userprofile.Roles.length > 0 && props.user.userprofile.Roles[0].includes(\"Admin\"))\r\n )\r\n )\r\n {}\r\n else if(props.keyColumn == 'GICS_ID' && \r\n (\r\n (props.user.userprofile && props.user.userprofile.Roles && props.user.userprofile.Roles.length > 0 && props.user.userprofile.Roles[0].includes(\"Standard Internal User\")) || \r\n (props.user.userprofile && props.user.userprofile.Roles && props.user.userprofile.Roles.length > 0 && props.user.userprofile.Roles[0].includes(\"Standard Partner User\"))\r\n )\r\n )\r\n props.columns.map(e => e.editable = false);\r\n\r\n colConfigArr.forEach(item => {\r\n item.editable = item.editable && !this.props.readOnly\r\n })\r\n\r\n this.setState({ responseMsg: '', isError: 'No' })\r\n var self = this\r\n var column = [];\r\n for (var i = 0; i < props.data.length; i++) {\r\n column = Object.keys(props.data[0]);\r\n if (i === 0)\r\n break;\r\n }\r\n if (column.length === 0) {\r\n //this.setState({ responseMsg: this.props.content.noData, isError: 'Yes', isLoading: false,excelColumns: [], columnDefs: [], rowData: [], filteredRows: [], pageCount: 0 })\r\n this.setState({ isLoading: false, excelColumns: [], columnDefs: [], rowData: [], filteredRows: [], pageCount: 0 })\r\n }\r\n else {\r\n var excelColumns = []\r\n\r\n for (let index = 0; index < column.length; index++) {\r\n const fieldName = column[index];\r\n var fieldConfigIdx = colConfigArr.findIndex((item) => {\r\n return item.key === fieldName\r\n })\r\n\r\n if (fieldConfigIdx !== -1) {\r\n const fieldConfig = colConfigArr[fieldConfigIdx]\r\n\r\n if (fieldConfig.exportFl) {\r\n excelColumns.push({ label: fieldConfig.name, key: fieldName, seq: fieldConfig.screenSeq, isCellEditable: fieldConfig.editable })\r\n }\r\n }\r\n\r\n }\r\n\r\n var finalRows = props.data;\r\n if (finalRows.length > 0) {\r\n let keys = Object.keys(finalRows[0])\r\n finalRows.forEach((item) => {\r\n keys.forEach(key => {\r\n item[key] = item[key] === null ? '' : item[key]\r\n })\r\n })\r\n }\r\n\r\n //finalRows.sort((a, b) => { return a[props.keyColumn] - b[props.keyColumn] })\r\n finalRows.sort((a, b) => { return isNaN(a[props.keyColumn]) ? ('' + a[props.keyColumn]).localeCompare(b[props.keyColumn]) : a[props.keyColumn] - b[props.keyColumn] })\r\n\r\n excelColumns.sort((a, b) => {\r\n var seq1 = isNaN(a.seq) ? 9999 : a.seq;\r\n var seq2 = isNaN(b.seq) ? 9999 : b.seq;\r\n return seq1 - seq2\r\n })\r\n\r\n var filteredRows = cloneDeep(finalRows)\r\n if (this.props.defaultSort && this.props.defaultSort.length > 0) {\r\n this.props.defaultSort.forEach(item => {\r\n filteredRows.sort((a, b) => { return isNaN(a[item]) ? ('' + a[item]).localeCompare(b[item]) : a[item] - b[item] })\r\n })\r\n }\r\n\r\n var pageCount = finalRows.length / this.state.perPage\r\n\r\n // const canvas = document.getElementsByClassName('react-grid-Canvas')[0]\r\n // const dummyScroll = document.getElementsByClassName('scroll-dummy-child')[0]\r\n // let width = 0;\r\n // colConfigArr.forEach(c => {\r\n // width += c.width\r\n // })\r\n\r\n // dummyScroll.style.width = (width) + 'px'\r\n // const dummyElement = document.getElementsByClassName('scroll-dummy')[0]\r\n // dummyElement.style.width = this.props.scc ? '94vw' : '80vw';\r\n\r\n // canvas.onscroll = () => {\r\n // if (this.state.dummyScroll) {\r\n // this.setState({ dummyScroll: false })\r\n // return\r\n // }\r\n\r\n // this.setState({ actualScroll: true }, () => {\r\n // const dummy = document.getElementsByClassName('scroll-dummy')[0]\r\n // let length = 0\r\n // colConfigArr.forEach(c => {\r\n // length += c.width\r\n // })\r\n\r\n // const dummyScrollRatio = document.documentElement.clientWidth / length\r\n // dummy.scrollLeft = canvas.scrollLeft// * dummyScrollRatio\r\n // })\r\n // }\r\n this.setState({ excelColumns: excelColumns, columnDefs: colConfigArr, rowData: finalRows, filteredRows: filteredRows, pageCount: pageCount, isError: 'No', isLoading: false })\r\n }\r\n }\r\n\r\n sortFilteredRows = (filteredRows) => {\r\n if (!this.sortedColumns) {\r\n return filteredRows\r\n }\r\n\r\n var comparerAsc = (sortColumn) => (a, b) => {\r\n return (a[sortColumn] > b[sortColumn]) ? 1 : -1;\r\n }\r\n\r\n var comparerDesc = (sortColumn) => (a, b) => {\r\n return (a[sortColumn] < b[sortColumn]) ? 1 : -1;\r\n }\r\n\r\n this.sortedColumns.forEach((item) => {\r\n let sortColumn = item.key;\r\n let sortDirection = item.direction\r\n if (sortDirection === 'NONE') {\r\n return\r\n }\r\n\r\n var comparer = comparerAsc(sortColumn);\r\n if (sortDirection === 'DESC') {\r\n comparer = comparerDesc(sortColumn)\r\n }\r\n\r\n\r\n filteredRows.sort(comparer);\r\n })\r\n\r\n return filteredRows;\r\n };\r\n\r\n sortRows = (sortColumn, sortDirection) => {\r\n if (!this.sortedColumns) {\r\n this.sortedColumns = []\r\n }\r\n\r\n let rowIdx = this.sortedColumns.findIndex((item) => {\r\n return item.key === sortColumn\r\n })\r\n\r\n if (rowIdx !== -1) {\r\n this.sortedColumns.splice(rowIdx, 1);\r\n }\r\n\r\n this.sortedColumns.push({ key: sortColumn, direction: sortDirection })\r\n\r\n if (sortDirection === 'NONE') {\r\n return\r\n }\r\n\r\n var comparer = function (a, b) {\r\n if (sortDirection === 'ASC') {\r\n return (a[sortColumn] > b[sortColumn]) ? 1 : -1;\r\n } else if (sortDirection === 'DESC') {\r\n return (a[sortColumn] < b[sortColumn]) ? 1 : -1;\r\n }\r\n }\r\n\r\n var filteredRows = this.state.filteredRows;\r\n\r\n var rows = filteredRows.sort(comparer);\r\n\r\n var pageCount = rows.length / this.state.perPage\r\n this.setState({ filteredRows: [] }, () => this.setState({ filteredRows: rows }))\r\n };\r\n\r\n handlePageClick = data => {\r\n let selected = data.selected;\r\n let offset = Math.ceil(selected * this.state.perPage);\r\n this.setState({ paginatedRowFrom: offset, paginatedRowTo: (offset + this.state.perPage) });\r\n };\r\n\r\n handleFilterChange(filter) {\r\n var rows = [...this.state.rowData];\r\n let newFilters = { ...this.state.filters };\r\n if (filter === null) {\r\n this.setState({ filters: null, filteredRows: rows }, this.getRows(rows, {}))\r\n return;\r\n\r\n } else if (filter.filterTerm) {\r\n newFilters[filter.column.key] = filter;\r\n } else {\r\n delete newFilters[filter.column.key];\r\n }\r\n\r\n this.setState({ filters: newFilters }, this.getRows(rows, newFilters))\r\n\r\n return newFilters;\r\n };\r\n\r\n sum(finalRows, colDefs = this.state.columnDefs) {\r\n if (finalRows.length >= 1) {\r\n let arr2 = cloneDeep(finalRows[0]);\r\n for (const key in arr2) {\r\n arr2[key] = ''\r\n }\r\n\r\n arr2['DATA_COLLECTIONS_SKEY'] = 'Total :'\r\n\r\n let summationArrayKeys = ['AGGREGATE_INVOICE_COUNT', 'AGGREGATE_INVOICE_SPEND', 'AGGREGATE_PO_COUNT', 'AGGREGATE_PO_SPEND', 'AGREEGATE_PAYMENT_COUNT',\r\n 'ERP_INVOICE_COUNT', 'ERP_INVOICE_SPEND','ERP_PO_COUNT', 'ERP_PO_SPEND', 'PAYMENT_COUNT', 'SAP_ARIBA_DOC_PROXY', 'SAP_ARIBA_SPEND_PROXY', 'SAP_ARIBA_SPEND_PROXY_USD','AN_SMP_FEE_EST_BUYER_CURR','ERP_INV_SPEND_IN_STD_CURR','ENTERPRISE_ESTIM_SUPP_YIELD',\r\n 'ENTERPRISE_ESTIM_SPEND_YIELD','ENTERPRISE_ESTIM_DOC_YIELD','ERP_DOCUMENT_CNT','ERP_SPEND','ESTI_CAPTURABLE_NET_TRNS_FEE_REVENUE','ERP_PO_CNT'\r\n ,'ERP_INV_CNT','AGGR_PO_SPEND','AGGR_PO_CNT','AGGR_OC_CNT','AGG_ASN_CNT','AGGR_INV_CNT','AGGR_INV_SPEND']\r\n summationArrayKeys.forEach(key => arr2[key] = 0)\r\n\r\n finalRows.forEach(item => {\r\n summationArrayKeys.forEach(key => {\r\n arr2[key] += (item[key] === '' ? 0 : item[key])\r\n })\r\n })\r\n\r\n arr2['ENTERPRISE_ESTIM_SUPP_YIELD'] = arr2['ENTERPRISE_ESTIM_SUPP_YIELD'] / 100;\r\n //arr2['ERP_INV_CNT'] =(Math.round(parseFloat(arr2['ERP_INV_CNT']) * 100) / 100).toFixed(2); \r\n arr2['ERP_INV_CNT'] =(parseFloat(arr2['ERP_INV_CNT'])).toFixed(2);\r\n arr2['ERP_PO_SPEND'] =(parseFloat(arr2['ERP_PO_SPEND'])).toFixed(2); \r\n arr2['AGGR_INV_SPEND'] =(parseFloat(arr2['AGGR_INV_SPEND'])).toFixed(2);\r\n arr2['ERP_INV_SPEND_IN_STD_CURR'] =(parseFloat(arr2['ERP_INV_SPEND_IN_STD_CURR'])).toFixed(2); \r\n arr2['AGGR_PO_SPEND'] =(parseFloat(arr2['AGGR_PO_SPEND'])).toFixed(2); \r\n return arr2;\r\n }\r\n }\r\n\r\n getValidFilterValues(columnId) {\r\n var rows = this.state.rowData\r\n var isFilterVisible = this.state.isFilterVisible\r\n this.filteredColumnValues = this.filteredColumnValues ? this.filteredColumnValues : []\r\n if (this.filteredColumnValues[columnId] === undefined) {\r\n var rows_filter = [... new Set(rows.map(item => item[columnId] != null ? item[columnId] : \"\"))]\r\n rows_filter.splice(0, 0, 'Not Included')\r\n this.filteredColumnValues[columnId] = rows_filter\r\n return rows_filter\r\n } else {\r\n return this.filteredColumnValues[columnId]\r\n }\r\n }\r\n\r\n getRows(rows, filters) {\r\n let filteredRows = selectors.getRows({ rows, filters });\r\n filteredRows = this.sortFilteredRows(filteredRows)\r\n\r\n if (this.props.onFilter) {\r\n this.props.onFilter(filteredRows)\r\n }\r\n\r\n //Summation row logic\r\n let sum = this.state.summationArray\r\n if (Object.keys(filters).length >= 1) {\r\n sum = this.sum(filteredRows)\r\n }\r\n var pageCount = Math.ceil(filteredRows.length / this.state.perPage);\r\n this.setState({ filteredSummationArray : sum , filteredRows: filteredRows, paginatedRowFrom: 0, paginatedRowTo: this.state.perPage, pageCount: pageCount, filters: filters });\r\n }\r\n\r\n uploadButtonClick() {\r\n this.uploadFile();\r\n this.setState({ sccSaveFlag: false })\r\n }\r\n\r\n uploadFile() {\r\n document.getElementById('inputFile').click();\r\n }\r\n\r\n exportCsv() {\r\n const rowData = this.state.rowData;\r\n const excelColumns = this.props.scc ? this.props.sccExcelColumns : this.state.excelColumns;\r\n const csvRows = [];\r\n\r\n var keys = excelColumns.map((cols) => {\r\n return cols.key\r\n })\r\n\r\n var headers = excelColumns.map((cols) => {\r\n return cols.label.includes(',') ? cols.label.replaceAll(\",\", \"ˏ\") : cols.label\r\n //return cols.label\r\n })\r\n\r\n const options = {\r\n filename: this.props.exportFileName,\r\n decimalSeparator: '.',\r\n showLabels: true,\r\n showTitle: false,\r\n useTextFile: false,\r\n keys: keys,\r\n headers: headers\r\n };\r\n\r\n const csvExporter = new ExportToCsv(options);\r\n\r\n csvExporter.generateCsv(rowData);\r\n this.setState({ exportFlag: true })\r\n }\r\n\r\n exportToExcel = () => {\r\n\r\n let apiData = this.state.rowData;\r\n let fileName = 'Scc_Data';\r\n const excelColumns = this.state.excelColumns;\r\n //create new excel work book\r\n let workbook = new Workbook();\r\n // //add name to sheet\r\n let worksheet = workbook.addWorksheet(\"Scc_Data\");\r\n\r\n //replace key label by header as workbook reads only header key\r\n const newArrayOfObj = excelColumns.map(({\r\n label: header,\r\n ...rest\r\n }) => ({\r\n header,\r\n ...rest\r\n }));\r\n\r\n worksheet.columns = newArrayOfObj;\r\n\r\n for (const row of this.state.rowData) {\r\n worksheet.addRow(row);\r\n }\r\n let fname = \"Scc_Data\"\r\n\r\n let editableColumns = ['Skey', 'Reference Number'];\r\n // const idCol = worksheet.getColumn('DATA_COLLECTIONS_SKEY');\r\n worksheet.eachRow(function (row, rowNumber) {\r\n row.eachCell(function (cell, colNumber) {\r\n let flag = editableColumns.includes(cell.value);\r\n if (flag)\r\n row.getCell(colNumber).fill = {\r\n type: 'pattern',\r\n pattern: 'solid',\r\n fgColor: { argb: '007ad9' }\r\n };\r\n });\r\n });\r\n\r\n // //add data and file name and download\r\n workbook.xlsx.writeBuffer().then((data) => {\r\n let blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });\r\n FileSaver.saveAs(blob, fname + '-' + new Date().valueOf() + '.xlsx');\r\n });\r\n\r\n this.setState({ exportFlag: true })\r\n };\r\n\r\n filterValidationRecords(e, skeys) {\r\n const rowData = this.state.rowData;\r\n const filteredRows = [];\r\n skeys.forEach((item) => {\r\n var rowIdx = binarySearchIndex(rowData, item, this.props.keyColumn)\r\n var idx = filteredRows.findIndex((item) => {\r\n return item[this.props.keyColumn] === rowData[rowIdx][this.props.keyColumn]\r\n })\r\n\r\n if (rowIdx !== -1 && idx === -1) {\r\n filteredRows.push(rowData[rowIdx]);\r\n }\r\n })\r\n\r\n this.setState({ filteredRows: filteredRows })\r\n e.stopPropagation();\r\n }\r\n\r\n getValidationDiv() {\r\n const pendingRecords = this.state.pendingRecords;\r\n const warningRecords = this.state.warningRecords;\r\n const errorRecords = this.state.errorRecords;\r\n if (pendingRecords.length === 0) {\r\n return '';\r\n }\r\n\r\n var warningRecordSize = 0;\r\n var totalWarningRecords = []\r\n Object.values(warningRecords).forEach((item) => {\r\n totalWarningRecords = totalWarningRecords.concat(item);\r\n })\r\n var warningDiv = Object.keys(warningRecords).map((key, index) => (\r\n warningRecords[key].length !== 0 ?\r\n this.filterValidationRecords(e, warningRecords[key])}>\r\n \r\n ![](\"images/Dot.svg\")
\r\n \r\n
: ''\r\n ))\r\n\r\n var errorRecordSize = 0;\r\n var totalErrorRecords = []\r\n Object.values(errorRecords).forEach((item) => {\r\n totalErrorRecords = totalErrorRecords.concat(item);\r\n })\r\n\r\n var errorDiv = Object.keys(errorRecords).map((key, index) => (\r\n errorRecords[key].length !== 0 ?\r\n \r\n \r\n \r\n {key} {this.props.detailedFile.validationForText}\r\n {formatThousands(warningRecords[key].length)} {this.props.detailedFile.validationRowsText}\r\n \r\n
\r\n this.filterValidationRecords(e, errorRecords[key])}>\r\n \r\n \r\n \r\n
: ''\r\n ))\r\n\r\n var validationDiv = (\r\n \r\n \r\n \r\n {key} {this.props.detailedFile.validationForText}\r\n {formatThousands(errorRecords[key].length)} {this.props.detailedFile.validationRowsText}\r\n \r\n
\r\n \r\n
)\r\n\r\n return validationDiv;\r\n }\r\n\r\n warningToggle() {\r\n this.setState((previousState) => { return { warningDiv: !previousState.warningDiv } })\r\n }\r\n\r\n errorToggle() {\r\n this.setState((previousState) => { return { errorDiv: !previousState.errorDiv } })\r\n }\r\n\r\n expandFilter(item) {\r\n let filters;\r\n (item.type === NumericFilterRenderer || item.type === TextfilterRenderer || item.type === 'global') ?\r\n filters = (\r\n
\r\n this.filterValidationRecords(e, pendingRecords)}>\r\n \r\n {formatThousands(pendingRecords.length)} {this.props.detailedFile.validationRecordText} \r\n {this.props.detailedFile.pendingChangeMessage}\r\n
\r\n {totalWarningRecords.length > 0 ?\r\n {formatThousands(pendingRecords.length)} {this.props.detailedFile.validationRecordText} \r\n {this.props.detailedFile.pendingChangeMessage}\r\n \r\n
: ''}\r\n {totalErrorRecords.length > 0 ?\r\n this.filterValidationRecords(e, totalWarningRecords)}>\r\n \r\n {formatThousands(totalWarningRecords.length)} {this.props.detailedFile.validationWarningText} {this.props.detailedFile.warningChangeMessage}\r\n
\r\n {formatThousands(totalWarningRecords.length)} {this.props.detailedFile.validationWarningText} {this.props.detailedFile.warningChangeMessage}\r\n \r\n {this.state.warningDiv ? ![](\"images/minus-inactive.svg\")
: ![](\"images/add.svg\")
}\r\n
\r\n {this.state.warningDiv ? warningDiv : ''}\r\n : }\r\n \r\n
: ''}\r\n this.filterValidationRecords(e, totalErrorRecords)}>\r\n \r\n {formatThousands(totalErrorRecords.length)} {this.props.detailedFile.validationErrorText} {this.props.detailedFile.validationThatText} {this.props.detailedFile.validationMustText} {this.props.detailedFile.errorChangeMessage}\r\n
\r\n {formatThousands(totalErrorRecords.length)} {this.props.detailedFile.validationErrorText} {this.props.detailedFile.validationThatText} {this.props.detailedFile.validationMustText} {this.props.detailedFile.errorChangeMessage}\r\n \r\n {this.state.errorDiv ? : }\r\n
\r\n {this.state.errorDiv ? errorDiv : ''}\r\n : }\r\n this.removeFilter(item, item.rawValue)}\r\n color\r\n >{item.rawValue}\r\n \r\n
) :\r\n filters = item.filterTerm.map((item1) => (\r\n (\r\n this.removeFilter(item, item1.value)}\r\n color\r\n >{item1.value}\r\n \r\n
)\r\n ))\r\n\r\n return filters\r\n }\r\n\r\n\r\n removeFilter(filter, item1, removeAll = false) {\r\n var breadCrumbsArray = this.state.filters;\r\n if (breadCrumbsArray) {\r\n Object.values(breadCrumbsArray).forEach(item => {\r\n if (item.type !== NumericFilterRenderer && item.type !== TextfilterRenderer && item.type !== 'global') {\r\n if (item.clear) {\r\n item.clear()\r\n }\r\n\r\n if (removeAll) {\r\n item.filterTerm.length = 0;\r\n return;\r\n }\r\n var idx = item.filterTerm.findIndex(t => t.value === item1 && item.column.key === filter.column.key)\r\n if (idx !== -1) {\r\n if (item.clear) {\r\n item.clear()\r\n }\r\n item.filterTerm.splice(idx, 1)\r\n\r\n if (item.filterTerm.length === 0) {\r\n delete breadCrumbsArray[filter.column.key]\r\n }\r\n }\r\n } else if (removeAll || (item.column.key === filter.column.key && item.rawValue === item1)) {\r\n if (item.clear) {\r\n item.clear()\r\n }\r\n\r\n if (!removeAll)\r\n delete breadCrumbsArray[filter.column.key]\r\n }\r\n })\r\n }\r\n\r\n if (removeAll) {\r\n breadCrumbsArray = {}\r\n }\r\n\r\n\r\n var rows = [...this.state.rowData];\r\n this.setState({ filters: breadCrumbsArray }, () => {\r\n this.getRows(rows, breadCrumbsArray)\r\n })\r\n }\r\n\r\n listenScrollEvent() {\r\n if (this.state.actualScroll) {\r\n this.setState({ actualScroll: false })\r\n return\r\n }\r\n\r\n this.setState({ dummyScroll: true }, () => {\r\n const canvas = document.getElementsByClassName('react-grid-Canvas')[0]\r\n const dummy = document.getElementsByClassName('scroll-dummy')[0]\r\n const length = this.state.columnDefs.length * 120\r\n const dummyScrollRatio = length / document.documentElement.clientWidth\r\n canvas.scrollLeft = dummy.scrollLeft //* dummyScrollRatio\r\n })\r\n }\r\n\r\n // onColumnSelection(param){\r\n // this.props.onColumnSelection(param)\r\n // } \r\n\r\n render() {\r\n const paginatedRows = this.state.filteredRows.slice(this.state.paginatedRowFrom, this.state.paginatedRowTo);\r\n paginatedRows.splice(0, 0, { superHeader: this.props.headerToColumn })\r\n //let summationArray = this.state.filteredSummationArray == {} ? this.props.filteredSummationArray : this.state.filteredSummationArray\r\n //this.setState({ filteredSummationArray: this.props.filteredSummationArray });\r\n //let summationArray = this.state.filteredSummationArray == undefined && this.state.filters.length == 0 ? this.props.filteredSummationArray : (Object.keys(this.state.filteredSummationArray).length === 0 && this.state.filteredSummationArray.constructor === Object) ? this.props.filteredSummationArray : this.state.filteredSummationArray;\r\n let summationArray = this.state.filteredRows.length == 0 ? {} : this.state.filteredSummationArray == undefined ? this.props.filteredSummationArray : (Object.keys(this.state.filteredSummationArray).length === 0 && this.state.filteredSummationArray.constructor === Object) ? this.props.filteredSummationArray : this.state.filteredSummationArray;\r\n \r\n paginatedRows.splice(1, 0, summationArray)\r\n const validationDiv = this.getValidationDiv();\r\n var columnDefs = this.setColumnWidth(paginatedRows, this.state.columnDefs)\r\n //const height = paginatedRows.length === 0 ? 700 : (paginatedRows.length * 35 + 45)\r\n var filter = this.state.filters ? Object.entries(cloneDeep(this.state.filters)) : []\r\n\r\n return (\r\n \r\n \r\n\r\n
\r\n \r\n\r\n {this.props.currentFilter ?\r\n
\r\n\r\n\r\n \r\n
\r\n : null}\r\n\r\n \r\n {this.state.rowData.length === 0 ? '' :\r\n
\r\n {this.props.detailedFile.currentFilterRows} {formatThousands(this.state.filteredRows.length)}/{formatThousands(this.state.rowData.length)} {this.props.detailedFile.totalText}
}\r\n {this.props.detailedFile.currentFilterSelection}
\r\n \r\n {filter.length === 0 ? 'No filter currently selected' :\r\n filter.map((item) => {\r\n return (\r\n (item.length === 0 || item[1].filterTerm.length === 0) ? '' :\r\n
\r\n {item[1].column.name}:
\r\n )\r\n })\r\n }\r\n {this.expandFilter(item[1])}
\r\n
\r\n\r\n \r\n {(this.state.isLoading) ?\r\n 
\r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n\r\n
\r\n \r\n {this.state.pendingRecords.length > 0 ?
\r\n \r\n {validationDiv}\r\n
: ''}\r\n 0,\r\n 'medium-12': this.state.pendingRecords.length === 0,\r\n })}>\r\n {this.props.isEditable !== false ?\r\n
\r\n {this.props.detailedFile.editableColumns}
\r\n : null}\r\n \r\n
\r\n \r\n
\r\n \r\n option.value === this.state.perPage)}\r\n noOptionsMessage={() => null}\r\n onChange={(value) => this.handlePageCountChange(value.value)}\r\n options={this.state.pageCountOption}\r\n isSearchable={false}\r\n />\r\n
\r\n \r\n '}\r\n breakLabel={'...'}\r\n breakClassName={'break-me'}\r\n pageCount={this.state.pageCount}\r\n marginPagesDisplayed={2}\r\n pageRangeDisplayed={5}\r\n onPageChange={this.handlePageClick}\r\n containerClassName={'pagination'}\r\n subContainerClassName={'pages pagination'}\r\n activeClassName={'active'}\r\n pageClassName={'page-li'}\r\n previousClassName={'previousClassName'}\r\n nextClassName={'nextClassName'}\r\n pageLinkClassName={'pageLinkClassName'}\r\n activeLinkClassName={'activeLinkClassName'}\r\n />\r\n
\r\n \r\n {this.props.export ?\r\n : ''\r\n }\r\n {this.props.exportFromScc ?\r\n : ''\r\n }\r\n {this.props.scc ?\r\n : ''\r\n }\r\n {this.props.scc ?\r\n : ''\r\n }\r\n {this.props.scc ?\r\n \r\n \r\n this.callback()}\r\n modalStyle={columnFieldModalStyle}\r\n contentStyle={suggestedValueContentStyle}\r\n >\r\n this.closeColumnFieldPopup()} />\r\n : ''}\r\n {this.props.save ?\r\n : ''\r\n }\r\n
\r\n \r\n \r\n {/* { this.myOpenGrid = dataGrid; }}\r\n columns={columnDefs}\r\n minWidth={'100%'}\r\n rowsCount={paginatedRows.length}\r\n minHeight={this.props.minHeight ? this.props.minHeight : 700}\r\n onGridRowsUpdated={this.onGridRowsUpdated}\r\n enableCellSelect={true}\r\n onGridSort={this.sortRows}\r\n rowGetter={i => paginatedRows[i]}\r\n toolbar={ this.handleFilterChange(null)} numberOfRows={this.state.rowData.length} filterRowsButtonText={{![](\"images/filter_active.svg\" "{this.props.detailedFile.filter}")
}} />}\r\n onAddFilter={filter => this.handleFilterChange(filter)}\r\n onClearFilters={() => this.handleFilterChange(null)}\r\n onFilterChange={filter => this.handleFilterChange(filter)}\r\n getValidFilterValues={this.getValidFilterValues}\r\n RowsContainer={ContextMenuTrigger}\r\n rowRenderer={this.RowRenderer}\r\n onCheckCellIsEditable={this.isCellEditable}\r\n onColumnResize={(idx, width) => this.columnResize(`${idx}`, `${width}`)}\r\n headerRowHeight={this.props.headerRowHeight ? this.props.headerRowHeight : 50}\r\n />\r\n\r\n
\r\n \r\n \r\n
*/}\r\n }} />}\r\n onAddFilter={filter => this.handleFilterChange(filter)}\r\n onClearFilters={() => this.handleFilterChange(null)}\r\n onFilterChange={filter => this.handleFilterChange(filter)}\r\n getValidFilterValues={this.getValidFilterValues}\r\n RowsContainer={ContextMenuTrigger}\r\n rowRenderer={this.RowRenderer}\r\n onCheckCellIsEditable={this.isCellEditable}\r\n onColumnResize={(idx, width) => this.columnResize(`${idx}`, `${width}`)}\r\n headerRowHeight={this.props.headerRowHeight ? this.props.headerRowHeight : 50}\r\n />\r\n\r\n \r\n
\r\n )\r\n });\r\n return div;\r\n }\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {element.Id ?\r\n this.selectFavTemplate(element, index)}>\r\n \r\n : \r\n }\r\n
\r\n \r\n {\r\n element.Id && !element.edit ? element.TemplateName :\r\n
\r\n \r\n { this.nameInput = input; }} type=\"text\" value={element.TemplateName} onChange={(event) => { this.templateNameChange(index, event.target.value) }} />\r\n {this.state.duplicateNameError ?
\r\n }\r\n {this.props.validation.duplicateFavoriteField}
: null}\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n element.Id && !element.edit ?\r\n :\r\n \r\n }\r\n
\r\n \r\n {\r\n element.Id && !element.edit ?\r\n :\r\n \r\n }\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n ui: state.content.ui,\r\n content: state.content.spendAnalysis.detailedFile,\r\n user: state.default,\r\n spendDetails: state.spendDetails,\r\n validation: state.content.validation,\r\n userData: state.valueStory,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n addFavoriteFields: (UserId, TemplateName, Columns) => dispatch(addFavoriteFields(UserId, TemplateName, Columns)),\r\n getFavoriteFields: (UserId) => dispatch(getFavoriteFields(UserId)),\r\n editFavoriteField: (Id, templateName) => dispatch(editFavoriteField(Id, templateName)),\r\n deleteFavoriteField: (UserId, FavFieldId) => dispatch(deleteFavoriteField(UserId, FavFieldId))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ColumnSelectFavorite)","import React from 'react';\r\nimport Button from 'UI/Button'\r\nimport { Checkbox } from 'material-ui';\r\nimport { connect } from 'react-redux'\r\nimport { isArrayEquals } from 'utils/Utils'\r\nimport { getFavoriteFields } from 'actions/spendActions'\r\n\r\n\r\nimport ColumnSelectFavorite from './ColumnSelectFavorite'\r\n\r\nclass ColumnFields extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n columnTree: this.getColumnTreeData(this.props.columnOptions),\r\n columnGroupVisibility: this.getColumnGroup(this.props.columnOptions),\r\n currentColumnGroupVisibility: this.getColumnGroup(this.props.columnOptions),\r\n enableFilter: false,\r\n selectAll: false,\r\n //showAvailableFields: this.props.scc ? true : false,\r\n showAvailableFields: false,\r\n disableOkBtn: false,\r\n favBtnDisabled: false,\r\n okBtnDisabled: false\r\n }\r\n this.templates = [];\r\n this.defaultColumns = [];\r\n this.flightPlanningColumns = [];\r\n this.internalEnablementInsightViewColumns = [];\r\n this.externalEnablementInsightViewColumns = [];\r\n this.categoryInsightsViewColumns = [];\r\n this.MandCViewColumns = [];\r\n this.enterpriseEnablementEstimatesViewColumns = [];\r\n this.sccEnableInsightViewColumns = [];\r\n this.sccViewColumns = [];\r\n this.AllSccViewColumns = [];\r\n this.onFilterChange = this.onFilterChange.bind(this);\r\n this.showAvailableField = this.showAvailableField.bind(this);\r\n this.addToFavorites = this.addToFavorites.bind(this);\r\n this.selectFavoriteTemplate = this.selectFavoriteTemplate.bind(this);\r\n this.selectDefaultTemplate = this.selectDefaultTemplate.bind(this);\r\n this.selectFlightPlanningTemplate = this.selectFlightPlanningTemplate.bind(this);\r\n this.selectHideEmptyColumnsTemplate = this.selectHideEmptyColumnsTemplate.bind(this)\r\n this.save = this.save.bind(this);\r\n this.toggleBothGroups = this.toggleBothGroups.bind(this)\r\n this.selectInternalEnablementInsightViewTemplate = this.selectInternalEnablementInsightViewTemplate.bind(this);\r\n this.selectExternalEnablementInsightViewTemplate = this.selectExternalEnablementInsightViewTemplate.bind(this);\r\n this.selectCategoryInsightsViewTemplate = this.selectCategoryInsightsViewTemplate.bind(this);\r\n this.selectEnterpriseEnablementEstimatesViewTemplate = this.selectEnterpriseEnablementEstimatesViewTemplate.bind(this);\r\n this.selectMAndCviewTemplate = this.selectMAndCviewTemplate.bind(this);\r\n this.selectSccEnableInsightViewTemplate = this.selectSccEnableInsightViewTemplate.bind(this);\r\n this.selectSccViewTemplate= this.selectSccViewTemplate.bind(this);\r\n this.selectAllSccViewTemplate= this.selectAllSccViewTemplate.bind(this);\r\n }\r\n\r\n getSelectedColumn(columnTree) {\r\n let selectedColumns = [];\r\n Object.values(columnTree).map((category) => {\r\n category.cols.map((column, index) => {\r\n if (column.isSelected) {\r\n selectedColumns.push(column.id);\r\n }\r\n });\r\n });\r\n return selectedColumns;\r\n }\r\n\r\n componentWillMount() {\r\n this.getFavoriteFields();\r\n }\r\n\r\n getFavoriteFields() {\r\n this.props.getFavoriteFields(this.props.user.user.Id).then(\r\n (response) => {\r\n this.templates = response.data.Result;\r\n this.setButtonIsDisabled();\r\n },\r\n (error) => { console.log(error); }\r\n )\r\n }\r\n\r\n setOkBtnDisabled() {\r\n let okBtnDisabled = this.state.showAvailableFields ? this.selectedColumns.length < 1 : (this.favFieldId === undefined || this.favFieldId === null);\r\n this.setState({ okBtnDisabled: okBtnDisabled });\r\n }\r\n\r\n setButtonIsDisabled() {\r\n this.selectedColumns = this.getSelectedColumn(this.state.columnTree);\r\n this.setOkBtnDisabled();\r\n let favBtnDisabled = false;\r\n this.defaultColumns = this.defaultColumns.length > 0 ? this.defaultColumns : this.getDefaultColumns();\r\n this.flightPlanningColumns = this.flightPlanningColumns.length > 0 ? this.flightPlanningColumns : this.getFlightPlanningColumns();\r\n this.internalEnablementInsightViewColumns = this.internalEnablementInsightViewColumns.length > 0 ? this.internalEnablementInsightViewColumns : this.getinternalEnablementInsightViewColumns();\r\n this.externalEnablementInsightViewColumns = this.externalEnablementInsightViewColumns.length > 0 ? this.externalEnablementInsightViewColumns : this.getexternalEnablementInsightViewColumns();\r\n this.categoryInsightsViewColumns = this.categoryInsightsViewColumns.length > 0 ? this.categoryInsightsViewColumns : this.getcategoryInsightsViewColumns();\r\n this.MandCViewColumns = this.MandCViewColumns.length > 0 ? this.MandCViewColumns : this.getMandCViewColumns();\r\n this.enterpriseEnablementEstimatesViewColumns = this.enterpriseEnablementEstimatesViewColumns.length > 0 ? this.enterpriseEnablementEstimatesViewColumns : this.getenterpriseEnablementEstimatesViewColumns();\r\n this.sccEnableInsightViewColumns = this.sccEnableInsightViewColumns.length > 0 ? this.sccEnableInsightViewColumns : this.getSccEnableInsightViewColumns();\r\n this.sccViewColumns = this.sccViewColumns.length > 0 ? this.sccViewColumns : this.getSccViewColumns();\r\n this.AllSccViewColumns = this.AllSccViewColumns.length > 0 ? this.AllSccViewColumns : this.getAllSccViewColumns();\r\n if (this.selectedColumns.length > 0) {\r\n if (isArrayEquals(this.selectedColumns, this.defaultColumns))\r\n favBtnDisabled = true;\r\n else if (isArrayEquals(this.selectedColumns, this.flightPlanningColumns))\r\n favBtnDisabled = true;\r\n else if (isArrayEquals(this.selectedColumns, this.internalEnablementInsightViewColumns))\r\n favBtnDisabled = true;\r\n else if (isArrayEquals(this.selectedColumns, this.externalEnablementInsightViewColumns))\r\n favBtnDisabled = true;\r\n else if (isArrayEquals(this.selectedColumns, this.categoryInsightsViewColumns))\r\n favBtnDisabled = true;\r\n else if (isArrayEquals(this.selectedColumns, this.MandCViewColumns))\r\n favBtnDisabled = true;\r\n else if (isArrayEquals(this.selectedColumns, this.enterpriseEnablementEstimatesViewColumns))\r\n favBtnDisabled = true;\r\n else if (isArrayEquals(this.selectedColumns, this.sccEnableInsightViewColumns))\r\n favBtnDisabled = true;\r\n else if (isArrayEquals(this.selectedColumns, this.sccViewColumns))\r\n favBtnDisabled = true;\r\n else if (isArrayEquals(this.selectedColumns, this.AllSccViewColumns))\r\n favBtnDisabled = true;\r\n else {\r\n this.templates.forEach(template => {\r\n if (isArrayEquals(this.selectedColumns, template.Columns)) {\r\n favBtnDisabled = true;\r\n }\r\n })\r\n }\r\n } else {\r\n favBtnDisabled = true;\r\n }\r\n this.setState({ favBtnDisabled: favBtnDisabled });\r\n }\r\n\r\n getDefaultColumns() {\r\n let columns = this.props.columnOptions; let defaultColumns = [];\r\n columns.forEach(column => {\r\n if (column.is_default === \"Yes\") {\r\n defaultColumns.push(column.id);\r\n }\r\n });\r\n return defaultColumns;\r\n }\r\n\r\n getFlightPlanningColumns() {\r\n let columns = this.props.columnOptions; let flightPlanningColumns = [];\r\n columns.forEach(column => {\r\n if (column.columnCategory === \"Enablement Insight\" || column.id === \"VENDOR_ID\" || column.id === \"VENDOR_NAME\") {\r\n flightPlanningColumns.push(column.id);\r\n }\r\n });\r\n return flightPlanningColumns;\r\n }\r\n\r\n getinternalEnablementInsightViewColumns() {\r\n let columns = this.props.columnOptions; let internalEnablementInsightViewColumns = [];\r\n columns.forEach(column => {\r\n if (column.internalEnablementInsightView == 'Yes') {\r\n internalEnablementInsightViewColumns.push(column.id);\r\n }\r\n });\r\n return internalEnablementInsightViewColumns;\r\n }\r\n\r\n getexternalEnablementInsightViewColumns() {\r\n let columns = this.props.columnOptions; let externalEnablementInsightViewColumns = [];\r\n columns.forEach(column => {\r\n if (column.internalEnablementInsightView == 'Yes') {\r\n externalEnablementInsightViewColumns.push(column.id);\r\n }\r\n });\r\n return externalEnablementInsightViewColumns;\r\n }\r\n\r\n getcategoryInsightsViewColumns() {\r\n let columns = this.props.columnOptions; let categoryInsightsViewColumns = [];\r\n columns.forEach(column => {\r\n if (column.internalEnablementInsightView == 'Yes') {\r\n categoryInsightsViewColumns.push(column.id);\r\n }\r\n });\r\n return categoryInsightsViewColumns;\r\n }\r\n\r\n getMandCViewColumns() {\r\n let columns = this.props.columnOptions; let categoryInsightsViewColumns = [];\r\n columns.forEach(column => {\r\n if (column.matchAndClassification_export == 'Yes') {\r\n categoryInsightsViewColumns.push(column.id);\r\n }\r\n });\r\n return categoryInsightsViewColumns;\r\n }\r\n\r\n getenterpriseEnablementEstimatesViewColumns() {\r\n let columns = this.props.columnOptions; let enterpriseEnablementEstimatesViewColumns = [];\r\n columns.forEach(column => {\r\n if (column.enterpriseEnablementEstimatesViewColumns == 'Yes') {\r\n enterpriseEnablementEstimatesViewColumns.push(column.id);\r\n }\r\n });\r\n return enterpriseEnablementEstimatesViewColumns;\r\n }\r\n\r\n getSccEnableInsightViewColumns() {\r\n let columns = this.props.columnOptions; let sccEnableInsightViewColumns = [];\r\n columns.forEach(column => {\r\n if (column.sccEnableInsightView == 'Yes') {\r\n sccEnableInsightViewColumns.push(column.id);\r\n }\r\n });\r\n return sccEnableInsightViewColumns;\r\n }\r\n\r\n getSccViewColumns() {\r\n let columns = this.props.columnOptions; let sccViewColumns = [];\r\n columns.forEach(column => {\r\n if (column.sccView == 'Yes') {\r\n sccViewColumns.push(column.id);\r\n }\r\n });\r\n return sccViewColumns;\r\n }\r\n\r\n getAllSccViewColumns() {\r\n let columns = this.props.columnOptions; let AllSccViewColumns = [];\r\n columns.forEach(column => {\r\n if (column.allSccView == 'Yes') {\r\n AllSccViewColumns.push(column.id);\r\n }\r\n });\r\n return AllSccViewColumns;\r\n }\r\n\r\n getColumnGroup(columns) {\r\n let colTree = {}\r\n columns.forEach((item) => {\r\n var colGroup = colTree[item.columnCategory]\r\n if (colGroup === undefined) {\r\n colTree[item.columnCategory] = false;\r\n }\r\n })\r\n return colTree;\r\n }\r\n\r\n getColumnTreeData(columns) {\r\n columns.sort((a,b) => a.seq - b.seq);\r\n let colTree = {}\r\n columns.forEach((item) => {\r\n var colGroup = colTree[item.columnCategory]\r\n if (!colGroup) {\r\n colGroup = { cols: [], isSelected: item.isSelected }\r\n }\r\n\r\n colGroup.cols.push(item)\r\n colGroup.isSelected = colGroup.isSelected && item.isSelected\r\n colTree[item.columnCategory] = colGroup;\r\n })\r\n return colTree;\r\n }\r\n\r\n groupToggle(key) {\r\n this.toggleBothGroups(key)\r\n }\r\n\r\n currentGroupToggle(key) {\r\n this.toggleBothGroups(key)\r\n }\r\n\r\n toggleBothGroups(key) {\r\n let columnGroupVisibility = this.state.columnGroupVisibility;\r\n columnGroupVisibility[key] = !columnGroupVisibility[key];\r\n\r\n let currentColumnGroupVisibility = this.state.currentColumnGroupVisibility;\r\n currentColumnGroupVisibility[key] = !currentColumnGroupVisibility[key];\r\n\r\n this.setState({ columnGroupVisibility: columnGroupVisibility, currentColumnGroupVisibility: currentColumnGroupVisibility });\r\n\r\n }\r\n\r\n selectColumnGroup(key) {\r\n let columnTree = this.state.columnTree;\r\n let isSelected = columnTree[key].isSelected;\r\n this.props.scc && key == 'Table Key' ? columnTree[key].isSelected = true : columnTree[key].isSelected = !isSelected;\r\n columnTree[key].cols.map((column) => {\r\n if (this.state.enableFilter) {\r\n if (column.matchedFilter) {\r\n column.isSelected = !isSelected;\r\n }\r\n } else {\r\n column.isSelected = !isSelected\r\n }\r\n })\r\n this.setButtonIsDisabled();\r\n this.setState({ columnTree: columnTree });\r\n }\r\n\r\n selectColumn(id, key) {\r\n let columnTree = this.state.columnTree;\r\n columnTree[key].cols.map((column, index) => {\r\n if (column.id === 'DATA_COLLECTIONS_SKEY' && this.props.scc) {\r\n column.isSelected = true;\r\n }else if (column.id === id) {\r\n column.isSelected = !column.isSelected;\r\n }\r\n if (index === 0) {\r\n columnTree[key].isSelected = column.isSelected;\r\n } else {\r\n columnTree[key].isSelected = columnTree[key].isSelected && column.isSelected;\r\n }\r\n });\r\n this.setButtonIsDisabled();\r\n this.setState({ columnTree: columnTree });\r\n }\r\n\r\n selectAllColumns(event) {\r\n var bool = event.target.checked;\r\n let columnTree = this.state.columnTree;\r\n Object.values(columnTree).forEach((category) => {\r\n category.isSelected = bool;\r\n category.cols.map((column) => {\r\n column.isSelected = bool;\r\n })\r\n })\r\n this.setButtonIsDisabled();\r\n this.setState({ selectAll: bool, columnTree: columnTree });\r\n }\r\n\r\n onFilterChange(e) {\r\n let columnTree = this.state.columnTree; let columnGroupVisibility = this.state.columnGroupVisibility;\r\n let enableFilter = this.state.enableFilter;\r\n if (e.target.value === undefined || e.target.value === '') {\r\n enableFilter = false;\r\n Object.entries(columnTree).map((values) => {\r\n let key = values[0];\r\n let category = values[1];\r\n columnGroupVisibility[key] = false;\r\n category.cols.map((column, index) => {\r\n if (index === 0) {\r\n category.isSelected = column.isSelected;\r\n } else {\r\n category.isSelected = category.isSelected && column.isSelected;\r\n }\r\n });\r\n });\r\n } else {\r\n enableFilter = true;\r\n Object.entries(columnTree).map((values) => {\r\n let key = values[0];\r\n let category = values[1];\r\n columnGroupVisibility[key] = false;\r\n category.cols.map((column, index) => {\r\n if (column.label.toLocaleLowerCase().indexOf(e.target.value.toLocaleLowerCase()) > -1) {\r\n column.matchedFilter = true;\r\n columnGroupVisibility[key] = true;\r\n } else {\r\n column.matchedFilter = false;\r\n }\r\n if (index === 0) {\r\n category.isSelected = column.isSelected;\r\n } else {\r\n category.isSelected = category.isSelected && column.isSelected;\r\n }\r\n })\r\n })\r\n }\r\n\r\n this.setState({ columnTree: columnTree, enableFilter: enableFilter, columnGroupVisibility: columnGroupVisibility });\r\n }\r\n\r\n save() {\r\n if (this.props.onColumnSelection) {\r\n let parameter = this.state.showAvailableFields ? this.selectedColumns : this.favFieldId;\r\n this.props.onColumnSelection(parameter);\r\n }\r\n this.props.closePopup();\r\n }\r\n\r\n showAvailableField(value) {\r\n this.columns = [];\r\n this.getFavoriteFields();\r\n this.setState({ 'showAvailableFields': value }, () => {\r\n this.setButtonIsDisabled();\r\n this.favFieldId = undefined;\r\n });\r\n }\r\n\r\n addToFavorites() {\r\n this.columns = JSON.parse(JSON.stringify(this.selectedColumns));\r\n this.setState({ 'showAvailableFields': false }, () => {\r\n this.setButtonIsDisabled();\r\n });\r\n }\r\n\r\n selectFavoriteTemplate(favoriteTemplate) {\r\n this.favFieldId = favoriteTemplate.Id;\r\n this.setButtonIsDisabled();\r\n this.selectSpecifiedColumns(favoriteTemplate.Columns);\r\n }\r\n\r\n selectDefaultTemplate() {\r\n this.favFieldId = \"DEFAULT\";\r\n this.setButtonIsDisabled();\r\n this.selectSpecifiedColumns(this.defaultColumns);\r\n }\r\n\r\n selectFlightPlanningTemplate() {\r\n this.favFieldId = \"FlightPlanning\";\r\n this.setButtonIsDisabled();\r\n this.selectSpecifiedColumns(this.flightPlanningColumns);\r\n }\r\n\r\n selectInternalEnablementInsightViewTemplate() {\r\n this.favFieldId = \"InternalEnablementInsightView\";\r\n this.setButtonIsDisabled();\r\n this.selectSpecifiedColumns(this.internalEnablementInsightViewColumns);\r\n }\r\n\r\n selectExternalEnablementInsightViewTemplate() {\r\n this.favFieldId = \"ExternalEnablementInsightView\";\r\n this.setButtonIsDisabled();\r\n this.selectSpecifiedColumns(this.externalEnablementInsightViewColumns);\r\n }\r\n\r\n selectCategoryInsightsViewTemplate() {\r\n this.favFieldId = \"CategoryInsightsView\";\r\n this.setButtonIsDisabled();\r\n this.selectSpecifiedColumns(this.categoryInsightsViewColumns);\r\n }\r\n\r\n selectMAndCviewTemplate() {\r\n this.favFieldId = \"MandCView\";\r\n this.setButtonIsDisabled();\r\n this.selectSpecifiedColumns(this.categoryInsightsViewColumns);\r\n }\r\n\r\n selectEnterpriseEnablementEstimatesViewTemplate() {\r\n this.favFieldId = \"EnterpriseEnablementEstimatesView\";\r\n this.setButtonIsDisabled();\r\n this.selectSpecifiedColumns(this.enterpriseEnablementEstimatesViewColumns);\r\n }\r\n\r\n selectSccEnableInsightViewTemplate() {\r\n this.favFieldId = \"SccEnableInsightView\";\r\n this.setButtonIsDisabled();\r\n this.selectSpecifiedColumns(this.sccEnableInsightViewColumns);\r\n }\r\n\r\n selectSccViewTemplate() {\r\n this.favFieldId = \"SccView\";\r\n this.setButtonIsDisabled();\r\n this.selectSpecifiedColumns(this.sccViewColumns);\r\n }\r\n\r\n selectAllSccViewTemplate() {\r\n this.favFieldId = \"AllSccView\"; \r\n this.setButtonIsDisabled();\r\n this.selectSpecifiedColumns(this.AllSccViewColumns);\r\n }\r\n \r\n selectHideEmptyColumnsTemplate() {\r\n this.favFieldId = \"HideEmptyColumns\";\r\n this.setButtonIsDisabled();\r\n }\r\n\r\n selectSpecifiedColumns(columnIds) {\r\n let columnTree = this.state.columnTree;\r\n Object.values(columnTree).map((category) => {\r\n category.cols.map((column, index) => {\r\n column.isSelected = columnIds.indexOf(column.id) > -1\r\n });\r\n });\r\n this.setState({ \"columnTree\": columnTree });\r\n }\r\n\r\n\r\n render() {\r\n let getAvailableFieldsTemplate = () => {\r\n return (\r\n {this.props.content.yourSavedFavoriteViews}
\r\n \r\n {/* {!this.props.isSCC && this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE && this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE == 'Supply Chain Collaboration'? */}\r\n {this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE && this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE == 'Supply Chain Collaboration'? \r\n
\r\n \r\n
\r\n :null} \r\n\r\n {this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE && this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE == 'Supply Chain Collaboration'? \r\n \r\n { this.selectAllSccViewTemplate() }}>\r\n \r\n
\r\n {this.props.content.allSCCView}
\r\n \r\n
\r\n :null}\r\n \r\n {this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE && this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE == 'Supply Chain Collaboration'? \r\n \r\n { this.selectSccViewTemplate() }}>\r\n \r\n
\r\n {this.props.content.supplyChainCollaborationView}
\r\n \r\n
\r\n :null} \r\n \r\n {this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE && this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE != 'Supply Chain Collaboration'? \r\n \r\n { this.selectSccEnableInsightViewTemplate() }}>\r\n \r\n
\r\n {this.props.content.internalEnablementInsightSCC}
\r\n \r\n
\r\n :null}\r\n {/* \r\n Ticket AV-700 Requirement\r\n \r\n { this.selectDefaultTemplate() }}>\r\n \r\n
\r\n {this.props.content.defaultView}
\r\n \r\n
\r\n */}\r\n\r\n {/* {this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE && this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE != 'Supply Chain Collaboration'? \r\n \r\n { this.selectFlightPlanningTemplate() }}>\r\n \r\n
\r\n {this.props.content.enablementInsight}
\r\n \r\n
\r\n :null} */}\r\n\r\n {!this.props.isSCC ? \r\n \r\n { this.selectSccView() }}>\r\n \r\n
\r\n {this.props.content.supplyChainCollaborationView}
\r\n \r\n
\r\n :null}\r\n {/* \r\n { this.selectInternalEnablementInsightViewTemplate() }}>\r\n \r\n
\r\n {this.props.content.enablementInsight}
\r\n \r\n
*/}\r\n {this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE && this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE != 'Supply Chain Collaboration'? \r\n \r\n { this.selectExternalEnablementInsightViewTemplate() }}>\r\n \r\n
\r\n {this.props.content.externalEnablementInsight}
\r\n \r\n
\r\n :null}\r\n\r\n \r\n { this.selectCategoryInsightsViewTemplate() }}>\r\n \r\n
\r\n {this.props.content.categoryInsights}
\r\n \r\n
\r\n \r\n {this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE && this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE != 'Supply Chain Collaboration'? \r\n \r\n { this.selectMAndCviewTemplate() }}>\r\n \r\n
\r\n {this.props.content.mAndCView}
\r\n \r\n
\r\n :null}\r\n\r\n {this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE && this.props.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE != 'Supply Chain Collaboration'? \r\n \r\n { this.selectEnterpriseEnablementEstimatesViewTemplate() }}>\r\n \r\n
\r\n {this.props.content.enterpriseEnablementView}
\r\n \r\n
\r\n :null} \r\n\r\n \r\n { this.selectHideEmptyColumnsTemplate() }}>\r\n \r\n
\r\n {this.props.content.hideEmptyColumnView}
\r\n \r\n {templatesDiv(this.state.favouriteTemplates)}\r\n
\r\n \r\n
\r\n \r\n \r\n ![](\"/images/search_big_inactive.svg\")
\r\n
\r\n \r\n \r\n \r\n \r\n {availableFieldDiv()}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n this.selectAllColumns(e)} />\r\n
\r\n {this.props.content.all}
\r\n \r\n
\r\n )\r\n }\r\n })\r\n return columnDiv;\r\n }\r\n let availableFieldDiv = () => {\r\n let columnTree = this.state.columnTree;\r\n let colGroups = Object.keys(columnTree);\r\n let template = [];\r\n colGroups.map((key, index) => {\r\n let groupCheck = columnTree[key].isSelected;\r\n let columns = columnTree[key].cols;\r\n template.push(\r\n {\r\n !isCurrentField ?
\r\n \r\n { this.selectColumn(id, key) }} />\r\n
: null\r\n }\r\n {\r\n isCurrentField ?\r\n (column.isSelected ? {label}
: null) :\r\n {label}
\r\n }\r\n \r\n
\r\n this.groupToggle(key)} className=\"float-right plus-icon medium-1 hand-cursor\">\r\n {this.state.columnGroupVisibility[key] ? : }\r\n
\r\n : }\r\n \r\n
\r\n {this.state.columnGroupVisibility[key] ?\r\n \r\n { this.selectColumnGroup(key) }} name={key} value={key} />
\r\n {key}
\r\n \r\n {availableSubGroups(columns, key, false)}\r\n
: null\r\n }\r\n \r\n
\r\n this.currentGroupToggle(key)} className=\"float-right plus-icon medium-1 hand-cursor\">\r\n {this.state.currentColumnGroupVisibility[key] ? : }\r\n
\r\n : }\r\n \r\n {key}\r\n
\r\n {this.state.currentColumnGroupVisibility[key] ?\r\n \r\n {availableSubGroups(columns, key, true)}\r\n
: null\r\n }\r\n \r\n
\r\n\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n ui: state.content.ui,\r\n content: state.content.spendAnalysis.detailedFile,\r\n user: state.default\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n getFavoriteFields: (UserId) => dispatch(getFavoriteFields(UserId))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ColumnFields)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport ReactDOM from \"react-dom\";\r\nimport ReactPaginate from 'react-paginate';\r\nimport { path, routes } from 'Constants'\r\nimport { ExportToCsv } from 'utils/ExportToCsv';\r\nimport { getNonEmptyValue, binarySearchIndex, formatThousands } from 'utils/Utils'\r\nimport classNames from \"classnames\";\r\nimport cloneDeep from 'lodash/cloneDeep';\r\n\r\n// Settings\r\nimport Select from 'react-select'\r\nimport ReactDataGrid from 'react-data-grid';\r\nimport { Toolbar, Data, Filters, Editors, Menu } from \"react-data-grid-addons\";\r\nimport { CSVLink, CSVDownload } from \"react-csv\";\r\nimport { MultiSelect } from 'primereact/multiselect';\r\nimport { PickList } from 'primereact/picklist';\r\nimport Button from 'UI/Button';\r\nimport Popup from \"reactjs-popup\";\r\nimport TextfilterRenderer from 'UI/TextFilterRenderer';\r\nimport NumericFilterRenderer from 'UI/NumericFilterRenderer';\r\nimport * as XLSX from \"xlsx\";\r\nimport * as FileSaver from \"file-saver\";\r\nimport { Workbook } from 'exceljs/dist/exceljs';\r\nimport {\r\n columnFieldModalStyle,\r\n suggestedValueContentStyle,\r\n backdropStyle, detailedFileFields\r\n} from 'Constants';\r\nimport ColumnFields from '../Spend/ColumnFields';\r\nimport Modal from 'reboron/OutlineModal';\r\n\r\nconst { ContextMenu, MenuItem, SubMenu, ContextMenuTrigger } = Menu;\r\n\r\nconst selectors = Data.Selectors;\r\nconst {\r\n NumericFilter,\r\n AutoCompleteFilter,\r\n MultiSelectFilter,\r\n SingleSelectFilter\r\n} = Filters;\r\n\r\nclass CustomGrid extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isLoading: true,\r\n isError: 'No',\r\n responseMsg: '',\r\n RequestIds: [],\r\n selectedScopes: '',\r\n fileDetails: [],\r\n scopes: [],\r\n pageCount: 1,\r\n filters: {},\r\n perPage: 500,\r\n paginatedRowFrom: 0,\r\n paginatedRowTo: 500,\r\n data: [],\r\n columnDefs: [],\r\n rowData: [],\r\n filteredRows: [],\r\n columns: [],\r\n excelColumns: [],\r\n pageCountOption: [{ label: '100', value: 100 }, { label: '250', value: 250 }, { label: '500', value: 500 }, { label: '1,000', value: 1000 }],\r\n selectedPageCount: 50,\r\n filteredRows: [],\r\n cellUpdateCss: 'bisque',\r\n open: false,\r\n //slectedIndustryDetails: [],\r\n industryOverrideRowNo: -1,\r\n pendingRecords: [],\r\n warningRecords: [],\r\n errorRecords: [],\r\n exclusionReason_directSpendUpdates: [],\r\n warningDiv: true,\r\n errorDiv: true,\r\n csvRows: [],\r\n isFilterVisible: false,\r\n cleanIndustryOverrides: {},\r\n isSaveInProgress: false,\r\n actualScroll: false,\r\n dummyScroll: false,\r\n exportFlag: false,\r\n sccSaveFlag: true\r\n }\r\n this.handlePageClick = this.handlePageClick.bind(this)\r\n this.getValidFilterValues = this.getValidFilterValues.bind(this)\r\n this.handleFilterChange = this.handleFilterChange.bind(this)\r\n this.handlePageCountChange = this.handlePageCountChange.bind(this)\r\n //this.searchRowIndex = this.searchRowIndex.bind(this)\r\n this.findRowIndex = this.findRowIndex.bind(this)\r\n this.filterValidationRecords = this.filterValidationRecords.bind(this)\r\n this.warningToggle = this.warningToggle.bind(this)\r\n this.errorToggle = this.errorToggle.bind(this)\r\n this.isCellEditable = this.isCellEditable.bind(this)\r\n this.onSave = this.onSave.bind(this)\r\n this.isDisabled = this.isDisabled.bind(this)\r\n this.filterChange = this.filterChange.bind(this)\r\n this.setColumnWidth = this.setColumnWidth.bind(this)\r\n this.setHeaderHelpText = this.setHeaderHelpText.bind(this)\r\n this.columnResize = this.columnResize.bind(this)\r\n this.exportCsv = this.exportCsv.bind(this)\r\n this.uploadButtonClick = this.uploadButtonClick.bind(this)\r\n this.onGridRowsUpdated = this.onGridRowsUpdated.bind(this)\r\n this.removeFilter = this.removeFilter.bind(this)\r\n this.expandFilter = this.expandFilter.bind(this)\r\n this.actions = this.getApplicationFeatureActions()\r\n this.closeColumnFieldPopup = this.closeColumnFieldPopup.bind(this);\r\n }\r\n\r\n showModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n this.refs[action].hide()\r\n }\r\n\r\n closeColumnFieldPopup() {\r\n // this.setState({ columns: cloneDeep(this.originalColumns) });\r\n this.hideModal('ColumnFields');\r\n }\r\n\r\n setColumnWidth(paginatedRows, columnDefs, isFilterVisible = this.state.isFilterVisible) {\r\n this.timer = setInterval(() => {\r\n this.setHeaderHelpText(columnDefs)\r\n }, 2000);\r\n\r\n\r\n if (paginatedRows.length === 0) {\r\n var grid = this.myOpenGrid;\r\n if (grid) {\r\n return grid.base.props.columns\r\n }\r\n } else {\r\n columnDefs = columnDefs.map((col, i) => ({\r\n ...col,\r\n hash: new Date().getTime()\r\n }));\r\n }\r\n\r\n return columnDefs\r\n }\r\n\r\n setHeaderHelpText(columnDefs) {\r\n var grid = this.myOpenGrid;\r\n if (grid === null || grid === undefined) {\r\n return;\r\n }\r\n\r\n var gridCells = ReactDOM.findDOMNode(grid).querySelectorAll('.react-grid-HeaderCell');\r\n gridCells.forEach((item) => {\r\n const headerText = item.innerText;\r\n var col = columnDefs.findIndex((colDef) => {\r\n return colDef.name === headerText\r\n })\r\n\r\n if (col !== -1) {\r\n item.setAttribute('title', columnDefs[col].helpText)\r\n if (columnDefs[col].editable) {\r\n item.style.backgroundColor = '#ff8c00';\r\n }\r\n }\r\n })\r\n }\r\n\r\n filterChange() {\r\n const isFilterVisible = this.state.isFilterVisible\r\n if (this.state.pendingRecords.length > 0) {\r\n this.filteredColumnValues = []\r\n }\r\n\r\n this.setState({ isFilterVisible: !isFilterVisible })\r\n }\r\n\r\n isDisabled() {\r\n const errorRecords = this.state.errorRecords\r\n var errorRecordSize = 0;\r\n Object.values(errorRecords).forEach((item) => {\r\n errorRecordSize += item.length;\r\n })\r\n\r\n return errorRecordSize > 0 || this.state.pendingRecords.length === 0\r\n }\r\n\r\n handlePageCountChange(value) {\r\n var result = this.state.pageCountOption.find(page => page.value === value)\r\n var pageCount = this.state.filteredRows.length / result.value\r\n this.setState({ perPage: value, paginatedRowFrom: 0, paginatedRowTo: result.value, pageCount: pageCount })\r\n\r\n }\r\n\r\n isCellEditable(e) {\r\n return e.column.editable;\r\n }\r\n\r\n columnResize(idx, width) {\r\n // console.log(idx, width)\r\n // console.log(this.state.rowData, this.state.columns)\r\n let column = this.state.columnDefs;\r\n column.map((value, index) => {\r\n if (index == (Number(idx))) {\r\n value.width = Number(width)\r\n return;\r\n }\r\n })\r\n\r\n this.setState({ columnDefs: column })\r\n }\r\n\r\n searchRowIndex(arr, skey) {\r\n let start = 0, end = arr.length - 1;\r\n while (start <= end) {\r\n let mid = Math.floor((start + end) / 2);\r\n const val = arr[mid][this.props.keyColumn]\r\n if (val === skey) return mid;\r\n else if (val < skey)\r\n start = mid + 1;\r\n else\r\n end = mid - 1;\r\n }\r\n\r\n return -1;\r\n }\r\n\r\n findRowIndex(arr, skey) {\r\n let start = 0, end = arr.length - 1;\r\n while (start <= end) {\r\n let mid = Math.floor((start + end) / 2);\r\n const val = arr[mid]\r\n if (val === skey) return mid;\r\n else if (val < skey)\r\n start = mid + 1;\r\n else\r\n end = mid - 1;\r\n }\r\n\r\n return -1;\r\n }\r\n\r\n onGridRowsUpdated = ({ fromRow, toRow, updated }) => {\r\n if (Object.values(updated)[0] === 'DUMMY') {\r\n return\r\n }\r\n\r\n this.setState(state => {\r\n const filteredRows = state.filteredRows;\r\n const rowData = state.rowData;\r\n\r\n const pendingRecords = state.pendingRecords;\r\n pendingRecords.sort((a, b) => {\r\n return a - b;\r\n })\r\n\r\n const colIdx = state.columnDefs.findIndex((item) => {\r\n return item.key === Object.keys(updated)[0]\r\n })\r\n\r\n var warningRecords = this.state.warningRecords;\r\n var errorRecords = this.state.errorRecords;\r\n //var cleanIndustryOverrides = this.state.cleanIndustryOverrides\r\n\r\n for (var idx = state.paginatedRowFrom + fromRow, len = (state.paginatedRowFrom + toRow); idx <= len; idx++) {\r\n const editable = { column: state.columnDefs[colIdx], row: filteredRows[idx] }\r\n if (!this.isCellEditable(editable)) {\r\n continue;\r\n }\r\n\r\n if (getNonEmptyValue(filteredRows[idx][editable.column.key]) === getNonEmptyValue(Object.values(updated)[0]))\r\n continue;\r\n\r\n let skey = filteredRows[idx][this.props.keyColumn]\r\n\r\n if (editable.column.key === 'ENABLEMENT_WAVE') {\r\n\r\n updated.ENABLEMENT_WAVE_OVERRIDE = updated.ENABLEMENT_WAVE !== \"\" ? 'Override' : 'Calculated'\r\n }\r\n\r\n if (editable.column.key === 'FINAL_SUPPLIER_ENABLE_TYPE') //SAP_ARIBA_BUY_ENABLE_MTHD_RECMD\r\n {\r\n updated.ENABLEMENT_RECOMMENDATION_OVERRIDE = 'Override'\r\n }\r\n\r\n filteredRows[idx] = { ...filteredRows[idx], ...updated };\r\n\r\n var rowIdx = binarySearchIndex(rowData, skey, this.props.keyColumn)\r\n rowData[rowIdx] = { ...rowData[rowIdx], ...updated };\r\n\r\n if (this.props.onRowUpdate) {\r\n this.props.onRowUpdate(rowData[rowIdx], updated)\r\n }\r\n\r\n var recordIdx = this.findRowIndex(pendingRecords, skey);\r\n if (recordIdx === -1) {\r\n pendingRecords.push(skey);\r\n }\r\n\r\n var validationRecords = this.props.validate ?\r\n this.props.validate(filteredRows[idx], { warningRecords: warningRecords, errorRecords: errorRecords }) :\r\n undefined;\r\n if (validationRecords) {\r\n if (validationRecords.warningRecords)\r\n warningRecords = { ...validationRecords.warningRecords }\r\n if (validationRecords.errorRecords)\r\n errorRecords = { ...validationRecords.errorRecords }\r\n }\r\n }\r\n //this.props.pendingChanges(pendingRecords)\r\n return {\r\n rowData: rowData, filteredRows: filteredRows, fromRow: fromRow, toRow: toRow, updated: updated,\r\n pendingRecords: pendingRecords, warningRecords: warningRecords,\r\n errorRecords: errorRecords\r\n };\r\n });\r\n };\r\n\r\n onSaveScc() {\r\n const pendingRecords = this.state.pendingRecords;\r\n if (pendingRecords.length === 0) {\r\n this.props.onSave(pendingRecords);\r\n this.setState({ pendingRecords: [], errorRecords: [], warningRecords: [] });\r\n } else {\r\n const pendingRecords = this.state.pendingRecords;\r\n if (pendingRecords.length === 0) {\r\n return;\r\n }\r\n\r\n let rowData = this.state.rowData\r\n let filteredRows = this.state.filteredRows;\r\n const recordsToInsert = [];\r\n\r\n pendingRecords.forEach((item) => {\r\n var rowIdx = binarySearchIndex(rowData, item, this.props.keyColumn)\r\n const row = rowData[rowIdx]\r\n recordsToInsert.push(row)\r\n })\r\n\r\n this.props.onSave(recordsToInsert)\r\n this.setState({ pendingRecords: [], errorRecords: [], warningRecords: [] });\r\n }\r\n }\r\n\r\n onSave() {\r\n const pendingRecords = this.state.pendingRecords;\r\n if (pendingRecords.length === 0) {\r\n return;\r\n }\r\n\r\n this.setState({ isLoading: true, isError: 'No', isSaveInProgress: true, responseMsg: '' })\r\n let rowData = this.state.rowData\r\n let filteredRows = this.state.filteredRows;\r\n const recordsToInsert = [];\r\n\r\n pendingRecords.forEach((item) => {\r\n var rowIdx = binarySearchIndex(rowData, item, this.props.keyColumn)\r\n const row = rowData[rowIdx]\r\n recordsToInsert.push(row)\r\n })\r\n\r\n this.props.save(recordsToInsert).then((response) => {\r\n if (response.status !== undefined && response.status === 200) {\r\n if (response.data && response.data.Result) {\r\n var modifiedRows = this.props.onCommit ? this.props.onCommit(response) : response.data.Result\r\n\r\n for (var i = 0; i < modifiedRows.length; i++) {\r\n const row = modifiedRows[i];\r\n\r\n const skey = row[this.props.keyColumn];\r\n var rowIdx = binarySearchIndex(rowData, skey, this.props.keyColumn)\r\n rowData[rowIdx] = { ...rowData[rowIdx], ...row };\r\n\r\n\r\n for (var idx = 0; idx < filteredRows.length; idx++) {\r\n if (filteredRows[idx][this.props.keyColumn] === row[this.props.keyColumn]) {\r\n filteredRows[idx] = { ...filteredRows[idx], ...row };\r\n }\r\n }\r\n }\r\n\r\n this.setState({ filteredRows: filteredRows, rowData: rowData, pendingRecords: [], errorRecords: [], warningRecords: [], responseMsg: 'Record/s has been updated successfully', isError: 'No', isSaveInProgress: false, isLoading: false }, this.props.setApiResponse ? this.props.setApiResponse({ message: 'Record/s has been updated successfully', isError: 'No', isSaveInProgress: false, isLoading: false }) : () => { })\r\n }\r\n else {\r\n this.setState({ pendingRecords: [], errorRecords: [], warningRecords: [], responseMsg: 'Record/s has been updated successfully', isError: 'No', isSaveInProgress: false, isLoading: false }, this.props.setApiResponse ? this.props.setApiResponse({ message: 'Record/s has been updated successfully', isError: 'No', isSaveInProgress: false, isLoading: false }) : () => { })\r\n return;\r\n }\r\n } else if (response && response.stack && response.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: this.props.content.validation.networkError, isError: 'Yes', isSaveInProgress: false, isLoading: false }, this.props.setApiResponse ? this.props.setApiResponse({ message: this.props.content.validation.networkError, isError: 'Yes', isSaveInProgress: false, isLoading: false }) : () => { })\r\n } else {\r\n this.setState({ responseMsg: this.props.content.validation.error, isError: 'Yes', isSaveInProgress: false, isLoading: false }, this.props.setApiResponse ? this.props.setApiResponse({ message: this.props.content.validation.error, isError: 'Yes', isSaveInProgress: false, isLoading: false }) : () => { })\r\n }\r\n }).catch((error) => {\r\n this.setState({ responseMsg: this.props.content.validation.error, isError: 'Yes', isSaveInProgress: false, isLoading: false }, this.props.setApiResponse ? this.props.setApiResponse({ message: this.props.content.validation.error, isError: 'Yes', isSaveInProgress: false, isLoading: false }) : () => { })\r\n })\r\n }\r\n\r\n /* This method can be used to highlight the cell values */\r\n RowRenderer = ({ renderBaseRow, ...props }) => {\r\n if (this.state.pendingRecords.length === 0) {\r\n return renderBaseRow(props);\r\n }\r\n //let rowData = this.state.rowData\r\n let backgroundColor = '';\r\n let textAlign = 'left';\r\n\r\n const pendingRecords = this.state.pendingRecords;\r\n const warningRecords = this.state.warningRecords;\r\n const errorRecords = this.state.errorRecords;\r\n\r\n var totalPendingRecords = []\r\n Object.values(pendingRecords).forEach((item) => {\r\n totalPendingRecords = totalPendingRecords.concat(item);\r\n })\r\n\r\n var totalWarningRecords = []\r\n Object.values(warningRecords).forEach((item) => {\r\n totalWarningRecords = totalWarningRecords.concat(item);\r\n })\r\n\r\n var totalErrorRecords = []\r\n Object.values(errorRecords).forEach((item) => {\r\n totalErrorRecords = totalErrorRecords.concat(item);\r\n })\r\n\r\n totalPendingRecords.map(item => {\r\n if (item == props.row[this.props.keyColumn]) {\r\n backgroundColor = 'lightgray'\r\n }\r\n })\r\n\r\n totalWarningRecords.map(item => {\r\n if (item == props.row[this.props.keyColumn]) {\r\n backgroundColor = 'yellow'\r\n }\r\n })\r\n\r\n totalErrorRecords.map(item => {\r\n if (item == props.row[this.props.keyColumn]) {\r\n backgroundColor = 'red'\r\n }\r\n })\r\n\r\n return \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n this.showAvailableField(true)}>{this.props.content.availableFields}
\r\n \r\n {/* {this.props.scc ? null : this.showAvailableField(false)}>{this.props.content.columnSelectFavorites}
} */}\r\n this.showAvailableField(false)}>{this.props.content.columnSelectFavorites}
\r\n \r\n {this.props.content.currentFields}\r\n
\r\n \r\n {\r\n // this.props.scc ?
\r\n\r\n \r\n // {\r\n // getAvailableFieldsTemplate()\r\n // }\r\n //
:\r\n \r\n {\r\n this.state.showAvailableFields ? getAvailableFieldsTemplate() :\r\n \r\n }
}\r\n \r\n
\r\n \r\n {currentFieldDiv()}\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n { !this.props.scc ?\r\n
\r\n \r\n {this.state.showAvailableFields ?\r\n \r\n : null}\r\n
\r\n : null }\r\n \r\n
\r\n \r\n \r\n
\r\n {renderBaseRow(props)}
;\r\n\r\n };\r\n\r\n componentDidMount() {\r\n if (this.props.onRef)\r\n this.props.onRef(this)\r\n\r\n // const canvas = document.getElementsByClassName('react-grid-Canvas')[0]\r\n\r\n // const length = this.state.columnDefs.length * 120\r\n // const dummyScrollRatio = length / document.documentElement.clientWidth\r\n // canvas.scrollLeft = dummy.scrollLeft //* dummyScrollRatio\r\n }\r\n\r\n getApplicationFeatureActions() {\r\n let actions = [];\r\n let applicationFeatures = this.props.user && this.props.user.user && this.props.user.user.applicationFeatures ? this.props.user.user.applicationFeatures : [];\r\n applicationFeatures.map(applicationFeat => {\r\n actions.push(applicationFeat.Action);\r\n })\r\n return actions;\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this.props.onRef)\r\n this.props.onRef(undefined)\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.apiResponse && (nextProps.apiResponse.isError !== this.state.isError || nextProps.apiResponse.message != this.state.responseMsg)) {\r\n this.setState({ responseMsg: nextProps.apiResponse.message, isError: nextProps.apiResponse.isError, isLoading: nextProps.apiResponse.isLoading })\r\n }\r\n else if (nextProps.columns && (nextProps.data != this.state.rowData || nextProps.data.length != this.state.rowData.length)) {\r\n this.loadData(nextProps);\r\n }\r\n else if(nextProps.scc && nextProps.columns !== this.state.sccColumns){\r\n this.setState({sccColumns: nextProps.columns})\r\n this.loadData(nextProps);\r\n }\r\n\r\n }\r\n\r\n loadData(props) {\r\n const colConfigArr = props.columns;\r\n\r\n if(props.keyColumn == 'GICS_ID' && \r\n (\r\n (props.user.userprofile && props.user.userprofile.Roles && props.user.userprofile.Roles.length > 0 && props.user.userprofile.Roles[0].includes(\"Admin\"))\r\n )\r\n )\r\n {}\r\n else if(props.keyColumn == 'GICS_ID' && \r\n (\r\n (props.user.userprofile && props.user.userprofile.Roles && props.user.userprofile.Roles.length > 0 && props.user.userprofile.Roles[0].includes(\"Standard Internal User\")) || \r\n (props.user.userprofile && props.user.userprofile.Roles && props.user.userprofile.Roles.length > 0 && props.user.userprofile.Roles[0].includes(\"Standard Partner User\"))\r\n )\r\n )\r\n props.columns.map(e => e.editable = false);\r\n\r\n colConfigArr.forEach(item => {\r\n item.editable = item.editable && !this.props.readOnly\r\n })\r\n\r\n this.setState({ responseMsg: '', isError: 'No' })\r\n var self = this\r\n var column = [];\r\n for (var i = 0; i < props.data.length; i++) {\r\n column = Object.keys(props.data[0]);\r\n if (i === 0)\r\n break;\r\n }\r\n if (column.length === 0) {\r\n //this.setState({ responseMsg: this.props.content.noData, isError: 'Yes', isLoading: false,excelColumns: [], columnDefs: [], rowData: [], filteredRows: [], pageCount: 0 })\r\n this.setState({ isLoading: false, excelColumns: [], columnDefs: [], rowData: [], filteredRows: [], pageCount: 0 })\r\n }\r\n else {\r\n var excelColumns = []\r\n\r\n for (let index = 0; index < column.length; index++) {\r\n const fieldName = column[index];\r\n var fieldConfigIdx = colConfigArr.findIndex((item) => {\r\n return item.key === fieldName\r\n })\r\n\r\n if (fieldConfigIdx !== -1) {\r\n const fieldConfig = colConfigArr[fieldConfigIdx]\r\n\r\n if (fieldConfig.exportFl) {\r\n excelColumns.push({ label: fieldConfig.name, key: fieldName, seq: fieldConfig.screenSeq, isCellEditable: fieldConfig.editable })\r\n }\r\n }\r\n\r\n }\r\n\r\n var finalRows = props.data;\r\n if (finalRows.length > 0) {\r\n let keys = Object.keys(finalRows[0])\r\n finalRows.forEach((item) => {\r\n keys.forEach(key => {\r\n item[key] = item[key] === null ? '' : item[key]\r\n })\r\n })\r\n }\r\n\r\n //finalRows.sort((a, b) => { return a[props.keyColumn] - b[props.keyColumn] })\r\n finalRows.sort((a, b) => { return isNaN(a[props.keyColumn]) ? ('' + a[props.keyColumn]).localeCompare(b[props.keyColumn]) : a[props.keyColumn] - b[props.keyColumn] })\r\n\r\n excelColumns.sort((a, b) => {\r\n var seq1 = isNaN(a.seq) ? 9999 : a.seq;\r\n var seq2 = isNaN(b.seq) ? 9999 : b.seq;\r\n return seq1 - seq2\r\n })\r\n\r\n var filteredRows = cloneDeep(finalRows)\r\n if (this.props.defaultSort && this.props.defaultSort.length > 0) {\r\n this.props.defaultSort.forEach(item => {\r\n filteredRows.sort((a, b) => { return isNaN(a[item]) ? ('' + a[item]).localeCompare(b[item]) : a[item] - b[item] })\r\n })\r\n }\r\n\r\n var pageCount = finalRows.length / this.state.perPage\r\n\r\n // const canvas = document.getElementsByClassName('react-grid-Canvas')[0]\r\n // const dummyScroll = document.getElementsByClassName('scroll-dummy-child')[0]\r\n // let width = 0;\r\n // colConfigArr.forEach(c => {\r\n // width += c.width\r\n // })\r\n\r\n // dummyScroll.style.width = (width) + 'px'\r\n // const dummyElement = document.getElementsByClassName('scroll-dummy')[0]\r\n // dummyElement.style.width = this.props.scc ? '94vw' : '80vw';\r\n\r\n // canvas.onscroll = () => {\r\n // if (this.state.dummyScroll) {\r\n // this.setState({ dummyScroll: false })\r\n // return\r\n // }\r\n\r\n // this.setState({ actualScroll: true }, () => {\r\n // const dummy = document.getElementsByClassName('scroll-dummy')[0]\r\n // let length = 0\r\n // colConfigArr.forEach(c => {\r\n // length += c.width\r\n // })\r\n\r\n // const dummyScrollRatio = document.documentElement.clientWidth / length\r\n // dummy.scrollLeft = canvas.scrollLeft// * dummyScrollRatio\r\n // })\r\n // }\r\n this.setState({ excelColumns: excelColumns, columnDefs: colConfigArr, rowData: finalRows, filteredRows: filteredRows, pageCount: pageCount, isError: 'No', isLoading: false })\r\n }\r\n }\r\n\r\n sortFilteredRows = (filteredRows) => {\r\n if (!this.sortedColumns) {\r\n return filteredRows\r\n }\r\n\r\n var comparerAsc = (sortColumn) => (a, b) => {\r\n return (a[sortColumn] > b[sortColumn]) ? 1 : -1;\r\n }\r\n\r\n var comparerDesc = (sortColumn) => (a, b) => {\r\n return (a[sortColumn] < b[sortColumn]) ? 1 : -1;\r\n }\r\n\r\n this.sortedColumns.forEach((item) => {\r\n let sortColumn = item.key;\r\n let sortDirection = item.direction\r\n if (sortDirection === 'NONE') {\r\n return\r\n }\r\n\r\n var comparer = comparerAsc(sortColumn);\r\n if (sortDirection === 'DESC') {\r\n comparer = comparerDesc(sortColumn)\r\n }\r\n\r\n\r\n filteredRows.sort(comparer);\r\n })\r\n\r\n return filteredRows;\r\n };\r\n\r\n sortRows = (sortColumn, sortDirection) => {\r\n if (!this.sortedColumns) {\r\n this.sortedColumns = []\r\n }\r\n\r\n let rowIdx = this.sortedColumns.findIndex((item) => {\r\n return item.key === sortColumn\r\n })\r\n\r\n if (rowIdx !== -1) {\r\n this.sortedColumns.splice(rowIdx, 1);\r\n }\r\n\r\n this.sortedColumns.push({ key: sortColumn, direction: sortDirection })\r\n\r\n if (sortDirection === 'NONE') {\r\n return\r\n }\r\n\r\n var comparer = function (a, b) {\r\n if (sortDirection === 'ASC') {\r\n return (a[sortColumn] > b[sortColumn]) ? 1 : -1;\r\n } else if (sortDirection === 'DESC') {\r\n return (a[sortColumn] < b[sortColumn]) ? 1 : -1;\r\n }\r\n }\r\n\r\n var filteredRows = this.state.filteredRows;\r\n\r\n var rows = filteredRows.sort(comparer);\r\n\r\n var pageCount = rows.length / this.state.perPage\r\n this.setState({ filteredRows: [] }, () => this.setState({ filteredRows: rows }))\r\n };\r\n\r\n handlePageClick = data => {\r\n let selected = data.selected;\r\n let offset = Math.ceil(selected * this.state.perPage);\r\n this.setState({ paginatedRowFrom: offset, paginatedRowTo: (offset + this.state.perPage) });\r\n };\r\n\r\n handleFilterChange(filter) {\r\n var rows = [...this.state.rowData];\r\n let newFilters = { ...this.state.filters };\r\n if (filter === null) {\r\n this.setState({ filters: null, filteredRows: rows }, this.getRows(rows, {}))\r\n return;\r\n\r\n } else if (filter.filterTerm) {\r\n newFilters[filter.column.key] = filter;\r\n } else {\r\n delete newFilters[filter.column.key];\r\n }\r\n\r\n this.setState({ filters: newFilters }, this.getRows(rows, newFilters))\r\n\r\n return newFilters;\r\n };\r\n\r\n getValidFilterValues(columnId) {\r\n var rows = this.state.rowData\r\n var isFilterVisible = this.state.isFilterVisible\r\n this.filteredColumnValues = this.filteredColumnValues ? this.filteredColumnValues : []\r\n if (this.filteredColumnValues[columnId] === undefined) {\r\n var rows_filter = [... new Set(rows.map(item => item[columnId] != null ? item[columnId] : \"\"))]\r\n rows_filter.splice(0, 0, 'Not Included')\r\n this.filteredColumnValues[columnId] = rows_filter\r\n return rows_filter\r\n } else {\r\n return this.filteredColumnValues[columnId]\r\n }\r\n }\r\n\r\n getRows(rows, filters) {\r\n let filteredRows = selectors.getRows({ rows, filters });\r\n filteredRows = this.sortFilteredRows(filteredRows)\r\n\r\n if (this.props.onFilter) {\r\n this.props.onFilter(filteredRows)\r\n }\r\n\r\n var pageCount = Math.ceil(filteredRows.length / this.state.perPage);\r\n this.setState({ filteredRows: filteredRows, paginatedRowFrom: 0, paginatedRowTo: this.state.perPage, pageCount: pageCount, filters: filters });\r\n }\r\n\r\n uploadButtonClick() {\r\n this.uploadFile();\r\n this.setState({ sccSaveFlag: false })\r\n }\r\n\r\n uploadFile() {\r\n document.getElementById('inputFile').click();\r\n }\r\n\r\n exportCsv() {\r\n const rowData = this.state.rowData;\r\n const excelColumns = this.props.scc ? this.props.sccExcelColumns : this.state.excelColumns;\r\n const csvRows = [];\r\n\r\n var keys = excelColumns.map((cols) => {\r\n return cols.key\r\n })\r\n\r\n var headers = excelColumns.map((cols) => {\r\n return cols.label.includes(',') ? cols.label.replaceAll(\",\", \"ˏ\") : cols.label\r\n //return cols.label\r\n })\r\n\r\n const options = {\r\n filename: this.props.exportFileName,\r\n decimalSeparator: '.',\r\n showLabels: true,\r\n showTitle: false,\r\n useTextFile: false,\r\n keys: keys,\r\n headers: headers\r\n };\r\n\r\n const csvExporter = new ExportToCsv(options);\r\n\r\n csvExporter.generateCsv(rowData);\r\n this.setState({ exportFlag: true })\r\n }\r\n\r\n exportToExcel = () => {\r\n\r\n let apiData = this.state.rowData;\r\n let fileName = 'Scc_Data';\r\n const excelColumns = this.state.excelColumns;\r\n //create new excel work book\r\n let workbook = new Workbook();\r\n // //add name to sheet\r\n let worksheet = workbook.addWorksheet(\"Scc_Data\");\r\n\r\n //replace key label by header as workbook reads only header key\r\n const newArrayOfObj = excelColumns.map(({\r\n label: header,\r\n ...rest\r\n }) => ({\r\n header,\r\n ...rest\r\n }));\r\n\r\n worksheet.columns = newArrayOfObj;\r\n\r\n for (const row of this.state.rowData) {\r\n worksheet.addRow(row);\r\n }\r\n let fname = \"Scc_Data\"\r\n\r\n let editableColumns = ['Skey', 'Reference Number'];\r\n // const idCol = worksheet.getColumn('DATA_COLLECTIONS_SKEY');\r\n worksheet.eachRow(function (row, rowNumber) {\r\n row.eachCell(function (cell, colNumber) {\r\n let flag = editableColumns.includes(cell.value);\r\n if (flag)\r\n row.getCell(colNumber).fill = {\r\n type: 'pattern',\r\n pattern: 'solid',\r\n fgColor: { argb: '007ad9' }\r\n };\r\n });\r\n });\r\n\r\n // //add data and file name and download\r\n workbook.xlsx.writeBuffer().then((data) => {\r\n let blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });\r\n FileSaver.saveAs(blob, fname + '-' + new Date().valueOf() + '.xlsx');\r\n });\r\n\r\n this.setState({ exportFlag: true })\r\n };\r\n\r\n filterValidationRecords(e, skeys) {\r\n const rowData = this.state.rowData;\r\n const filteredRows = [];\r\n skeys.forEach((item) => {\r\n var rowIdx = binarySearchIndex(rowData, item, this.props.keyColumn)\r\n var idx = filteredRows.findIndex((item) => {\r\n return item[this.props.keyColumn] === rowData[rowIdx][this.props.keyColumn]\r\n })\r\n\r\n if (rowIdx !== -1 && idx === -1) {\r\n filteredRows.push(rowData[rowIdx]);\r\n }\r\n })\r\n\r\n this.setState({ filteredRows: filteredRows })\r\n e.stopPropagation();\r\n }\r\n\r\n getValidationDiv() {\r\n const pendingRecords = this.state.pendingRecords;\r\n const warningRecords = this.state.warningRecords;\r\n const errorRecords = this.state.errorRecords;\r\n if (pendingRecords.length === 0) {\r\n return '';\r\n }\r\n\r\n var warningRecordSize = 0;\r\n var totalWarningRecords = []\r\n Object.values(warningRecords).forEach((item) => {\r\n totalWarningRecords = totalWarningRecords.concat(item);\r\n })\r\n var warningDiv = Object.keys(warningRecords).map((key, index) => (\r\n warningRecords[key].length !== 0 ?\r\n this.filterValidationRecords(e, warningRecords[key])}>\r\n \r\n \r\n \r\n
: ''\r\n ))\r\n\r\n var errorRecordSize = 0;\r\n var totalErrorRecords = []\r\n Object.values(errorRecords).forEach((item) => {\r\n totalErrorRecords = totalErrorRecords.concat(item);\r\n })\r\n\r\n var errorDiv = Object.keys(errorRecords).map((key, index) => (\r\n errorRecords[key].length !== 0 ?\r\n \r\n \r\n \r\n {key} {this.props.detailedFile.validationForText}\r\n {formatThousands(warningRecords[key].length)} {this.props.detailedFile.validationRowsText}\r\n \r\n
\r\n this.filterValidationRecords(e, errorRecords[key])}>\r\n \r\n \r\n \r\n
: ''\r\n ))\r\n\r\n var validationDiv = (\r\n \r\n \r\n \r\n {key} {this.props.detailedFile.validationForText}\r\n {formatThousands(errorRecords[key].length)} {this.props.detailedFile.validationRowsText}\r\n \r\n
\r\n \r\n
)\r\n\r\n return validationDiv;\r\n }\r\n\r\n warningToggle() {\r\n this.setState((previousState) => { return { warningDiv: !previousState.warningDiv } })\r\n }\r\n\r\n errorToggle() {\r\n this.setState((previousState) => { return { errorDiv: !previousState.errorDiv } })\r\n }\r\n\r\n expandFilter(item) {\r\n let filters;\r\n (item.type === NumericFilterRenderer || item.type === TextfilterRenderer || item.type === 'global') ?\r\n filters = (\r\n
\r\n this.filterValidationRecords(e, pendingRecords)}>\r\n \r\n {formatThousands(pendingRecords.length)} {this.props.detailedFile.validationRecordText} \r\n {this.props.detailedFile.pendingChangeMessage}\r\n
\r\n {totalWarningRecords.length > 0 ?\r\n {formatThousands(pendingRecords.length)} {this.props.detailedFile.validationRecordText} \r\n {this.props.detailedFile.pendingChangeMessage}\r\n \r\n
: ''}\r\n {totalErrorRecords.length > 0 ?\r\n this.filterValidationRecords(e, totalWarningRecords)}>\r\n \r\n {formatThousands(totalWarningRecords.length)} {this.props.detailedFile.validationWarningText} {this.props.detailedFile.warningChangeMessage}\r\n
\r\n {formatThousands(totalWarningRecords.length)} {this.props.detailedFile.validationWarningText} {this.props.detailedFile.warningChangeMessage}\r\n \r\n {this.state.warningDiv ? : }\r\n
\r\n {this.state.warningDiv ? warningDiv : ''}\r\n : }\r\n \r\n
: ''}\r\n this.filterValidationRecords(e, totalErrorRecords)}>\r\n \r\n {formatThousands(totalErrorRecords.length)} {this.props.detailedFile.validationErrorText} {this.props.detailedFile.validationThatText} {this.props.detailedFile.validationMustText} {this.props.detailedFile.errorChangeMessage}\r\n
\r\n {formatThousands(totalErrorRecords.length)} {this.props.detailedFile.validationErrorText} {this.props.detailedFile.validationThatText} {this.props.detailedFile.validationMustText} {this.props.detailedFile.errorChangeMessage}\r\n \r\n {this.state.errorDiv ? : }\r\n
\r\n {this.state.errorDiv ? errorDiv : ''}\r\n : }\r\n this.removeFilter(item, item.rawValue)}\r\n color\r\n >{item.rawValue}\r\n \r\n
) :\r\n filters = item.filterTerm.map((item1) => (\r\n (\r\n this.removeFilter(item, item1.value)}\r\n color\r\n >{item1.value}\r\n \r\n
)\r\n ))\r\n\r\n return filters\r\n }\r\n\r\n\r\n removeFilter(filter, item1, removeAll = false) {\r\n var breadCrumbsArray = this.state.filters;\r\n if (breadCrumbsArray) {\r\n Object.values(breadCrumbsArray).forEach(item => {\r\n if (item.type !== NumericFilterRenderer && item.type !== TextfilterRenderer && item.type !== 'global') {\r\n if (item.clear) {\r\n item.clear()\r\n }\r\n\r\n if (removeAll) {\r\n item.filterTerm.length = 0;\r\n return;\r\n }\r\n var idx = item.filterTerm.findIndex(t => t.value === item1 && item.column.key === filter.column.key)\r\n if (idx !== -1) {\r\n if (item.clear) {\r\n item.clear()\r\n }\r\n item.filterTerm.splice(idx, 1)\r\n\r\n if (item.filterTerm.length === 0) {\r\n delete breadCrumbsArray[filter.column.key]\r\n }\r\n }\r\n } else if (removeAll || (item.column.key === filter.column.key && item.rawValue === item1)) {\r\n if (item.clear) {\r\n item.clear()\r\n }\r\n\r\n if (!removeAll)\r\n delete breadCrumbsArray[filter.column.key]\r\n }\r\n })\r\n }\r\n\r\n if (removeAll) {\r\n breadCrumbsArray = {}\r\n }\r\n\r\n\r\n var rows = [...this.state.rowData];\r\n this.setState({ filters: breadCrumbsArray }, () => {\r\n this.getRows(rows, breadCrumbsArray)\r\n })\r\n }\r\n\r\n listenScrollEvent() {\r\n if (this.state.actualScroll) {\r\n this.setState({ actualScroll: false })\r\n return\r\n }\r\n\r\n this.setState({ dummyScroll: true }, () => {\r\n const canvas = document.getElementsByClassName('react-grid-Canvas')[0]\r\n const dummy = document.getElementsByClassName('scroll-dummy')[0]\r\n const length = this.state.columnDefs.length * 120\r\n const dummyScrollRatio = length / document.documentElement.clientWidth\r\n canvas.scrollLeft = dummy.scrollLeft //* dummyScrollRatio\r\n })\r\n }\r\n\r\n // onColumnSelection(param){\r\n // this.props.onColumnSelection(param)\r\n // }\r\n\r\n render() {\r\n const paginatedRows = this.state.filteredRows.slice(this.state.paginatedRowFrom, this.state.paginatedRowTo);\r\n const validationDiv = this.getValidationDiv();\r\n var columnDefs = this.setColumnWidth(paginatedRows, this.state.columnDefs)\r\n //const height = paginatedRows.length === 0 ? 700 : (paginatedRows.length * 35 + 45)\r\n var filter = this.state.filters ? Object.entries(cloneDeep(this.state.filters)) : []\r\n\r\n return (\r\n \r\n \r\n\r\n
\r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n // language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content,\r\n detailedFile: state.content.spendAnalysis.detailedFile,\r\n validation: state.content.validation,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n\r\n //insertDetailedFileRecords: (records) => dispatch(insertDetailedFileRecords(records)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CustomGrid)\r\n","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\n\r\nexport default class NotesEditor extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { cellValue: props.value };\r\n }\r\n \r\n getValue() {\r\n let upd = {}\r\n upd[this.props.column.key] = this.state.cellValue\r\n return upd;\r\n /*return { fromRow: this.props.rowData, toRow: this.props.rowData, updated: upd }*/\r\n }\r\n \r\n getInputNode() {\r\n return ReactDOM.findDOMNode(this).getElementsByTagName(\"input\")[0];\r\n }\r\n \r\n handleChangeComplete = event => {\r\n this.setState({ cellValue: event.target.value });\r\n };\r\n\r\n _handleKeyDown = (e) => {\r\n if (e.key === 'Enter') {\r\n e.stopPropagation()\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n }","import React, { Component } from 'react'\r\n\r\nimport { GICSColumns } from 'Constants'\r\nimport CustomGrid from 'UI/CustomGrid'\r\nimport { connect } from 'react-redux'\r\nimport { Filters, Editors } from \"react-data-grid-addons\";\r\n\r\nimport NotesEditor from 'UI/NotesEditor'\r\n\r\nimport {\r\n userManagerFailure,\r\n userManagerSuccess,\r\n GetSpendColumnsForRole,\r\n addUserRole,\r\n DeleteSpendColumnsForRole,\r\n updateUserRole,\r\n GetAllRoles,\r\n resetError,\r\n submitSpendColumnsForRole\r\n} from 'actions/roleAndPermissionAction'\r\nimport { AlignFormatter, CenterAlignFormatter, getNonEmptyValue } from \"../../utils/Utils\";\r\n\r\nconst {\r\n NumericFilter,\r\n AutoCompleteFilter,\r\n} = Filters;\r\n\r\nconst { DropDownEditor } = Editors;\r\nconst dropdownValues = [\"Yes\", \"No\"];\r\nconst dropDownEditor = \r\n\r\n {this.props.currentFilter ?\r\n
\r\n\r\n\r\n \r\n
\r\n : null}\r\n\r\n \r\n {this.state.rowData.length === 0 ? '' :\r\n
\r\n {this.props.detailedFile.currentFilterRows} {formatThousands(this.state.filteredRows.length)}/{formatThousands(this.state.rowData.length)} {this.props.detailedFile.totalText}
}\r\n {this.props.detailedFile.currentFilterSelection}
\r\n \r\n {filter.length === 0 ? 'No filter currently selected' :\r\n filter.map((item) => {\r\n return (\r\n (item.length === 0 || item[1].filterTerm.length === 0) ? '' :\r\n
\r\n {item[1].column.name}:
\r\n )\r\n })\r\n }\r\n {this.expandFilter(item[1])}
\r\n
\r\n\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n\r\n
\r\n \r\n {this.state.pendingRecords.length > 0 ?
\r\n \r\n {validationDiv}\r\n
: ''}\r\n 0,\r\n 'medium-12': this.state.pendingRecords.length === 0,\r\n })}>\r\n {this.props.isEditable !== false ?\r\n
\r\n {this.props.detailedFile.editableColumns}
\r\n : null}\r\n \r\n
\r\n \r\n
\r\n \r\n option.value === this.state.perPage)}\r\n noOptionsMessage={() => null}\r\n onChange={(value) => this.handlePageCountChange(value.value)}\r\n options={this.state.pageCountOption}\r\n isSearchable={false}\r\n />\r\n
\r\n \r\n '}\r\n breakLabel={'...'}\r\n breakClassName={'break-me'}\r\n pageCount={this.state.pageCount}\r\n marginPagesDisplayed={2}\r\n pageRangeDisplayed={5}\r\n onPageChange={this.handlePageClick}\r\n containerClassName={'pagination'}\r\n subContainerClassName={'pages pagination'}\r\n activeClassName={'active'}\r\n pageClassName={'page-li'}\r\n previousClassName={'previousClassName'}\r\n nextClassName={'nextClassName'}\r\n pageLinkClassName={'pageLinkClassName'}\r\n activeLinkClassName={'activeLinkClassName'}\r\n />\r\n
\r\n \r\n {this.props.export ?\r\n : ''\r\n }\r\n {this.props.exportFromScc ?\r\n : ''\r\n }\r\n {this.props.scc ?\r\n : ''\r\n }\r\n {this.props.scc ?\r\n : ''\r\n }\r\n {this.props.scc ?\r\n \r\n \r\n this.callback()}\r\n modalStyle={columnFieldModalStyle}\r\n contentStyle={suggestedValueContentStyle}\r\n >\r\n this.closeColumnFieldPopup()} />\r\n : ''}\r\n {this.props.save ?\r\n : ''\r\n }\r\n
\r\n \r\n \r\n {/* { this.myOpenGrid = dataGrid; }}\r\n columns={columnDefs}\r\n minWidth={'100%'}\r\n rowsCount={paginatedRows.length}\r\n minHeight={this.props.minHeight ? this.props.minHeight : 700}\r\n onGridRowsUpdated={this.onGridRowsUpdated}\r\n enableCellSelect={true}\r\n onGridSort={this.sortRows}\r\n rowGetter={i => paginatedRows[i]}\r\n toolbar={ this.handleFilterChange(null)} numberOfRows={this.state.rowData.length} filterRowsButtonText={{}} />}\r\n onAddFilter={filter => this.handleFilterChange(filter)}\r\n onClearFilters={() => this.handleFilterChange(null)}\r\n onFilterChange={filter => this.handleFilterChange(filter)}\r\n getValidFilterValues={this.getValidFilterValues}\r\n RowsContainer={ContextMenuTrigger}\r\n rowRenderer={this.RowRenderer}\r\n onCheckCellIsEditable={this.isCellEditable}\r\n onColumnResize={(idx, width) => this.columnResize(`${idx}`, `${width}`)}\r\n headerRowHeight={this.props.headerRowHeight ? this.props.headerRowHeight : 50}\r\n />\r\n\r\n
\r\n \r\n \r\n
*/}\r\n }} />}\r\n onAddFilter={filter => this.handleFilterChange(filter)}\r\n onClearFilters={() => this.handleFilterChange(null)}\r\n onFilterChange={filter => this.handleFilterChange(filter)}\r\n getValidFilterValues={this.getValidFilterValues}\r\n RowsContainer={ContextMenuTrigger}\r\n rowRenderer={this.RowRenderer}\r\n onCheckCellIsEditable={this.isCellEditable}\r\n onColumnResize={(idx, width) => this.columnResize(`${idx}`, `${width}`)}\r\n headerRowHeight={this.props.headerRowHeight ? this.props.headerRowHeight : 50}\r\n />\r\n\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content,\r\n ui: state.content.ui,\r\n user: state.default\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n userManagerSuccess: (bool) => dispatch(userManagerSuccess(bool)),\r\n userManagerFailure: (error) => dispatch(userManagerFailure(error)),\r\n GetSpendColumnsForRole: (formValues) => dispatch(GetSpendColumnsForRole(formValues)),\r\n submitSpendColumnsForRole: (formValues) => dispatch(submitSpendColumnsForRole(formValues)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SpendAndRoleManager); ","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport DatePicker from \"react-datepicker\";\r\n\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport \"./CustomerAccessManager.scss\";\r\nimport moment from 'moment'\r\n// Actions\r\nimport {\r\n\tuserManagerFailure,\r\n\tuserManagerSuccess,\r\n\tfetchCustomerRoles,\r\n\taddUserRole,\r\n\tdeleteCustomerRole,\r\n\taddCustomerRole,\r\n\tGetAllRoles,\r\n\tresetError\r\n} from 'actions/roleAndPermissionAction'\r\n\r\n\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\n// Settings\r\nimport { validators } from 'Constants'\r\nimport { SelectField, Option } from 'react-mdl-extra'\r\nimport Select from 'react-select';\r\nimport { dropdownStyles } from 'react-select-css'\r\nimport { Checkbox } from 'material-ui';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\n\r\nclass CustomerAccessManager extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t\tthis.state = {\r\n\t\t\tuserIsEditing: false,\r\n\t\t\teditId: null,\r\n\t\t\tfilterText: \"\",\r\n\t\t\tfilterRole: \"\",\r\n\t\t\tusers: [],\r\n\t\t\troleState: [],\r\n\t\t\tselectedOption: '',\r\n\t\t\tisRoleSelected: '',\r\n\t\t\trolesForUsers: [],\r\n\t\t\tcustomerEmail: \"\",\r\n\t\t\tselectedRolesIDForUsers: [],\r\n\t\t\tstartDate: new Date(),\r\n\t\t\texpirationDate: moment(new Date()).add(30, 'days').toDate(),\r\n\t\t\tdateValidationError: \"\",\r\n\t\t\tcompany: \"\"\r\n\t\t}\r\n\t\tthis.handleRoleChange = this.handleRoleChange.bind(this)\r\n\t\tthis.loadData = this.loadData.bind(this)\r\n\t\tthis.filterTextInput = React.createRef();\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tthis.loadData();\r\n\t}\r\n\r\n\tloadData() {\r\n\t\tthis.getAllRoles();\r\n\t\tthis.fetchCustomerAccessDetails();\r\n\t}\r\n\tgetAllRoles() {\r\n\t\tthis.props.GetAllRoles().then((response) => {\r\n\t\t\tthis.setState({ rolesForUsers: response.data.Result });\r\n\t\t})\r\n\t}\r\n\r\n\tfetchCustomerAccessDetails() {\r\n\t\tthis.props.fetchCustomerRoles()\r\n\t\t\t.then((response) => {\r\n\t\t\t\tthis.setState({ users: response.data.Result })\r\n\t\t\t\tthis.props.userManagerSuccess(response.data.Message)\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\tthis.props.userManagerFailure(this.props.validation.networkError)\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.props.userManagerFailure(error.response.data.Message)\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t}\r\n\r\n\r\n\thandleUserInput(filterText) {\r\n\t\tvar selectedUser = this.state.users.filter(us =>\r\n\t\t\tus.CustomerEmail.toLowerCase().includes(filterText.target.value.toLowerCase())\r\n\t\t);\r\n\t\tthis.setState({ customerEmail: filterText.target.value.toLowerCase(), filterText: filterText.target.value.toLowerCase() });\r\n\t};\r\n\r\n\tonDDLRoleClickEvent = () => {\r\n\t\tthis.setState({ isRoleSelected: 'Selected' });\r\n\t}\r\n\r\n\tonDDLRoleBlurEvent = () => {\r\n\t\tthis.setState({ isRoleSelected: '' });\r\n\t}\r\n\r\n\thandleRowDel(userDetails) {\r\n\t\tconst result = window.confirm(this.props.validation.confirmDelete);\r\n\t\tif (result) {\r\n\t\t\tvar payload = { CustomerEmail: userDetails.CustomerEmail, UpdatedBy: this.props.user.user.Id };\r\n\t\t\tthis.props.deleteCustomerRole(payload)\r\n\t\t\t\t.then((response) => {\r\n\t\t\t\t\tthis.props.userManagerSuccess(response.data.Message)\r\n\t\t\t\t\tthis.fetchCustomerAccessDetails();\r\n\t\t\t\t}).catch((error) => {\r\n\t\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\t\tthis.props.userManagerFailure(this.props.validation.networkError)\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse {\r\n\t\t\t\t\t\tthis.props.userManagerFailure(error.response.data.Message)\r\n\t\t\t\t\t}\r\n\t\t\t\t})\r\n\t\t}\r\n\t};\r\n\r\n\thandleRowEdit(userDetails) {\r\n\t\tthis.setState({ editId: userDetails.ID });\r\n\t\tthis.setState({\r\n\t\t\tselectedRolesIDForUsers: userDetails.customerRoles.map((rol) => {\r\n\t\t\t\treturn rol.roleId\r\n\t\t\t}), customerEmail: userDetails.CustomerEmail, company: userDetails.CompanyName\r\n\t\t})\r\n\t\tthis.formDispatch(actions.load('userManager.Email', userDetails.CustomerEmail));\r\n\t\tthis.formDispatch(actions.change('userManager.Email', userDetails.CustomerEmail));\r\n\t\tthis.formDispatch(actions.setErrors('userManager.Email', false))\r\n\t\tthis.formDispatch(actions.setTouched('userManager.Email', true))\r\n\t\tthis.formDispatch(actions.load('userManager.company', userDetails.CompanyName));\r\n\r\n\t\tthis.setState({\r\n\t\t\tstartDate: moment(userDetails.StartDate).toDate(),\r\n\t\t\texpirationDate: moment(userDetails.ExpirationDate).toDate()\r\n\t\t})\r\n\t}\r\n\r\n\r\n\r\n\thandleRowCancel(userIsEditing) {\r\n\t\tthis.setState({ editId: null });\r\n\t\tthis.formDispatch(actions.load('userManager.Email', null));\r\n\t\tthis.formDispatch(actions.setErrors('userManager.Email', false))\r\n\t\tthis.formDispatch(actions.setTouched('userManager.Email', false))\r\n\t\tthis.formDispatch(actions.load('userManager.company', null));\r\n\r\n\t\tthis.setState({\r\n\t\t\tstartDate: new Date(),\r\n\t\t\texpirationDate: moment(new Date()).add(30, 'days').toDate()\r\n\t\t})\r\n\t\tthis.setState({ filterText: \"\" });\r\n\t\tthis.setState({ selectedRolesIDForUsers: [] });\r\n\t};\r\n\r\n\thandleRoleChange(value) {\r\n\t\tvar role = value;\r\n\t\tthis.setState({ filterRole: role });\r\n\t\tthis.setState({ selectedOption: value });\r\n\t\tthis.formDispatch(actions.setErrors('userManager.Role', false))\r\n\t}\r\n\r\n\thandleAddUserRole(formValues) {\r\n\t\tvar msg = this.props.content\r\n\r\n\t\tlet roles = [];\r\n\t\tthis.state.selectedRolesIDForUsers.map(roleId => {\r\n\t\t\troles.push({ \"RoleId\": roleId });\r\n\t\t})\r\n\r\n\t\tthis.props.resetError()\r\n\r\n\t\tvar payload = {\r\n\t\t\tCustomerEmail: formValues.Email,\r\n\t\t\tCurrentLoginUser: this.props.user.user.Id,\r\n\t\t\tCompanyName: formValues.company,\r\n\t\t\tCustomerRole: roles,\r\n\t\t\tStartDate: this.state.startDate,\r\n\t\t\tExpirationDate: this.state.expirationDate\r\n\t\t};\r\n\r\n\t\tthis.props.addCustomerRole(payload)\r\n\t\t\t.then((response) => {\r\n\r\n\t\t\t\tthis.handleRowCancel();\r\n\t\t\t\tthis.fetchCustomerAccessDetails();\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\tthis.props.userManagerFailure(this.props.validation.networkError)\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.props.userManagerFailure(error.response.data.Message)\r\n\t\t\t\t}\r\n\t\t\t})\r\n\r\n\t}\r\n\r\n\tcomponentDidUpdate() {\r\n\t\tthis.formDispatch(actions.change('userManager.Role', this.state.selectedOption));\r\n\t}\r\n\r\n\tcomponentWillUnmount() {\r\n\t\tthis.formDispatch(actions.reset('userManager'))\r\n\t\tthis.props.resetError()\r\n\t}\r\n\r\n\tupdateUserData(userDetails, response) {\r\n\t\tvar oldStateObject = this.state.users;\r\n\t\tuserDetails = oldStateObject.filter(a => a.Email === userDetails.Email)\r\n\t\tvar index = oldStateObject.indexOf(userDetails[0]);\r\n\t\toldStateObject.splice(index, 1);\r\n\t\toldStateObject.push(response.data.Result);\r\n\t\toldStateObject.sort((itemA, itemB) => (itemA.Email.toLowerCase() > itemB.Email.toLowerCase()) ? 1 : (itemA.Email.toLowerCase() === itemB.Email.toLowerCase()) ? ((itemA.Email.toLowerCase() > itemB.Email.toLowerCase()) ? 1 : -1) : -1)\r\n\t\tthis.setState({ users: oldStateObject });\r\n\t}\r\n\r\n\r\n\r\n\thandleFeatureCheckChanged(value) {\r\n\t\tvar id = value.target.id;\r\n\t\tif (this.state.selectedRolesIDForUsers.indexOf(id) < 0) {\r\n\t\t\tthis.setState(state => ({\r\n\t\t\t\tselectedRolesIDForUsers: [...state.selectedRolesIDForUsers, id]\r\n\t\t\t}));\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.setState({\r\n\t\t\t\tselectedRolesIDForUsers: this.state.selectedRolesIDForUsers.filter((item) => item !== id)\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n\r\n\tstartDateOnChange(date) {\r\n\t\tif (date != null) {\r\n\t\t\tif (this.state.expirationDate != null) {\r\n\t\t\t\tif (moment(date).isBefore(moment(this.state.expirationDate))) {\r\n\t\t\t\t\tthis.setState({ dateValidationError: null, startDate: date });\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.setState({ dateValidationError: \"Start Date should be less than Expiration Date\" });\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tthis.setState({ dateValidationError: null, startDate: date });\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\texpirationDateOnChange(date) {\r\n\t\tthis.resetExpirationDate()\r\n\t\tthis.setState({ expirationDate: date });\r\n\t}\r\n\r\n\tresetExpirationDate() {\r\n\t\t//this.formDispatch(actions.reset('valueStoryShare.ExpirationDate'));\r\n\t\tthis.formDispatch(actions.setErrors('valueStoryShare.ExpirationDate', {\r\n\t\t\trequired: false\r\n\t\t}))\r\n\t}\r\n\r\n\tcompanyOnChange(event) {\r\n\t\tthis.setState({ company: event.target.value });\r\n\t}\r\n\r\n\tisDisabled() {\r\n\t\treturn !(this.state.customerEmail != \"\" && this.state.company != \"\" && this.state.startDate != null && this.state.expirationDate != null);\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst required = (val) => val && val.length;\r\n\t\tvar getRoleComponent = (instance) => {\r\n\t\t\tvar row = Object.values(instance.state.rolesForUsers).map((role) => {\r\n\t\t\t\tvar check = (instance.state.selectedRolesIDForUsers.indexOf(role.RoleId) > -1)\r\n\t\t\t\treturn (\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t)\r\n\t\t\t})\r\n\t\t\treturn row;\r\n\t\t}\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t\t\t instance.handleFeatureCheckChanged(e)}\r\n\t\t\t\t\t\t\t\tname={role.RoleId} value={role.RoleName} />\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\tinstance.handleFeatureCheckChanged(e)} defaultValue={role.RoleId} >{role.RoleName}
\r\n\t\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\n\r\n\r\nclass SearchBar extends React.Component {\r\n\thandleChange(event) {\r\n\t\tthis.props.onUserInput(event);\r\n\t}\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t{BreakLine(this.props.content.title)}
\r\n\t\t\t\t\t\t\t this.formDispatch = dispatch}\r\n\t\t\t\t\t\t\t\tonSubmit={(values) => this.handleAddUserRole(values)}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t this.companyOnChange(event)}\r\n\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ this.startDateOnChange(date)} />}\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{/* { this.expirationDateOnChange(date)} />} */}\r\n\r\n this.state.expirationDate ? true : false\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolProps={{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle: { width: '300px' },\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tselected: this.state.expirationDate,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tminDate: this.state.startDate,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName: \"calendar-text\",\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpopperClassName: \"calendar-popper\",\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t//disabled: !this.state.shareWithCustomer,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmaxDate: moment(new Date()).add(30, 'days').toDate(),\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange: date => this.expirationDateOnChange(date)\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t{this.state.dateValidationError}\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{this.props.content.rolesLabel}\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{getRoleComponent(this)}\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t{this.props.userManager.error}
\r\n\t\t\t\t\t\t\t{this.props.userManager.message}
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t{this.state.users !== undefined ?\r\n\t\t\t\t\t\t
\r\n\r\n\t\t\t\r\n\t\t\t\t val !=='' && val !== null && !val.endsWith('sap.com')\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tvalidateOn=\"blur\"\r\n\t\t\t\t\treadOnly={this.props.isEdit ? true : false}\r\n\t\t\t\t/>\r\n\t\t\t\t
\r\n\t\t);\r\n\t}\r\n}\r\n\r\nclass UserTable extends React.Component {\r\n\trender() {\r\n\t\tvar rowDel = this.props.onRowDel;\r\n\t\tvar rowEdit = this.props.onRowEdit;\r\n\r\n\t\tvar rowCancel = this.props.onRowCancel;\r\n\t\tvar filterText = this.props.filterText;\r\n\t\tvar filterRole = this.props.filterRole;\r\n\t\tvar userEditing = this.props.userEditing;\r\n\t\tvar editId = this.props.editId;\r\n\t\tvar roles = this.props.roles;\r\n\t\tvar instance = this;\r\n\t\tvar editBtnLabel = this.props.editBtnLabel;\r\n\t\tvar deleteBtnLabel = this.props.deleteBtnLabel;\r\n\t\tvar cancelBtnLabel = this.props.cancelBtnLabel;\r\n\t\tvar user = this.props.users.map(function (user) {\r\n\t\t\tif (user.CustomerEmail.toLowerCase().indexOf(filterText) === -1) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\telse return (\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t
\r\n\t\t);\r\n\t}\r\n}\r\n\r\nclass UserRow extends React.Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = {\r\n\t\t\trole: this.props.user.role,\r\n\t\t\toriginalRole: this.props.user.role,\r\n\t\t\troles: this.props.roles\r\n\t\t};\r\n\t\tthis.onChange = this.onChange.bind(this)\r\n\t\tthis.onChangeCancel = this.onChangeCancel.bind(this)\r\n\t\tthis.onCancelEvent = this.onCancelEvent.bind(this)\r\n\t}\r\n\r\n\tonChange(e) {\r\n\t\tthis.setState({\r\n\t\t\trole: e.target.value\r\n\t\t})\r\n\t}\r\n\tonChangeCancel(e) {\r\n\t\tthis.setState({\r\n\t\t\trole: this.state.originalRole\r\n\t\t})\r\n\t\tthis.props.onCancelEvent()\r\n\t}\r\n\r\n\tonDelEvent() {\r\n\t\tthis.props.onDelEvent(this.props.user);\r\n\t}\r\n\r\n\tonEditEvent() {\r\n\t\tthis.props.user.isEditing = true;\r\n\r\n\t\tthis.props.onEditEvent(this.props.user, this.props.userIsEditing);\r\n\t}\r\n\r\n\tonSaveEvent() {\r\n\t\tthis.setState({\r\n\t\t\toriginalRole: this.state.role\r\n\t\t})\r\n\t\tthis.props.onSaveEvent(this.props.user, this.props.userIsEditing, this.state.role);\r\n\t}\r\n\r\n\tonCancelEvent() {\r\n\t\tthis.props.onCancelEvent();\r\n\t}\r\n\tshowDeleteLink() {\r\n\t\tif (this.props.user.objRoles.length === 1 && this.props.allRoles.indexOf(this.props.user.objRoles[0].RoleName) === -1) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\telse {\r\n\t\t\treturn true;\r\n\t\t}\r\n\r\n\t}\r\n\trender() {\r\n\t\tlet roles = \"\";\r\n\t\tthis.props.user.customerRoles.map((element, index) => {\r\n\t\t\troles = roles + (index > 0 ? \", \" : \"\") + element.roleName;\r\n\t\t});\r\n\r\n\t\treturn (\r\n\r\n\t\t\t| Role | \r\n\t\t\t\t\t\t\tCompany | \r\n\t\t\t\t\t\t\tStart Date | \r\n\t\t\t\t\t\t\tExpiration Date | \r\n\t\t\t\t\t\t\tUpdated By | \r\n\t\t\t\t\t\t\tUpdated On | \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t | \r\n\t\t\t\t\t\t |
|---|
*/}\r\n \r\n {this.props.data.ReleaseVersionName} \r\n \r\n {moment(this.props.data.UpdatedOn).format('L')} \r\n \r\n \r\n {this.props.cellData.name}\r\n \r\n {this.props.data.FeatureDescription}\r\n {this.props.cellData.desc}\r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n validation: state.content.validation,\r\n releaseData: state.releaseData,\r\n user: state.default,\r\n content : state.content.menu.Release[0].releaseDetails\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n notificationManagerLoading: (bool) => dispatch(notificationManagerLoading(bool)),\r\n notificationManagerSuccess: (bool) => dispatch(notificationManagerSuccess(bool)),\r\n notificationManagerFailure: (error) => dispatch(notificationManagerFailure(error)),\r\n getReleaseFeatures: (formValues) => dispatch(getReleaseFeatures(formValues)),\r\n getLatestPublishedReleaseFeatures: (formValues) => dispatch(getLatestPublishedReleaseFeatures(formValues)),\r\n getReleaseVersions: (formValues) => dispatch(getReleaseVersions(formValues)),\r\n resetError: () => dispatch(resetError())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ReleaseContainer)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport moment from 'moment'\r\n// Actions\r\nimport {\r\n\tgetSpendParameters,\r\n\tupdateSpendParameters,\r\n\tresetError\r\n} from 'actions/spendActions'\r\n\r\n\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\n// Settings\r\nimport { validators } from 'Constants'\r\n\r\nclass SpendParametersContainer extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t\tthis.state = {\r\n\t\t\tuserIsEditing: false,\r\n\t\t\tspendParameters: [],\r\n\t\t\teditId: 0,\r\n\t\t\tfilterText: \"\",\r\n\t\t\tfilterRole: \"\",\r\n\t\t\tusers: []\r\n\r\n\t\t}\r\n\r\n\t\tthis.handleRowEdit = this.handleRowEdit.bind(this)\r\n\t\tthis.handleRowCancel = this.handleRowCancel.bind(this)\r\n\t\tthis.handleUpdateParameter = this.handleUpdateParameter.bind(this)\r\n\t\tthis.loadData = this.loadData.bind(this)\r\n\t\tthis.filterTextInput = React.createRef();\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\r\n\t\tthis.loadData();\r\n\t}\r\n\r\n\tloadData() {\r\n\t\tthis.getAllParameters();\r\n\t}\r\n\tgetAllParameters() {\r\n\t\tthis.props.getSpendParameters().then((response) => {\r\n\t\t\tthis.setState({ spendParameters: response.data.Result });\r\n\t\t})\r\n\t}\r\n\r\n\r\n\r\n\thandleRowEdit(userDetails, userIsEditing) {\r\n\t\t// userDetails.isEditing = true;\r\n\t\t// this.setState({ editId: userDetails.Id, userIsEditing: true });\r\n\t\t// this.setState({\r\n\t\t// selectedRolesIDForUsers: userDetails.objRoles.map((rol) => {\r\n\t\t// return rol.RoleId\r\n\t\t// })\r\n\t\t// })\r\n\t\t// this.formDispatch(actions.change('userManager.Email', userDetails.Email));\r\n\t\t// this.formDispatch(actions.load('userManager.Email', userDetails.Email));\r\n\t\t// this.formDispatch(actions.setErrors('userManager.Email', false))\r\n\t\t// this.formDispatch(actions.setTouched('userManager.Email', true))\r\n\t}\r\n\r\n\thandleRowCancel(userIsEditing) {\r\n\t\tthis.setState({ editId: 0 });\r\n\t\tthis.formDispatch(actions.change('userManager.Email', ''));\r\n\t\tthis.setState({ selectedRolesIDForUsers: [] })\r\n\t\tthis.setState({ filterText: '' });\r\n\t};\r\n\r\n\r\n\r\n\thandleUpdateParameter(formValues) {\r\n\t\tformValues.UPDATED_BY = this.props.user.user.Email;\r\n\t\tthis.props.updateSpendParameters(formValues).then((result) => {\r\n\t\t\tthis.loadData();\r\n\t\t})\r\n\t}\r\n\r\n\tcomponentDidUpdate() {\r\n\t\t//this.formDispatch(actions.change('userManager.Role', this.state.selectedOption));\r\n\t}\r\n\r\n\tcomponentWillUnmount() {\r\n\t\t//this.formDispatch(actions.reset('userManager'))\r\n\t\tthis.props.resetError()\r\n\t}\r\n\r\n\tupdateUserData(userDetails, response) {\r\n\t\tvar oldStateObject = this.state.users;\r\n\t\tuserDetails = oldStateObject.filter(a => a.Email === userDetails.Email)\r\n\t\tvar index = oldStateObject.indexOf(userDetails[0]);\r\n\t\toldStateObject.splice(index, 1);\r\n\t\toldStateObject.push(response.data.Result);\r\n\t\toldStateObject.sort((itemA, itemB) => (itemA.Email.toLowerCase() > itemB.Email.toLowerCase()) ? 1 : (itemA.Email.toLowerCase() === itemB.Email.toLowerCase()) ? ((itemA.Email.toLowerCase() > itemB.Email.toLowerCase()) ? 1 : -1) : -1)\r\n\t\tthis.setState({ users: oldStateObject });\r\n\t}\r\n\r\n\trender() {\r\n\t\tvar _instance = this\r\n\t\tvar user = this.state.spendParameters.map(function (parameter) {\r\n\t\t\treturn (\r\n\t\t\t\t\t{bindValues.PARAMETER_NAME} \r\n\t\t\t\t\t{bindValues.PARAMETER_DESC} \r\n\t\t\t\t\t{bindValues.PARAMETER_VALUE} \r\n\t\t\t\t\t{bindValues.UPDATED_BY} \r\n\t\t\t\t\t{moment(bindValues.CREATE_TIMESTAMP).format('L')} \r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t \r\n\t\t\t\t\t\r\n\r\n\t\t\t\t\t \r\n\t\t\t\t :\r\n\t\t\t\t\r\n\t\t\t\t\t{bindValues.PARAMETER_NAME} \r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t \r\n\t\t\t\t\t\r\n\t\t\t\t\t\t \r\n\t\t\t\t\t{bindValues.UPDATED_BY} \r\n\t\t\t\t\t{moment(bindValues.CREATE_TIMESTAMP).format('L')} \r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t \r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t \r\n\t\t\t\t \r\n\t\t);\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tui: state.content.ui,\r\n\t\tuser: state.default,\r\n\t\tcontent: state.content.SpendParametersManager,\r\n\t\tvalidation: state.content.validation,\r\n\t\tuserManager: state.userManagerUpdates\r\n\t}\r\n}\r\n\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\t// userManagerSuccess: (bool) => dispatch(userManagerSuccess(bool)),\r\n\t\t// userManagerFailure: (error) => dispatch(userManagerFailure(error)),\r\n\t\tgetSpendParameters: (formValues) => dispatch(getSpendParameters(formValues)),\r\n\t\tupdateSpendParameters: (formValues) => dispatch(updateSpendParameters(formValues)),\r\n\t\tresetError: () => dispatch(resetError())\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SpendParametersContainer)","\r\nimport axios from 'axios'\r\nimport { env, ROOT_URL } from 'Constants'\r\n\r\n//video manager\r\nexport const VIDEO_MANAGER_LOADING = 'VIDEO_MANAGER_LOADING';\r\nexport const VIDEO_MANAGER_SUCCESS = 'VIDEO_MANAGER_SUCCESS';\r\nexport const VIDEO_MANAGER_FAILURE = 'VIDEO_MANAGER_FAILURE';\r\nexport const RESET_ERROR = 'RESET_ERROR';\r\n\r\n//videoRole manager\r\nexport const VIDEO_ROLE_MANAGER_LOADING = 'VIDEO_ROLE_MANAGER_LOADING';\r\nexport const VIDEO_ROLE_MANAGER_SUCCESS = 'VIDEO_ROLE_MANAGER_SUCCESS';\r\nexport const VIDEO_ROLE_MANAGER_FAILURE = 'VIDEO_ROLE_MANAGER_FAILURE';\r\n\r\nexport function resetError() {\r\n return {\r\n type: RESET_ERROR,\r\n payload: null\r\n };\r\n}\r\n\r\nexport function videoManagerLoading(bool) {\r\n return {\r\n type: VIDEO_MANAGER_LOADING,\r\n isLoading: bool\r\n }\r\n}\r\n\r\nexport function videoManagerSuccess(message) {\r\n return {\r\n type: VIDEO_MANAGER_SUCCESS,\r\n payload: message\r\n };\r\n}\r\n\r\nexport function videoManagerFailure(error) {\r\n return {\r\n type: VIDEO_MANAGER_FAILURE,\r\n payload: error\r\n };\r\n}\r\n\r\nexport function fetchScreens() {\r\n return (dispatch) => {\r\n setTimeout(() => { dispatch(videoManagerLoading(true)) }, 1500);\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/RoleAndPermission/FetchScreens`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function fetchScreenVideos() {\r\n return (dispatch) => {\r\n setTimeout(() => { dispatch(videoManagerLoading(true)) }, 1500);\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/RoleAndPermission/FetchScreenVideos`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function saveScreenVideo(formValues, file) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n dispatch(videoManagerLoading(true))\r\n const formData = new FormData();\r\n formData.append('File', file); \r\n formData.append('FileName', JSON.stringify(formValues)); \r\n \r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/RoleAndPermission/SaveScreenVideo`,\r\n data: formData,\r\n dataType: \"JSON\",\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function saveScreenVideoFile(file) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n dispatch(videoManagerLoading(true))\r\n const formData = new FormData();\r\n formData.append('File', file); \r\n formData.append('FileName', file.name); \r\n \r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/RoleAndPermission/SaveVideoFile`,\r\n data: formData,\r\n dataType: \"JSON\",\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function deleteScreenVideo(formValues) {\r\n return (dispatch) => {\r\n dispatch(videoManagerLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: formValues,\r\n url: `${ROOT_URL}/RoleAndPermission/DeleteScreenVideo`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function fetchScreenVideosForUser(user) {\r\n return (dispatch) => {\r\n setTimeout(() => { dispatch(videoManagerLoading(true)) }, 1500);\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: {id: user},\r\n url: `${ROOT_URL}/RoleAndPermission/FetchScreenVideosForUser`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function getAllRoles() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/RoleAndPermission/GetAllRolesUnFiltered`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport function saveScreenVideosOrder(values) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: values,\r\n url: `${ROOT_URL}/RoleAndPermission/SaveScreenVideosOrder`,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n}","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n\tfetchScreens,\r\n\tresetError,\r\n\tsaveScreenVideo,\r\n\tsaveScreenVideoFile,\r\n\tgetAllRoles\r\n} from 'actions/videoRoleAction';\r\n\r\nimport Button from 'UI/Button'\r\nimport Select from 'react-select'\r\nimport classNames from \"classnames\"\r\nimport { path, changeModalStyle, changeModalContentStyle } from 'Constants'\r\nimport cloneDeep from 'lodash/cloneDeep';\r\nimport { roundFix, formatThousands, getNonEmptyValue } from 'utils/Utils'\r\nimport { Formik, withFormik } from 'formik'\r\nimport { Checkbox } from 'material-ui';\r\n\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nclass ScreenVideo extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t\tthis.state = {\r\n\t\t\tvideoData: props.videoData,\r\n\t\t\tselectedVideos: [],\r\n\t\t\tmodules: [],\r\n\t\t\tmoduleToScreen: [],\r\n\t\t\tscreens: [],\r\n\t\t\troles: [],\r\n\t\t\tvideoFile: {}\r\n\t\t}\r\n\r\n\t\tthis.loadData = this.loadData.bind(this)\r\n\t\tthis.fetchVideoScreens = this.fetchVideoScreens.bind(this)\r\n\t\tthis.handleModuleChange = this.handleModuleChange.bind(this)\r\n\t\tthis.handleScreenChange = this.handleScreenChange.bind(this)\r\n\t\tthis.getRoleRenderer = this.getRoleRenderer.bind(this)\r\n\t\tthis.handleRoleCheckChanged = this.handleRoleCheckChanged.bind(this)\r\n\t\tthis.onSave = this.onSave.bind(this)\r\n\t\tthis.uploadFile = this.uploadFile.bind(this)\r\n\t\tthis.selectFile = this.selectFile.bind(this)\r\n\t}\r\n\r\n\tshowModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n\t\tthis.refs[action].hide()\r\n\t\tthis.props.close();\r\n }\r\n\r\n\tuploadFile() {\r\n\t\tdocument.getElementById(\"select-file\").click();\r\n\t }\r\n\t\r\n\t selectFile(event) {\r\n\t\tlet videoFile = event.target.files[0];\r\n\t\tthis.setState({videoFile: videoFile})\r\n\t }\r\n\r\n\thandleModuleChange(value, props) {\r\n\t\tconst screens = this.state.moduleToScreen[value]\r\n\t\tconst videoData = this.state.videoData\r\n videoData.Module = value;\r\n\t\tthis.setState({videoData: videoData, screens: screens})\r\n\t}\r\n\r\n\thandleScreenChange(value, props) {\r\n\t\tconst videoData = this.state.videoData\r\n videoData.ScreenName = value;\r\n\t\tthis.setState({videoData: videoData})\r\n\t}\r\n\r\n\thandleRoleCheckChanged(value){\r\n\t\tconst videoData = this.state.videoData\r\n\t\tvar id = value.target.id;\r\n\t\tlet isChecked = value.target.checked? 1 : 0\r\n\t\tlet roleIdx = this.state.roles.findIndex(role => {\r\n\t\t\treturn role.RoleId === id\r\n\t\t})\r\n\r\n\t\tlet role = this.state.roles[roleIdx];\r\n\t\trole.IsActive = isChecked\r\n\r\n\t\tlet videoRoleIdx = videoData.ScreenVideoRoles.findIndex(role => {\r\n\t\t\treturn role.RoleId === id\r\n\t\t})\r\n\r\n\t\tif(videoRoleIdx === -1){\r\n\t\t\trole.VideoRoleId = -1;\r\n\t\t\tvideoData.ScreenVideoRoles.push(role)\r\n\t\t}\r\n\t\telse{\r\n\t\t\tvideoData.ScreenVideoRoles[videoRoleIdx].IsActive = isChecked\r\n\t\t}\r\n\r\n\t\tthis.setState({videoData: videoData})\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tthis.props.resetError()\r\n\t\tthis.loadData();\r\n\t\tthis.keyCount = 1;\r\n\t}\r\n\r\n\tloadData() {\r\n\t\tthis.getAllRoles();\r\n\t\tthis.fetchVideoScreens(true);\r\n\t}\r\n\r\n\tgetAllRoles(){\r\n\t\tthis.props.getAllRoles().then((response)=> {\r\n\t\t\tthis.setState({ roles: response.data.Result});\r\n\t\t})\r\n\t}\r\n\r\n\tfetchVideoScreens(showLoading) {\r\n\t\tthis.setState({ isLoading: true, isError: 'No', responseMsg: '' })\r\n\t\tthis.props.fetchScreens()\r\n\t\t\t.then((response) => {\r\n\t\t\t\t//var t = (showLoading === true ? this.props.roleManagerSuccess(response.data.Message) : null)\r\n\t\t\t\tif(response.data.Result.length > 0) {\r\n\t\t\t\t\tconst moduleMap = [];\r\n\t\t\t\t\tconst data = response.data.Result;\r\n\t\t\t\t\tdata.forEach(datum => {\r\n\t\t\t\t\t\tlet screens = moduleMap[datum.Module]\r\n\t\t\t\t\t\tif(!screens) {\r\n\t\t\t\t\t\t\tscreens = []\r\n\t\t\t\t\t\t\tmoduleMap[datum.Module] = screens\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tscreens.push({label: datum.ScreenName, value: datum.ScreenName})\r\n\t\t\t\t\t})\r\n\r\n\t\t\t\t\tconst screens = this.state.videoData.VideoId !== -1 ? moduleMap[this.state.videoData.Module] : []\r\n\r\n\t\t\t\t\tthis.setState({isLoading: false, modules: Object.keys(moduleMap).map(key => { return {label: key, value: key}}), moduleToScreen: moduleMap, screens: screens})\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t//\tthis.props.roleManagerFailure()\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\t//this.props.roleManagerFailure(error.response.data.Message)\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t}\r\n\r\n\tonSave(data) {\r\n\t\tthis.setState({ isLoading: true, isError: 'No', responseMsg: '' })\r\n\t\tthis.props.saveScreenVideo(data, this.state.videoFile)\r\n\t\t\t.then((response) => {\r\n\t\t\t\t//var t = (showLoading === true ? this.props.roleManagerSuccess(response.data.Message) : null)\r\n\t\t\t\tif(response.status === 200) {\r\n\t\t\t\t\tthis.props.getResult(response.data.Result, this.state.videoData.VideoId === -1)\r\n\t\t\t\t\tthis.showModal(\"terms\")\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.setState({ isLoading: false, isError: 'No', responseMsg: 'Record has been updated successfully' })\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n this.setState({ responseMsg: error.response.data.Message, isError: 'Yes', isLoading: false })\r\n }\r\n\t\t\t})\r\n\t}\r\n\r\n\thandleChange(value, field, props) {\r\n const videoData = this.state.videoData\r\n videoData[field] = value;\r\n this.setState({videoData: videoData})\r\n }\r\n\r\n\tgetRoleRenderer() {\r\n\t\tvar roles = Object.values(this.state.roles).map((role) =>{\r\n\t\t\tvar vidIdx = (this.state.videoData.ScreenVideoRoles.findIndex(vidRole => {\r\n\t\t\t\treturn vidRole.RoleId === role.RoleId}))\r\n\t\t\tlet check = vidIdx !== -1 ? this.state.videoData.ScreenVideoRoles[vidIdx].IsActive : false\r\n\t\t\treturn (\r\n\t\t\t\t\t\r\n \r\n \r\n \r\n \r\n \r\n \r\n {bindValues.UPDATED_BY} \r\n {moment(bindValues.UPDATED_ON).format('L')} \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.menu.EnablementParametersManager[0].MatchAndSegmentationTab.FlightPlanningDocDetails\r\n }\r\n}\r\n\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getFlightPlanningDocParameters: () => dispatch(getFlightPlanningDocParameters()),\r\n updateFlightPlanningDocParameters: (records, userId) => dispatch(updateFlightPlanningDocParameters(records, userId)),\r\n resetError: () => dispatch(resetError())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(FlightPlanningDocParameters)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport classNames from \"classnames\";\r\nimport { path } from 'Constants'\r\nimport moment from 'moment'\r\nimport {ControlTextE} from 'UI/CustomComponents/Controls';\r\n// Actions\r\nimport {\r\n getFlightPlanningSpendParameters,\r\n updateFlightPlanningSpendParameters,\r\n resetError\r\n} from 'actions/spendActions'\r\n\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\n\r\nclass FlightPlanningSpendParameters extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isLoading: false,\r\n flightPlanningSpendParameters: [],\r\n editedSpendParameters: [],\r\n respnseMessage: '',\r\n isError: false\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n this.trackSpendParameterChanges = this.trackSpendParameterChanges.bind(this)\r\n this.onSpendParameterSave = this.onSpendParameterSave.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n }\r\n\r\n loadData() {\r\n this.getAllParameters();\r\n }\r\n\r\n trackSpendParameterChanges(record) {\r\n if (this.state.editedSpendParameters.length === 0 || this.state.editedSpendParameters.find(a => a.SPEND_ID === record.SPEND_ID) === undefined) {\r\n var updatedRecords = this.state.editedSpendParameters\r\n updatedRecords.push(record)\r\n this.setState({ respnseMessage: '', editedSpendParameters: updatedRecords, isError: false })\r\n }\r\n }\r\n\r\n getAllParameters() {\r\n this.setState({ respnseMessage: '', isError: false });\r\n this.props.getFlightPlanningSpendParameters().then((response) => {\r\n if (response.status === 200) {\r\n this.setState({ flightPlanningSpendParameters: response.data.Result, isLoading: false, respnseMessage: '', isError: false });\r\n }\r\n else {\r\n this.setState({ respnseMessage: this.props.content.errorMessage, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ respnseMessage: this.props.content.errorMessage, isError: true });\r\n })\r\n }\r\n\r\n onSpendParameterSave() {\r\n if (this.state.editedSpendParameters.find(a => a.MIN_SPEND === '') === undefined && this.state.editedSpendParameters.find(a => a.MAX_SPEND === '') === undefined && this.state.editedSpendParameters.find(a => a.SPEND_SEGMENTATION === '') === undefined) {\r\n if (this.state.editedSpendParameters.find(a => a.MIN_SPEND === '-') === undefined && this.state.editedSpendParameters.find(a => a.MAX_SPEND === '-') === undefined) {\r\n if (this.state.editedSpendParameters.find(a => Number(a.MAX_SPEND) > 9000000000000000000) !== undefined) {\r\n this.setState({ respnseMessage: this.props.content.maxSpendLimit, isError: true });\r\n }\r\n else if (this.state.editedSpendParameters.find(a => Number(a.MIN_SPEND) < -9000000000000000000) !== undefined) {\r\n this.setState({ respnseMessage: this.props.content.minSpendLimit, isError: true });\r\n }\r\n else {\r\n this.setState({ isLoading: true, respnseMessage: '', isError: false });\r\n let email = this.props.user.user.Email\r\n let updatedRecords = this.state.editedSpendParameters.map(item => ({ ...item }))\r\n updatedRecords.map(function (parameter) {\r\n parameter['UPDATED_BY'] = email\r\n });\r\n this.props.updateFlightPlanningSpendParameters(updatedRecords).then((response) => {\r\n if (response.status === 200) {\r\n // this.state.flightPlanningSpendParameters.map(function (parameter) {\r\n // if (updatedRecords.find(a => a.SPEND_ID === parameter.SPEND_ID))\r\n // parameter['UPDATED_BY'] = email\r\n // });\r\n this.setState({ flightPlanningSpendParameters: response.data.Result, editedSpendParameters: [], isLoading: false, respnseMessage: this.props.content.successMessage, isError: false });\r\n }\r\n else {\r\n this.setState({ isLoading: false, respnseMessage: this.props.content.errorMessage, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ isLoading: false, respnseMessage: this.props.content.errorMessage, isError: true });\r\n })\r\n }\r\n }\r\n else {\r\n this.setState({ respnseMessage: this.props.content.validNumber, isError: true });\r\n }\r\n }\r\n else {\r\n this.setState({ respnseMessage: this.props.content.blankValue, isError: true });\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetError()\r\n }\r\n\r\n render() {\r\n var _instance = this\r\n var spendParameters = this.state.flightPlanningSpendParameters.map(function (parameter) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {bindValues.UPDATED_BY} \r\n {moment(bindValues.UPDATED_ON).format('L')} \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.menu.EnablementParametersManager[0].MatchAndSegmentationTab.FlightPlanningSpendDetails\r\n }\r\n}\r\n\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getFlightPlanningSpendParameters: () => dispatch(getFlightPlanningSpendParameters()),\r\n updateFlightPlanningSpendParameters: (records, userId) => dispatch(updateFlightPlanningSpendParameters(records, userId)),\r\n resetError: () => dispatch(resetError())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(FlightPlanningSpendParameters)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport classNames from \"classnames\";\r\nimport { path } from 'Constants'\r\nimport moment from 'moment'\r\nimport {ControlTextE} from 'UI/CustomComponents/Controls';\r\n// Actions\r\nimport {\r\n getFlightPlanningTransactingBuyRelationship,\r\n updateFlightPlanningTransactingBuyRelationship,\r\n resetError\r\n} from 'actions/spendActions'\r\n\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\n\r\nclass FlightPlanningTransactingBuyRelationship extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isLoading: false,\r\n FlightPlanningTransactingBuyRelationship: [],\r\n editedSpendParameters: [],\r\n respnseMessage: '',\r\n isError: false\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n this.trackSpendParameterChanges = this.trackSpendParameterChanges.bind(this)\r\n this.onSpendParameterSave = this.onSpendParameterSave.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n }\r\n\r\n loadData() {\r\n this.getAllParameters();\r\n }\r\n\r\n trackSpendParameterChanges(record) {\r\n if (this.state.editedSpendParameters.length === 0 || this.state.editedSpendParameters.find(a => a.TRANS_RELNSHP_ID === record.TRANS_RELNSHP_ID) === undefined) {\r\n var updatedRecords = this.state.editedSpendParameters\r\n updatedRecords.push(record)\r\n this.setState({ respnseMessage: '', editedSpendParameters: updatedRecords, isError: false })\r\n }\r\n }\r\n\r\n getAllParameters() {\r\n this.setState({ respnseMessage: '', isError: false });\r\n this.props.getFlightPlanningTransactingBuyRelationship().then((response) => {\r\n if (response.status === 200) {\r\n this.setState({ FlightPlanningTransactingBuyRelationship: response.data.Result, isLoading: false, respnseMessage: '', isError: false });\r\n }\r\n else {\r\n this.setState({ respnseMessage: this.props.content.errorMessage, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ respnseMessage: this.props.content.errorMessage, isError: true });\r\n })\r\n }\r\n\r\n onSpendParameterSave() {\r\n if (this.state.editedSpendParameters.find(a => a.MIN_TRANS_RELNSHP === '') === undefined && this.state.editedSpendParameters.find(a => a.MAX_TRANS_RELNSHP === '') === undefined && this.state.editedSpendParameters.find(a => a.TRANSACTING_BUYER_RELATIONSHIP === '') === undefined) {\r\n if (this.state.editedSpendParameters.find(a => a.MIN_TRANS_RELNSHP === '-') === undefined && this.state.editedSpendParameters.find(a => a.MAX_TRANS_RELNSHP === '-') === undefined) {\r\n if (this.state.editedSpendParameters.find(a => Number(a.MAX_TRANS_RELNSHP) > 9000000000000000000) !== undefined) {\r\n this.setState({ respnseMessage: this.props.content.maxSpendLimit, isError: true });\r\n }\r\n else if (this.state.editedSpendParameters.find(a => Number(a.MIN_TRANS_RELNSHP) < -9000000000000000000) !== undefined) {\r\n this.setState({ respnseMessage: this.props.content.minSpendLimit, isError: true });\r\n }\r\n else {\r\n this.setState({ isLoading: true, respnseMessage: '', isError: false });\r\n let email = this.props.user.user.Email\r\n let updatedRecords = this.state.editedSpendParameters.map(item => ({ ...item }))\r\n updatedRecords.map(function (parameter) {\r\n parameter['UPDATED_BY'] = email\r\n });\r\n this.props.updateFlightPlanningTransactingBuyRelationship(updatedRecords).then((response) => {\r\n if (response.status === 200) {\r\n // this.state.FlightPlanningTransactingBuyRelationship.map(function (parameter) {\r\n // if (updatedRecords.find(a => a.TRANS_RELNSHP_ID === parameter.TRANS_RELNSHP_ID))\r\n // parameter['UPDATED_BY'] = email\r\n // });\r\n this.setState({ FlightPlanningTransactingBuyRelationship: response.data.Result, editedSpendParameters: [], isLoading: false, respnseMessage: this.props.content.successMessage, isError: false });\r\n }\r\n else {\r\n this.setState({ isLoading: false, respnseMessage: this.props.content.errorMessage, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ isLoading: false, respnseMessage: this.props.content.errorMessage, isError: true });\r\n })\r\n }\r\n }\r\n else {\r\n this.setState({ respnseMessage: this.props.content.validNumber, isError: true });\r\n }\r\n }\r\n else {\r\n this.setState({ respnseMessage: this.props.content.blankValue, isError: true });\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetError()\r\n }\r\n\r\n render() {\r\n var _instance = this\r\n var spendParameters = this.state.FlightPlanningTransactingBuyRelationship.map(function (parameter) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {bindValues.UPDATED_BY} \r\n {moment(bindValues.UPDATED_ON).format('L')} \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.menu.EnablementParametersManager[0].MatchAndSegmentationTab.FlightPlanningTransactingBuyRelationship\r\n }\r\n}\r\n\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getFlightPlanningTransactingBuyRelationship: () => dispatch(getFlightPlanningTransactingBuyRelationship()),\r\n updateFlightPlanningTransactingBuyRelationship: (records, userId) => dispatch(updateFlightPlanningTransactingBuyRelationship(records, userId)),\r\n resetError: () => dispatch(resetError())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(FlightPlanningTransactingBuyRelationship)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Form } from 'react-redux-form'\r\nimport classNames from \"classnames\";\r\nimport { path } from 'Constants'\r\nimport moment from 'moment'\r\nimport { CheckboxE } from 'UI/CustomComponents/Controls';\r\n\r\n// Actions\r\nimport {\r\n fetchSolutionInScopeValues,\r\n resetError,\r\n updateSolutionInScopeValues\r\n} from 'actions/spendActions'\r\n\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\n\r\nclass SolutionInScopeValues extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isLoading: false,\r\n apiData: [],\r\n editedScopeRow: [],\r\n responseMessage: '',\r\n isError: false,\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n this.trackScopeVisibilityChanges = this.trackScopeVisibilityChanges.bind(this)\r\n this.handleSave = this.handleSave.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n }\r\n\r\n loadData() {\r\n this.getSolutionInScopeValues();\r\n }\r\n\r\n trackScopeVisibilityChanges(record) {\r\n var updatedRecords = this.state.editedScopeRow\r\n if (this.state.editedScopeRow.length === 0)\r\n updatedRecords.push(record)\r\n else {\r\n let index = this.state.editedScopeRow.findIndex(x => x.Id === record.Id);\r\n if (index !== undefined && index !== null && index > -1)\r\n updatedRecords.splice(index, 1)\r\n updatedRecords.push(record)\r\n }\r\n this.setState({ responseMessage: '', editedScopeRow: updatedRecords, isError: false })\r\n }\r\n\r\n getSolutionInScopeValues() {\r\n this.setState({ responseMessage: '', isLoading: true, isError: false });\r\n this.props.fetchSolutionInScopeValues().then((response) => {\r\n if (response.status === 200) {\r\n if (response.data.Result.length === 0) {\r\n this.setState({ responseMessage: this.props.content.noRecords, isLoading: false, isError: true });\r\n }\r\n else {\r\n console.log(\"api data-----------\", response.data.Result)\r\n this.setState({ apiData: response.data.Result, isLoading: false, responseMessage: '', isError: false });\r\n }\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n })\r\n }\r\n\r\n handleSave() {\r\n\r\n this.setState({ isLoading: true, responseMessage: '', isError: false });\r\n let updatedRecords = this.state.editedScopeRow\r\n let email = this.props.user.user.Email\r\n let finalObject = [];\r\n updatedRecords.map(function (data) {\r\n let record = {\r\n 'SolutionInScope_Value': data.SolutionInScope_Value,\r\n 'Visible_Flag': (data.Visible_Flag === \"true\" || data.Visible_Flag === true) ? true : false,\r\n 'Updated_By': email,\r\n 'TRAN_AN_SUPP_AUTO_ELIGIBLE' : data.TRAN_AN_SUPP_AUTO_ELIGIBLE == true ? 'Yes' : 'No',\r\n 'UNCLASS_SUPP_AUTO_ELIGIBLE' : data.UNCLASS_SUPP_AUTO_ELIGIBLE == true ? 'Yes' : 'No',\r\n 'DIRECT_YES_SUPP_SCC_ELIGIBLE' : data.DIRECT_YES_SUPP_SCC_ELIGIBLE == true ? 'Yes' : 'No',\r\n 'FLDG_IN_SCOPE' : data.FLDG_IN_SCOPE == true ? 'Yes' : 'No',\r\n 'FG_IN_AUTO_ELG' : data.FG_IN_AUTO_ELG == true ? 'Yes' : 'No',\r\n 'SUPPLIER_ELIGIBLE': data.SUPPLIER_ELIGIBLE == true ? 'Yes' : 'No',\r\n 'CATEGORY_IN_SCOPE': data.CATEGORY_IN_SCOPE == true ? 'Yes' : 'No',\r\n 'Id': data.Id,\r\n }\r\n finalObject.push(record)\r\n });\r\n\r\n this.props.updateSolutionInScopeValues(finalObject).then((response) => {\r\n if (response.status === 200) {\r\n this.setState({\r\n apiData: response.data.Result, editedScopeRow: [],\r\n isLoading: false, responseMessage: this.props.content.successMessage,\r\n isError: false\r\n });\r\n }\r\n else {\r\n this.setState({ isLoading: false, responseMessage: this.props.content.errorMessage, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ isLoading: false, responseMessage: this.props.content.errorMessage, isError: true });\r\n })\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetError()\r\n }\r\n\r\n render() {\r\n var _instance = this\r\n var data = _instance.state.apiData !== null && _instance.state.apiData\r\n var account_yield = data.map(function (data, index) {\r\n data.TRAN_AN_SUPP_AUTO_ELIGIBLE = (data.TRAN_AN_SUPP_AUTO_ELIGIBLE == null || data.TRAN_AN_SUPP_AUTO_ELIGIBLE == \"No\" || data.TRAN_AN_SUPP_AUTO_ELIGIBLE == false) ? false : true ;\r\n data.UNCLASS_SUPP_AUTO_ELIGIBLE = (data.UNCLASS_SUPP_AUTO_ELIGIBLE == null || data.UNCLASS_SUPP_AUTO_ELIGIBLE == \"No\" || data.UNCLASS_SUPP_AUTO_ELIGIBLE == false) ? false : true ;\r\n data.DIRECT_YES_SUPP_SCC_ELIGIBLE = (data.DIRECT_YES_SUPP_SCC_ELIGIBLE == null || data.DIRECT_YES_SUPP_SCC_ELIGIBLE == \"No\" || data.DIRECT_YES_SUPP_SCC_ELIGIBLE == false) ? false : true ;\r\n data.FLDG_IN_SCOPE = (data.FLDG_IN_SCOPE == null || data.FLDG_IN_SCOPE == \"No\" || data.FLDG_IN_SCOPE == false) ? false : true ;\r\n data.FG_IN_AUTO_ELG = (data.FG_IN_AUTO_ELG == null || data.FG_IN_AUTO_ELG == \"No\" || data.FG_IN_AUTO_ELG == false) ? false : true ;\r\n data.SUPPLIER_ELIGIBLE = (data.SUPPLIER_ELIGIBLE == null || data.SUPPLIER_ELIGIBLE == \"No\" || data.SUPPLIER_ELIGIBLE == false) ? false : true ;\r\n data.CATEGORY_IN_SCOPE = (data.CATEGORY_IN_SCOPE == null || data.CATEGORY_IN_SCOPE == \"No\" || data.CATEGORY_IN_SCOPE == false) ? false : true ;\r\n return ( -1 ? false : true}\r\n trackScopeVisibilityChanges={_instance.trackScopeVisibilityChanges}\r\n />\r\n );\r\n });\r\n\r\n return (\r\n \r\n {bindValues.SolutionInScope_Value} \r\n\r\n \r\n \r\n \r\n this.selectIsSupplierEligibleChk(e)} /> \r\n this.selectIsCatalogInScopeChk(e)} /> \r\n this.selectIstransactionEligibleChk(e)} /> \r\n this.selectIsunclassifiedEligibleChk(e)} /> \r\n this.selectIssCCEligibleChk(e)} /> \r\n this.selectIsfieldglassChk(e)} /> \r\n this.selectIsfieldglassEligibleChk(e)} /> \r\n {bindValues.Updated_By} \r\n {moment(bindValues.Updated_Date).format('L')} \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n spendDetails: state.spendDetails,\r\n content: state.content.menu.EnablementParametersManager[0].SELogicAndAnalysisTab\r\n }\r\n}\r\n\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n resetError: () => dispatch(resetError()),\r\n fetchSolutionInScopeValues: () => dispatch(fetchSolutionInScopeValues()),\r\n updateSolutionInScopeValues: (data) => dispatch(updateSolutionInScopeValues(data)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SolutionInScopeValues)\r\n\r\n\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport classNames from \"classnames\";\r\nimport { path } from 'Constants'\r\nimport moment from 'moment'\r\nimport { ControlTextE, SelectE} from 'UI/CustomComponents/Controls';\r\nimport Select from 'react-select';\r\n// Actions\r\nimport {\r\n getEnablementResourceParametersAdmin,\r\n updateEnablementResourceParametersAdmin,\r\n resetError,\r\n fetchSolutionInScopeValues\r\n} from 'actions/spendActions'\r\n\r\n// Utils\r\nimport { BreakLine, round } from 'utils/Utils'\r\n\r\nclass EnablementResourceParametersAdmin extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isLoading: false,\r\n enablementResourceParameters: [],\r\n editedEnablementResourceParameters: [],\r\n responseMessage: '',\r\n isError: false,\r\n indirectSolutionScopeOption :[],\r\n selectedIndirectScope : '',\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n this.trackEnablementResourceParametersChanges = this.trackEnablementResourceParametersChanges.bind(this)\r\n this.onEnablementResourceParametersSave = this.onEnablementResourceParametersSave.bind(this)\r\n this.handleSolutionInScopeChange = this.handleSolutionInScopeChange.bind(this) \r\n }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n }\r\n\r\n loadData() {\r\n this.props.fetchSolutionInScopeValues().then((response) => {\r\n if (response.status === 200) {\r\n this.getAllParameters(response.data.Result[0].SolutionInScope_Value);\r\n var indirectScopeValues=[]; \t\t\t\t\r\n\r\n if (response.data.Result !== null) {\r\n response.data.Result.forEach(item => { \r\n indirectScopeValues.push({ label: item.SolutionInScope_Value, value: item.SolutionInScope_Value });\t\t\t\t\t\t\t\r\n });\r\n } \t\t\t\t\t\t\t\t\r\n\r\n this.setState({ indirectSolutionScopeOption: indirectScopeValues, selectedIndirectScope : response.data.Result[0].SolutionInScope_Value});\r\n }\r\n });\r\n }\r\n\r\n trackEnablementResourceParametersChanges(record) {\r\n var updatedRecords = this.state.editedEnablementResourceParameters\r\n if (this.state.editedEnablementResourceParameters.length === 0)\r\n updatedRecords.push(record)\r\n else {\r\n let index = this.state.editedEnablementResourceParameters.findIndex(x => x.RESOURCE_PARAMETER_ID === record.RESOURCE_PARAMETER_ID);\r\n if (index !== undefined && index !== null && index > -1)\r\n updatedRecords.splice(index, 1)\r\n updatedRecords.push(record)\r\n }\r\n this.setState({ responseMessage: '', editedEnablementResourceParameters: updatedRecords, isError: false })\r\n }\r\n\r\n getAllParameters(solutionInScope) {\r\n this.setState({ responseMessage: '', isLoading: true, isError: false });\r\n this.props.getEnablementResourceParametersAdmin(solutionInScope).then((response) => {\r\n if (response.status === 200) {\r\n if (response.data.Result.length === 0) {\r\n this.setState({ responseMessage: this.props.content.reimport, isLoading: false, isError: true });\r\n }\r\n else\r\n {\r\n const ids = response.data.Result.map(({ RESOURCE_PARAMETER_ID }) => RESOURCE_PARAMETER_ID);\r\n const filtered = response.data.Result.filter(({ RESOURCE_PARAMETER_ID }, index) =>\r\n !ids.includes(RESOURCE_PARAMETER_ID, index + 1));\r\n this.setState({ enablementResourceParameters: filtered.filter(d=>d.ENABLEMENT_WAVE_STRATEGY_MODEL=== this.props.tab), isLoading: false, responseMessage: '', isError: false });\r\n \r\n }\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n }\r\n }).catch((error) => {\r\n console.log(error);\r\n this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n })\r\n }\r\n\r\n onEnablementResourceParametersSave() {\r\n if (this.state.editedEnablementResourceParameters.find(a => a.WAVE_1 === '') === undefined && this.state.editedEnablementResourceParameters.find(a => a.WAVE_N === '') === undefined) {\r\n if (this.state.editedEnablementResourceParameters.find(a => a.WAVE_1 === '-') === undefined && this.state.editedEnablementResourceParameters.find(a => a.WAVE_N === '-') === undefined) {\r\n this.setState({ isLoading: true, responseMessage: '', isError: false });\r\n let updatedRecords = this.state.editedEnablementResourceParameters\r\n let email = this.props.user.user.Email\r\n let finalObject = [];\r\n updatedRecords.map(function (parameter) {\r\n let reocrd = {\r\n 'Email': email, 'Resource_Parameter_Id' : parameter.RESOURCE_PARAMETER_ID,\r\n 'FTEs' : parameter.FTE, 'SolutionInScope' : parameter.SOLUTION_IN_SCOPE,\r\n 'Wave_1': parameter.WAVE_1, 'Wave_n': parameter.WAVE_N\r\n }\r\n finalObject.push(reocrd)\r\n });\r\n\r\n this.props.updateEnablementResourceParametersAdmin(finalObject).then((response) => {\r\n if (response.status === 200) {\r\n const ids = response.data.Result.map(({ RESOURCE_PARAMETER_ID }) => RESOURCE_PARAMETER_ID);\r\n const filtered = response.data.Result.filter(({ RESOURCE_PARAMETER_ID }, index) =>\r\n !ids.includes(RESOURCE_PARAMETER_ID, index + 1));\r\n \r\n this.setState({ enablementResourceParameters: filtered.filter(d=>d.ENABLEMENT_WAVE_STRATEGY_MODEL=== this.props.tab), editedEnablementResourceParameters: [], isLoading: false, responseMessage: this.props.content.successMessage, isError: false });\r\n }\r\n else {\r\n this.setState({ isLoading: false, responseMessage: this.props.content.errorMessage, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ isLoading: false, responseMessage: this.props.content.errorMessage, isError: true });\r\n })\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.validNumber, isError: true });\r\n }\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.blankValue, isError: true });\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetError()\r\n }\r\n\r\n handleSolutionInScopeChange(value)\r\n {\r\n this.setState({ selectedIndirectScope : value },()=>{this.getAllParameters(value)});\r\n }\r\n\r\n render() {\r\n var _instance = this\r\n var isAdmin = this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ? true : false;\r\n var resourceParameters = this.state.enablementResourceParameters.map(function (parameter, index) {\r\n return (\r\n {this.props.index === 0 ?\r\n {bindValues.RESOURCE_TYPE} \r\n :\r\n this.props.index !== 1 ?\r\n {bindValues.RESOURCE_TYPE} \r\n :\r\n null\r\n }\r\n {bindValues.ACCOUNT_TYPE} \r\n {this.props.isAdmin ?\r\n \r\n :\r\n {bindValues.WAVE_1} \r\n }\r\n {this.props.isAdmin ?\r\n \r\n :\r\n {bindValues.WAVE_1} \r\n }\r\n {this.props.isAdmin ?\r\n \r\n :\r\n {bindValues.WAVE_N} \r\n }\r\n {bindValues.USER_ID} \r\n {moment(bindValues.DATA_LOAD_DATE).format('L')} \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n spendDetails: state.spendDetails,\r\n content: state.content.spendAnalysis.enablementResourceParamaeters,\r\n }\r\n}\r\n\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getEnablementResourceParametersAdmin: (soltionInScope) => dispatch(getEnablementResourceParametersAdmin(soltionInScope)),\r\n updateEnablementResourceParametersAdmin: (records) => dispatch(updateEnablementResourceParametersAdmin(records)),\r\n fetchSolutionInScopeValues: () => dispatch(fetchSolutionInScopeValues()),\r\n resetError: () => dispatch(resetError())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EnablementResourceParametersAdmin)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport FlightPlanningDocParameters from '../Admin/FlightPlanningDocParameters'\r\nimport FlightPlanningSpendParameters from '../Admin/FlightPlanningSpendParameters'\r\nimport FlightPlanningTransactingBuyRelationship from '../Admin/FlightPlanningTransactingBuyRelationship'\r\nimport SolutionInScopeValues from './SolutionInScopeValues'\r\nimport EnablementResourceParametersAdmin from \"../Spend/EnablementResourceParametersAdmin\"\r\n\r\nclass MatchAndSegmentation extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n readOnly : props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ? false : true\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n {bindValues.ENABLEMENT_MATCH_TYPE} \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.menu.EnablementParametersManager[0].WaveScoringTab\r\n }\r\n}\r\n\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getWaveWeightCategoryDetails: () => dispatch(getWaveWeightCategoryDetails()),\r\n updateWaveWeightCategoryDetails: (records) => dispatch(updateWaveWeightCategoryDetails(records)),\r\n resetError: () => dispatch(resetError())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(WaveScoringParameters)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport classNames from \"classnames\";\r\nimport { path } from 'Constants'\r\nimport moment from 'moment'\r\nimport {ControlTextE} from 'UI/CustomComponents/Controls';\r\n// Actions\r\nimport {\r\n getFlightPlanningNetworkEnablementMatchTypeParameters,\r\n updateFlightPlanningNetworkEnablementMatchTypeParameters,\r\n resetError\r\n} from 'actions/spendActions'\r\n\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\n\r\nclass FlightPlanningNetworkEnablementMatchTypes extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isLoading: false,\r\n networkEnablementMatchTypes: [],\r\n editedNetworkEnablementMatchTypes: [],\r\n respnseMessage: '',\r\n isError: false\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n this.trackNetworkEnablementMatchTypeChanges = this.trackNetworkEnablementMatchTypeChanges.bind(this)\r\n this.onNetworkEnablementMatchTypeSave = this.onNetworkEnablementMatchTypeSave.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n }\r\n\r\n loadData() {\r\n this.getAllParameters();\r\n }\r\n\r\n trackNetworkEnablementMatchTypeChanges(record) {\r\n if (this.state.editedNetworkEnablementMatchTypes.length === 0 || this.state.editedNetworkEnablementMatchTypes.find(a => a.ARIBA_NET_ENABLE_MATCH_ID === record.ARIBA_NET_ENABLE_MATCH_ID) === undefined) {\r\n var updatedRecords = this.state.editedNetworkEnablementMatchTypes\r\n updatedRecords.push(record)\r\n this.setState({ respnseMessage: '', editedNetworkEnablementMatchTypes: updatedRecords, isError: false })\r\n }\r\n }\r\n\r\n getAllParameters() {\r\n this.setState({ respnseMessage: '', isError: false });\r\n this.props.getFlightPlanningNetworkEnablementMatchTypeParameters().then((response) => {\r\n if (response.status === 200) {\r\n this.setState({ networkEnablementMatchTypes: response.data.Result, isLoading: false, respnseMessage: '', isError: false });\r\n }\r\n else {\r\n this.setState({ respnseMessage: this.props.content.errorMessage, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ respnseMessage: this.props.content.errorMessage, isError: true });\r\n })\r\n }\r\n\r\n onNetworkEnablementMatchTypeSave() {\r\n if (this.state.editedNetworkEnablementMatchTypes.find(a => a.ENABLEMENT_YIELD_PER === '') === undefined) {\r\n if (this.state.editedNetworkEnablementMatchTypes.find(a => a.ENABLEMENT_YIELD_PER === '-') === undefined && this.state.editedNetworkEnablementMatchTypes.find(a => a.ENABLEMENT_YIELD_PER === '-') === undefined) {\r\n this.setState({ isLoading: true, respnseMessage: '', isError: false });\r\n let email = this.props.user.user.Email\r\n let updatedRecords = this.state.editedNetworkEnablementMatchTypes.map(item => ({ ...item }))\r\n updatedRecords.map(function (parameter) {\r\n parameter['UPDATED_BY'] = email\r\n });\r\n this.props.updateFlightPlanningNetworkEnablementMatchTypeParameters(updatedRecords).then((response) => {\r\n if (response.status === 200) {\r\n // this.state.networkEnablementMatchTypes.map(function (parameter) {\r\n // if (updatedRecords.find(a => a.ARIBA_NET_ENABLE_MATCH_ID === parameter.ARIBA_NET_ENABLE_MATCH_ID))\r\n // parameter['UPDATED_BY'] = email\r\n // });\r\n this.setState({ networkEnablementMatchTypes: response.data.Result, editedNetworkEnablementMatchTypes: [], isLoading: false, respnseMessage: this.props.content.successMessage, isError: false });\r\n }\r\n else {\r\n this.setState({ isLoading: false, respnseMessage: this.props.content.errorMessage, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ isLoading: false, respnseMessage: this.props.content.errorMessage, isError: true });\r\n })\r\n }\r\n else {\r\n this.setState({ respnseMessage: this.props.content.validNumber, isError: true });\r\n }\r\n }\r\n else {\r\n this.setState({ respnseMessage: this.props.content.blankValue, isError: true });\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetError()\r\n }\r\n\r\n render() {\r\n var _instance = this\r\n var enablementMatchTypeParameters = this.state.networkEnablementMatchTypes.map(function (parameter) {\r\n return (\r\n {bindValues.ARIBA_NET_ENABLE_MATCH_TYPE} \r\n \r\n \r\n {bindValues.UPDATED_BY} \r\n {moment(bindValues.UPDATED_ON).format('L')} \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.menu.EnablementParametersManager[0].MatchAndSegmentationTab.FlightPlanningNetworkEnablementMatchTypeDetails\r\n }\r\n}\r\n\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getFlightPlanningNetworkEnablementMatchTypeParameters: () => dispatch(getFlightPlanningNetworkEnablementMatchTypeParameters()),\r\n updateFlightPlanningNetworkEnablementMatchTypeParameters: (records, userId) => dispatch(updateFlightPlanningNetworkEnablementMatchTypeParameters(records, userId)),\r\n resetError: () => dispatch(resetError())\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(FlightPlanningNetworkEnablementMatchTypes)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Form } from 'react-redux-form'\r\nimport classNames from \"classnames\";\r\nimport { path } from 'Constants'\r\nimport moment from 'moment'\r\nimport { ControlTextE } from 'UI/CustomComponents/Controls';\r\n\r\n// Actions\r\nimport {\r\n fetchStandardAccountYieldFactor,\r\n resetError,\r\n updateStandardAccountYield\r\n} from 'actions/spendActions'\r\n\r\n// Utils\r\nimport { BreakLine} from 'utils/Utils'\r\n\r\nclass StandardAccountYield extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isLoading: false,\r\n accountYield: [],\r\n editedAccountYield: [],\r\n responseMessage: '',\r\n isError: false\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n this.trackAccountYieldChanges = this.trackAccountYieldChanges.bind(this)\r\n this.onAccountYieldSave = this.onAccountYieldSave.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n }\r\n\r\n loadData() {\r\n this.getStandardAccountYield();\r\n }\r\n\r\n trackAccountYieldChanges(record) {\r\n var updatedRecords = this.state.editedAccountYield\r\n if (this.state.editedAccountYield.length === 0)\r\n updatedRecords.push(record)\r\n else {\r\n let index = this.state.editedAccountYield.findIndex(x => x.QUARTER_NO === record.QUARTER_NO);\r\n if (index !== undefined && index !== null && index > -1)\r\n updatedRecords.splice(index, 1)\r\n updatedRecords.push(record)\r\n }\r\n this.setState({ responseMessage: '', editedAccountYield: updatedRecords, isError: false })\r\n }\r\n\r\n getStandardAccountYield() {\r\n this.setState({ responseMessage: '', isLoading: true, isError: false });\r\n this.props.fetchStandardAccountYieldFactor().then((response) => {\r\n if (response.status === 200) {\r\n if (response.data.Result.length === 0) {\r\n this.setState({ responseMessage: this.props.content.noRecords, isLoading: false, isError: true });\r\n }\r\n else\r\n this.setState({ accountYield: response.data.Result, isLoading: false, responseMessage: '', isError: false });\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n })\r\n }\r\n\r\n onAccountYieldSave() {\r\n if (this.state.editedAccountYield.find(a => a.ESTIMATED_YIELD_VALUE === '') === undefined ) {\r\n if (this.state.editedAccountYield.find(a => a.ESTIMATED_YIELD_VALUE === '-') === undefined ) {\r\n this.setState({ isLoading: true, responseMessage: '', isError: false });\r\n let updatedRecords = this.state.editedAccountYield\r\n let email = this.props.user.user.Email\r\n let finalObject = [];\r\n updatedRecords.map(function (data) {\r\n let record = {\r\n 'FACTOR_TYPE': data.FACTOR_TYPE,\r\n 'TYPE_NAME': data.TYPE_NAME,\r\n 'ESTIMATED_YIELD_VALUE': data.ESTIMATED_YIELD_VALUE, \r\n 'UPDATED_BY': email \r\n }\r\n finalObject.push(record)\r\n });\r\n\r\n this.props.updateStandardAccountYield(finalObject).then((response) => {\r\n if (response.status === 200) {\r\n this.setState({ accountYield: response.data.Result, editedAccountYield: [], isLoading: false, responseMessage: this.props.content.successMessage, isError: false });\r\n }\r\n else {\r\n this.setState({ isLoading: false, responseMessage: this.props.content.errorMessage, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ isLoading: false, responseMessage: this.props.content.errorMessage, isError: true });\r\n })\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.validNumber, isError: true });\r\n }\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.blankValue, isError: true });\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetError()\r\n }\r\n\r\n render() {\r\n var _instance = this\r\n var account_yield = this.state.accountYield.map(function (data, index) {\r\n return ( \r\n {/* {bindValues.FACTOR_TYPE} */}\r\n {bindValues.TYPE_NAME} \r\n {/* {this.props.readOnly ? */}\r\n \r\n \r\n {/* // :{bindValues.QUARTER_VALUE} } */}\r\n \r\n {bindValues.UPDATED_BY} \r\n {moment(bindValues.UPDATED_ON).format('L')} \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n spendDetails: state.spendDetails,\r\n //content: state.content.spendAnalysis.enablementResourceParamaeters,\r\n content: state.content.menu.EnablementParametersManager[0].MatchAndSegmentationTab.StandardAccountYield\r\n }\r\n}\r\n\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return { \r\n resetError: () => dispatch(resetError()),\r\n fetchStandardAccountYieldFactor: () => dispatch(fetchStandardAccountYieldFactor()), \r\n updateStandardAccountYield: (data) => dispatch(updateStandardAccountYield(data)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(StandardAccountYield)\r\n\r\n\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport WaveScoringParameters from \"../Admin/WaveScoringParameters\"\r\nimport FlightPlanningNetworkEnablementMatchTypes from '../Admin/FlightPlanningNetworkEnablementMatchTypes'\r\nimport StandardAccountYield from '../Admin/StandardAccountYield' \r\n\r\n\r\nclass WaveScoring extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n readOnly: props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ? false : true\r\n }\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n \r\n {bindValues.QUARTER_NO} \r\n \r\n \r\n \r\n {bindValues.UPDATED_BY} \r\n {moment(bindValues.UPDATED_ON).format('L')} \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n spendDetails: state.spendDetails,\r\n //content: state.content.spendAnalysis.enablementResourceParamaeters,\r\n content: state.content.menu.EnablementParametersManager[0].RampScheduleTab\r\n }\r\n}\r\n\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return { \r\n resetError: () => dispatch(resetError()),\r\n fetchRampScheduleFactor: () => dispatch(fetchRampScheduleFactor()), \r\n updateRampScheduleFactor: (data) => dispatch(updateRampScheduleFactor(data)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(RampScheduleFactor)\r\n\r\n\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Form } from 'react-redux-form'\r\nimport classNames from \"classnames\";\r\nimport { path } from 'Constants'\r\nimport moment from 'moment'\r\nimport { ControlTextE } from 'UI/CustomComponents/Controls';\r\n// Actions\r\nimport {\r\n fetchGoLiveVsKickOffWeekData,\r\n resetError,\r\n updateGoLiveVsKickOffWeekData\r\n} from 'actions/spendActions'\r\n\r\n// Utils\r\nimport { BreakLine} from 'utils/Utils'\r\n\r\nclass GoLiveVsKickOffWeek extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isLoading: false,\r\n goLiveKickoffWeek: [],\r\n editedGoLiveKickoffWeek: [],\r\n responseMessage: '',\r\n isError: false\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n this.trackGoLiveKickoffWeekChanges = this.trackGoLiveKickoffWeekChanges.bind(this)\r\n this.onGoLiveKickoffWeekSave = this.onGoLiveKickoffWeekSave.bind(this)\r\n this.setValidationError= this.setValidationError.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n }\r\n\r\n loadData() {\r\n this.getAllScheduleFactors();\r\n }\r\n\r\n trackGoLiveKickoffWeekChanges(record) {\r\n var updatedRecords = this.state.editedGoLiveKickoffWeek;\r\n updatedRecords.push(record);\r\n // if (this.state.editedGoLiveKickoffWeek.length === 0)\r\n // updatedRecords.push(record)\r\n // else {\r\n // let index = this.state.editedGoLiveKickoffWeek.findIndex(x => x.INTELLIGENT_END_QUARTER === record.INTELLIGENT_END_QUARTER);\r\n // if (index !== undefined && index !== null && index > -1)\r\n // updatedRecords.splice(index, 1)\r\n // updatedRecords.push(record)\r\n // }\r\n this.setState({ responseMessage: '', editedGoLiveKickoffWeek: updatedRecords, isError: false })\r\n }\r\n\r\n getAllScheduleFactors() {\r\n this.setState({ responseMessage: '', isLoading: true, isError: false });\r\n this.props.fetchGoLiveVsKickOffWeekData().then((response) => {\r\n if (response.status === 200) {\r\n if (response.data.Result.length === 0) {\r\n this.setState({ responseMessage: this.props.content.reimport, isLoading: false, isError: true });\r\n }\r\n else\r\n { \r\n var ordering = {}, // map for efficient lookup of sortIndex\r\n sortOrder = ['Managed Standard Account','Enterprise - Portal','Enterprise - Portal & Catalog','Enterprise - Integration','Enterprise - Integration & Catalog'];\r\n \r\n for (var i=0; i {\r\n this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n })\r\n }\r\n\r\n onGoLiveKickoffWeekSave() {\r\n if (this.state.editedGoLiveKickoffWeek.find(a => a.QUARTER_VALUE === '') === undefined ) {\r\n if (this.state.editedGoLiveKickoffWeek.find(a => a.QUARTER_VALUE === '-') === undefined ) {\r\n this.setState({ isLoading: true, responseMessage: '', isError: false });\r\n let updatedRecords = this.state.editedGoLiveKickoffWeek\r\n let email = this.props.user.user.Email\r\n let finalObject = [];\r\n updatedRecords.map(function (data) {\r\n let record = {\r\n 'ENABLEMENT_WAVE': data.ENABLEMENT_WAVE,\r\n 'INTELLIGENT_END_QUARTER': data.INTELLIGENT_END_QUARTER,\r\n 'ONBOARDING_WORKSTREAM': data.ONBOARDING_WORKSTREAM, \r\n 'WAVE_QUARTER_ASSIGN_ID': data.WAVE_QUARTER_ASSIGN_ID,\r\n 'USER_ID': email,\r\n 'MANUAL_END_QUARTER': data.MANUAL_END_QUARTER, \r\n }\r\n finalObject.push(record)\r\n });\r\n\r\n this.props.updateGoLiveVsKickOffWeekData(finalObject).then((response) => {\r\n if (response.status === 200) {\r\n this.loadData()\r\n this.setState({ editedGoLiveKickoffWeek: [], isLoading: false, responseMessage: this.props.content.successMessage, isError: false }); \r\n }\r\n else {\r\n this.setState({ isLoading: false, responseMessage: this.props.content.errorMessage, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ isLoading: false, responseMessage: this.props.content.errorMessage, isError: true });\r\n })\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.validNumber, isError: true });\r\n }\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.blankValue, isError: true });\r\n }\r\n }\r\n\r\n setValidationError()\r\n {\r\n this.setState({ responseMessage: this.props.content.validQuarterNo, isError: true });\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetError()\r\n }\r\n\r\n\r\n render() {\r\n var _instance = this\r\n var goLive_kickoffWeek = this.state.goLiveKickoffWeek.map(function (data, index) { \r\n return ( \r\n {bindValues.ENABLEMENT_WAVE} \r\n {bindValues.ONBOARDING_WORKSTREAM} \r\n \r\n \r\n\r\n \r\n \r\n {bindValues.USER_ID} \r\n {moment(bindValues.DATA_LOAD_DATE).format('L')} \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n spendDetails: state.spendDetails,\r\n //content: state.content.spendAnalysis.enablementResourceParamaeters,\r\n content: state.content.menu.EnablementParametersManager[0].RampScheduleTab\r\n }\r\n}\r\n\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return { \r\n resetError: () => dispatch(resetError()),\r\n fetchGoLiveVsKickOffWeekData: () => dispatch(fetchGoLiveVsKickOffWeekData()), \r\n updateGoLiveVsKickOffWeekData: (data) => dispatch(updateGoLiveVsKickOffWeekData(data)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(GoLiveVsKickOffWeek)\r\n\r\n\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport RampScheduleFactor from \"./RampScheduleFactor\"\r\nimport GoLiveVsKickOffWeek from \"./GoLiveVsKickOffWeek\"\r\n\r\nclass RampSchedule extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n readOnly: props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ? false : true\r\n }\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n content: state.content.menu.EnablementParametersManager[0]\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps)(EnablementParameters)\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport Button from 'UI/Button'\r\nimport {\r\n shareFileOnJumphost,\r\n shareFilesOnJumphostLoading,\r\n shareFilesOnJumphostSuccess,\r\n shareFilesOnJumphostFailure\r\n} from 'actions/userActions'\r\nimport { BreakLine } from 'utils/Utils'\r\n\r\nclass ShareFilesOnJumphost extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n selectedFile: null,\r\n fileError: '',\r\n successMsg: '',\r\n errorMsg: '',\r\n }\r\n this.fileTypeValidation = this.fileTypeValidation.bind(this)\r\n }\r\n\r\n fileTypeValidation(filePath) {\r\n let allowedExtensions = /(\\.zip)$/i\r\n if (!allowedExtensions.exec(filePath)) {\r\n return false;\r\n } else return true\r\n }\r\n\r\n handleFileAttachment(e) {\r\n if (e.target.files.length > 0) {\r\n let file = e.target.files[0]\r\n var filePath = e.target.value;\r\n if (this.fileTypeValidation(filePath)) {\r\n let fileSize = file.size / 1024 / 1024; // in MB\r\n if (fileSize < 20) { //Max size to be uploaded\r\n let reader = new FileReader()\r\n reader.readAsDataURL(file)\r\n reader.onload = (e) => {\r\n var base64result = e.target.result.split(',')[1];\r\n this.setState({ selectedFile: file, fileError: '', fileData: base64result, errorMsg: '', successMsg: '' })\r\n }\r\n }\r\n else {\r\n this.setState({ selectedFile: file, fileError: this.props.content.fileSizeErrorMsg, successMsg: '', errorMsg: '', fileData: undefined })\r\n }\r\n } else {\r\n this.setState({ selectedFile: file, fileError: this.props.content.fileTypeErrorMsg, successMsg: '', errorMsg: '', fileData: undefined })\r\n }\r\n }\r\n }\r\n\r\n validateAttachedFile() {\r\n if (this.state.fileData === undefined) {\r\n this.setState({ fileError: this.props.content.attachFile, successMsg: '', errorMsg: '', selectedFile: null })\r\n return false\r\n }\r\n else\r\n return true\r\n }\r\n\r\n handleSubmit() {\r\n if (this.validateAttachedFile()) {\r\n this.props.shareFilesOnJumphostLoading(true)\r\n const data = {\r\n fileDetails: {\r\n fileData: this.state.fileData !== undefined ? this.state.fileData : '',\r\n fileName: this.state.selectedFile !== null ? this.state.selectedFile.name : ''\r\n },\r\n createdBy: this.props.user.user.Id,\r\n language: this.props.language.toUpperCase(),\r\n userEmail: localStorage.getItem('loggedinUser') //email\r\n }\r\n var content = this.props.content;\r\n this.props.shareFileOnJumphost(data)\r\n .then((result) => {\r\n if (result.status === 200) {\r\n this.props.shareFilesOnJumphostSuccess(false)\r\n this.setState({ fileData: undefined, selectedFile: null, fileError: '', successMsg: this.props.content.fileUploadSuccessMsg, errorMsg: '' })\r\n }\r\n else {\r\n this.props.shareFilesOnJumphostFailure(false)\r\n this.setState({ errorMsg: this.props.content.errorMessage, successMsg: '', fileError: '' })\r\n }\r\n\r\n }).catch((error) => {\r\n this.props.shareFilesOnJumphostFailure(false)\r\n this.setState({ errorMsg: this.props.content.errorMessage, successMsg: '', fileError: '' })\r\n })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.props.data.UIName} \r\n {this.props.data.Description} \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.reports,\r\n validation: state.content.validation,\r\n reports: state.reports\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchSystemReportingDetails: (ExcelFileName) => dispatch(fetchSystemReportingDetails(ExcelFileName))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SystemReporting)\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport { Checkbox } from 'material-ui';\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\nimport moment from 'moment'\r\n// Settings\r\nimport { validators } from 'Constants'\r\nimport {\r\n\tfetchANIdBPIdDetails,\r\n\taddANIDDetails,\r\n\tuserDetailsSuccess,\r\n userDetailsFailure,\r\n userDetailsLoading,\r\n resetError,\r\n} from 'actions/spendActions'\r\n\r\nimport CustomGrid from 'UI/CustomGrid'\r\nimport { AlignFormatter, CenterAlignFormatter, getNonEmptyValue } from \"../../utils/Utils\";\r\nimport { Filters, Editors } from \"react-data-grid-addons\";\r\n\r\n\r\nconst {\r\n NumericFilter,\r\n AutoCompleteFilter,\r\n} = Filters;\r\n\r\nconst { DropDownEditor } = Editors;\r\nconst dropdownValues = [\"Y\", \"N\"];\r\nconst dropDownEditor =
\r\n ) : null\r\n }\r\n}\r\nconst mapStateToProps = state => {\r\n return {\r\n content: state.content.menu,\r\n interests: state.content.discovery.interests,\r\n priorities: state.priorities,\r\n form: state.discoveryForm.$form,\r\n validation: state.content.validation,\r\n user: state.default,\r\n userData: state.valueStory\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n logoutUser: () => dispatch(logoutUser()),\r\n resetValueStory: () => dispatch(valueStoryReset()),\r\n resetToken: () => dispatch(resetToken()),\r\n reportSubmit: formValues => dispatch(reportSubmit(formValues)),\r\n reportSubmitSuccess: user => dispatch(reportSubmitSuccess(user)),\r\n reportSubmitFailure: error => dispatch(reportSubmitFailure(error)),\r\n resetError: () => dispatch(resetError()),\r\n resetMessage: () => dispatch(resetMessage()),\r\n showValueStoryMenu: (menuItem) => dispatch(showValueStoryMenu(menuItem))\r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(MenuContainer)\r\n","import React from 'react'\r\nimport FaAngleRight from 'react-icons/lib/fa/angle-right'\r\nimport { BreakLine } from 'utils/Utils'\r\n\r\nconst BigButton = (props) =>\r\n\t\r\n\r\nexport default BigButton\r\n\r\nBigButton.defaultProps = {\r\n\ttype: 'button',\r\n\tonClick: () => {},\r\n\tdisabled: false\r\n}\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Link } from 'react-router-dom'\r\n\r\n// Actions\r\nimport {\r\n\tsignInUserSuccess_SSO,\r\n\tsignInSSO,\r\n\tmeFromToken,\r\n\tresetError\r\n} from 'actions/userActions'\r\n\r\n// Components\r\nimport BigButton from '../UI/BigButton'\r\n\r\n// Utils\r\nimport { BreakLine, getParameterByName,getCookie } from '../../utils/Utils'\r\n\r\n// Settings\r\nconst SSOUrl = '/saml/request.aspx'\r\n\r\nclass HomeContainer extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = {\r\n\t\t\tvisible: false\r\n\t\t}\r\n\r\n\t\tthis.redirect = this.redirect.bind(this)\r\n\t\tthis.SSO = this.SSO.bind(this)\r\n\t}\r\n\r\n\tSSO() {\r\n\t\tlet ssoArray = [];\r\n\t\tif (getCookie('MyTestCookie') !== '' && getCookie('MyTestCookie') !== 'undefined') {\r\n\t\t\tconsole.log('MyTestCookie', getCookie('MyTestCookie'));\r\n\t\t\tssoArray = getCookie('MyTestCookie').split('&');\r\n\t\t}\r\n\r\n\t\tif (ssoArray.length == 0) {\r\n\t\t\tvar currentUrl = window.location.href;\t\t\r\n\t\t\tvar originalUrl = currentUrl.split('?')[0];\r\n\t\t window.location.href = originalUrl;\r\n\t\t}\r\n\t\telse {\r\n\r\n\t\t\t// const name = getParameterByName('Name'),\r\n\t\t\t// \temail = getParameterByName('Email'),\r\n\t\t\t// \tfname = getParameterByName('Firstname'),\r\n\t\t\t// \tlname = getParameterByName('Lastname')\r\n\r\n\t\t\tconst name = ssoArray[0],\r\n\t\t\t\temail = ssoArray[1],\r\n\t\t\t\tfname = ssoArray[2],\r\n\t\t\t\tlname = ssoArray[3]\r\n\r\n\t\t\tconst values = {\r\n\t\t\t\tName: name,\r\n\t\t\t\tEmail: email,\r\n\t\t\t\tFirstname: fname,\r\n\t\t\t\tLastname: lname\r\n\t\t\t}\r\n\r\n\t\t\tthis.props.signInSSO(values)\r\n\t\t\t\t.then((result) => {\r\n\t\t\t\t\tthis.props.signInUserSuccess_SSO(result)\r\n\r\n\t\t\t\t\t// Store JWT Token\r\n\t\t\t\t\tlocalStorage.setItem('jwtToken', result.data.Result.Token)\r\n\t\t\t\t\tlocalStorage.setItem('role', result.data.Result.Role)\r\n\t\t\t\t\tlocalStorage.setItem('loggedinUser', result.data.Result.Email)\r\n\t\t\t\t\tlocalStorage.setItem('id', result.data.Result.Id)\r\n\t\t\t\t\tlocalStorage.setItem('enablementInsightFlag', false)\r\n\t\t\t\t\t// Redirect to Start page\r\n\t\t\t\t\tthis.redirect()\r\n\r\n\t\t\t\t}).catch((error) => {\r\n\t\t\t\t\t//this.props.signInUserFailure(error.response.data.Message)\r\n\t\t\t\t})\r\n\t\t}\r\n\t}\r\n\r\n\tredirect() {\r\n\t\tthis.props.history.push(`/start`)\r\n\t}\r\n\r\n\tcomponentWillMount() {\r\n\t\t// Check for redirect from SSO login\r\n\t\tgetParameterByName('Name') ? this.SSO() : this.setState({ visible: true })\r\n\r\n\t\tthis.props.resetError()\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n content: state.content.userManagerContainer\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps)(UserAndRoleManagerContainer)\r\n","import React, { Component } from 'react'\r\n\r\nimport { GICSColumns } from 'Constants'\r\nimport CustomGrid from 'UI/CustomGrid'\r\nimport { connect } from 'react-redux'\r\nimport { Filters, Editors } from \"react-data-grid-addons\";\r\n\r\nimport NotesEditor from 'UI/NotesEditor'\r\n\r\nimport {\r\n getAllIndustriesGicsLoading,\r\n getAllIndustriesGicsSuccess,\r\n getAllIndustriesGicsFailure,\r\n getAllGICS,\r\n getUpdateGicsLoading,\r\n getUpdateGicsSuccess,\r\n getUpdateGicsFailure,\r\n updateGICS\r\n} from 'actions/spendActions'\r\nimport { AlignFormatter, RoundFormatter, CenterAlignFormatter, getNonEmptyValue, formatter } from \"../../utils/Utils\";\r\n\r\nconst {\r\n SingleSelectFilter,\r\n NumericFilter,\r\n AutoCompleteFilter,\r\n} = Filters;\r\n\r\nconst { DropDownEditor } = Editors;\r\nconst dropdownValues = [\"Yes\", \"No\"];\r\nconst buyProcessValues = [\"Requisition: Catalog, Spot-Buy or Release Contract\",\r\n \"Requisition: Non-Catalog or Tactical Sourcing\",\r\n \"Requisition: External Talent\",\r\n \"Consultancy/SOW Services: Active Mgmt, otherwise Invoice Against Contract\",\r\n \"Other Services: Active Mgmt, otherwise Invoice Against Contract\",\r\n \"Invoice Against Contract\",\r\n \"Direct/MRO: Plan Driven PO\",\r\n \"Direct/MRO: Asset Plan via Catalog\",\r\n \"Non-PO Invoice\",\r\n \"Travel and Expense\"]\r\nconst requisitionTypeValues = [\"Catalog\", \"Adhoc (non-catalog)\", \"N/A\"]\r\nconst goodsOrServicesValues = [\"Goods\", \"Services\", \"Both\", \"Neither\", \"Unclassified\"]\r\n\r\nconst dropDownEditor = {this.props.content.title}
\r\n - \r\n
{this.props.content.userManagerTitle} \r\n {this.props.content.roleManagerTitle} \r\n {this.props.content.capIqLicensedUserTitle} \r\n {this.props.content.spendRoleTitle} \r\n {this.props.content.customerAccessTitle} \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content,\r\n ui: state.content.ui,\r\n gicsDetail: state.gicsDetails\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getAllIndustriesGicsLoading: message => dispatch(getAllIndustriesGicsLoading(message)),\r\n getAllIndustriesGicsFailure: error => dispatch(getAllIndustriesGicsFailure(error)),\r\n getAllIndustriesGicsSuccess: bool => dispatch(getAllIndustriesGicsSuccess(bool)),\r\n getAllGICS: () => dispatch(getAllGICS()),\r\n getUpdateGicsLoading: message => dispatch(getUpdateGicsLoading(message)),\r\n getUpdateGicsFailure: error => dispatch(getUpdateGicsFailure(error)),\r\n getUpdateGicsSuccess: bool => dispatch(getUpdateGicsSuccess(bool)),\r\n updateGICS: (records) => dispatch(updateGICS(records)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(GICSAdminController); ","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport moment from 'moment'\r\n\r\nimport {\r\n getReleaseFeatures,\r\n getLatestPublishedReleaseFeatures,\r\n getReleaseVersions,\r\n notificationManagerLoading,\r\n notificationManagerSuccess,\r\n notificationManagerFailure,\r\n resetError\r\n} from 'actions/userActions'\r\n\r\nclass ReleaseContainer extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n releaseData: [],\r\n isPublish: false,\r\n editId: 0,\r\n textData: '',\r\n responseMsg: '',\r\n currentPublishVersion: '',\r\n dbreleaseVersion: [],\r\n optionData: [],\r\n selectedOption: '',\r\n tempFloating: '',\r\n isReleaseVersionSelected: ''\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n }\r\n \r\n componentWillMount() {\r\n this.loadData();\r\n }\r\n\r\n loadData() {\r\n this.props.getReleaseFeatures()\r\n .then((response) => {\r\n var notificationData = [];\r\n this.props.notificationManagerSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n if(obj.IsPublishedVersion)\r\n notificationData.push(obj);\r\n }\r\n this.setState({ releaseData: notificationData });\r\n this.getLatestPublish();\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.notificationManagerFailure()\r\n }\r\n else {\r\n this.props.notificationManagerFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n\r\n getLatestPublish(versionName) {\r\n this.props.getLatestPublishedReleaseFeatures()\r\n .then((response) => {\r\n this.props.notificationManagerSuccess(response.data.Message)\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n var obj = response.data.Result[i];\r\n this.setState({ currentPublishVersion: obj.ReleaseVersionName })\r\n\r\n if (obj.ReleaseVersionName == versionName) {\r\n this.setState({ isPublish: true })\r\n } else {\r\n this.setState({ isPublish: false })\r\n }\r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.notificationManagerFailure(error)\r\n }\r\n })\r\n }\r\n\r\n\r\n handleReportDetailTable(evt) {\r\n var item = {\r\n name: evt.target.name,\r\n id: evt.target.id,\r\n value: evt.target.value\r\n };\r\n\r\n var old_reportDetails = this.state.old_reportDetails.slice();\r\n if (old_reportDetails.length === 0) {\r\n old_reportDetails = this.state.releaseData.slice();\r\n this.setState({ old_reportDetails: old_reportDetails });\r\n }\r\n let testOfObjects = old_reportDetails;\r\n var newreportDetails = testOfObjects.map(function (testReportDetails) {\r\n for (var key in testReportDetails) {\r\n if (testReportDetails.id === item.id) {\r\n testReportDetails[key] = item.name;\r\n break;\r\n }\r\n }\r\n return testReportDetails;\r\n });\r\n\r\n this.setState({ releaseData: newreportDetails });\r\n\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nclass ReleaseFeatureTable extends React.Component {\r\n render() {\r\n var editId = this.props.editId;\r\n \r\n var data = this.props.releaseData.map(function (data) {\r\n return ({this.props.content.title}
\r\n \r\n
\r\n \r\n {this.state.currentPublishVersion != '' ? this.props.validation.currentPublish : ''} {this.state.currentPublishVersion != '' ? this.state.currentPublishVersion : ''}\r\n
\r\n {this.state.responseMsg}
\r\n {this.props.user.error}
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass ReleaseFeatureRow extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n | Version | \r\nLast Updated On | \r\nShort Description | \r\nFeature Description | \r\n
|---|
\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\n\r\nclass SpendParameters extends React.Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = {\r\n\t\t\tparameter: this.props.spendParameter,\r\n\t\t\toriginalParameter: JSON.stringify(this.props.spendParameter)\r\n\r\n\t\t};\r\n\t\t//this.onChange = this.onChange.bind(this)\r\n\t\tthis.onChangeCancel = this.onChangeCancel.bind(this)\r\n\t\tthis.onCancelEvent = this.onCancelEvent.bind(this)\r\n\t}\r\n\r\n\r\n\tonChangeCancel(e) {\r\n\r\n\t\tthis.setState({\r\n\t\t\tparameter: JSON.parse(this.state.originalParameter)\r\n\t\t})\r\n\r\n\t}\r\n\r\n\r\n\r\n\tonEditEvent(test) {\r\n\r\n\t\tvar editingRow = this.state.parameter;\r\n\t\teditingRow.isEditing = !editingRow.isEditing;\r\n\t\t//this.props.user.isEditing = true;\r\n\t\tthis.setState({ parameter: editingRow });\r\n\t\t//this.props.onEditEvent(this.props.user, this.props.userIsEditing);\r\n\t}\r\n\r\n\tonUpdateEvent(val) {\r\n\t\tthis.onEditEvent();\r\n\t\tvar editingRow = this.state.parameter;\r\n\r\n\t\tthis.props.onUpdateEvent(editingRow);\r\n\t}\r\n\r\n\tonCancelEvent() {\r\n\t\tthis.props.user.isEditing = false;\r\n\t}\r\n\tonChangeEvent(val) {\r\n\t\tvar editingRow = this.state.parameter;\r\n\t\teditingRow[val.target.id] = val.target.value\r\n\t\tthis.setState({ parameter: editingRow });\r\n\t}\r\n\r\n\trender() {\r\n\t\tvar bindValues = this.state.parameter;\r\n\t\treturn (\r\n\t\t\t!bindValues.isEditing ?\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\r\n\r\n\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t{BreakLine(this.props.content.title)}
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t this.formDispatch = dispatch}\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t{this.props.userManager.error}
\r\n\t\t\t\t\t\t\t\t{this.props.userManager.message}
\r\n\t\t\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t\t\t\t\t{this.state.spendParameters !== undefined ?\r\n\t\t\t\t\t\t\t\t\t\t\t//
\r\n\t\t\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t//
\r\n\t\t\t\t\t\t\t\t\t\t\t: null}\r\n\r\n\t\t\t\t\t\t\t\t\t| {this.props.content.thParameterName} | \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{this.props.content.thParameterDesc} | \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{this.props.content.thParameterValue} | \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{this.props.content.thUpatedBy} | \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{this.props.content.thUpdatedOn} | \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t |
|---|
\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t)\r\n\t\t})\r\n\r\n\t\treturn roles;\r\n\t}\r\n\r\n render() {\r\n\t\treturn (\r\n \r\n\t\t\t\t\t\t\t this.handleRoleCheckChanged(e)} \r\n\t\t\t\t\t\t\tname={role.RoleId} value={role.RoleName} /> \r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\tthis.handleRoleCheckChanged(e)} defaultValue={role.RoleId} >{role.RoleName}
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\r\n
\r\n );\r\n\t}\r\n}\r\n\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tui: state.content.ui,\r\n\t\tuser: state.default,\r\n\t\tcontent: state.content.videoManager,\r\n\t\tvalidation: state.content.validation\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tresetError: () => dispatch(resetError()),\r\n\t\tfetchScreens: () => dispatch(fetchScreens()),\r\n\t\tgetAllRoles: () => dispatch(getAllRoles()),\r\n\t\tsaveScreenVideoFile: (file) => dispatch(saveScreenVideoFile(file)),\r\n\t\tsaveScreenVideo: (formValues, file) => dispatch(saveScreenVideo(formValues, file)),\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ScreenVideo)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n\tfetchScreens,\r\n\tresetError,\r\n\tsaveScreenVideo,\r\n\tsaveScreenVideoFile,\r\n\tgetAllRoles,\r\n\tsaveScreenVideosOrder\r\n} from 'actions/videoRoleAction';\r\n\r\nimport {OrderList} from 'primereact/orderlist';\r\n\r\nimport Button from 'UI/Button'\r\nimport Select from 'react-select'\r\nimport classNames from \"classnames\"\r\nimport { path, changeModalStyle, changeModalContentStyle } from 'Constants'\r\nimport cloneDeep from 'lodash/cloneDeep';\r\nimport { Checkbox } from 'material-ui';\r\n\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\n\r\nconst videoChangeModalStyle = Object.assign({}, changeModalStyle);\r\nvideoChangeModalStyle.width = \"375px\";\r\n\r\nclass ScreenVideoReorder extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t\tthis.state = {\r\n\t\t\tvideoData: props.videoData,\r\n\t\t\tselectedVideos: [],\r\n\t\t\tmodules: [],\r\n\t\t\tmoduleToScreen: [],\r\n\t\t\tscreens: [],\r\n\t\t\troles: [],\r\n\t\t\tvideoFile: {},\r\n\t\t\tmodule: '',\r\n\t\t\tscreenName: ''\r\n\t\t}\r\n\r\n\t\tthis.loadData = this.loadData.bind(this)\r\n\t\tthis.fetchVideoScreens = this.fetchVideoScreens.bind(this)\r\n\t\tthis.handleModuleChange = this.handleModuleChange.bind(this)\r\n\t\tthis.handleScreenChange = this.handleScreenChange.bind(this)\r\n\t\tthis.onSave = this.onSave.bind(this)\r\n\t}\r\n\r\n\tshowModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n\t\tthis.refs[action].hide()\r\n\t\tthis.props.close();\r\n\t}\r\n\t\r\n\thandleModuleChange(value) {\r\n\t\tconst screens = this.state.moduleToScreen[value]\r\n\t\tthis.setState({module: value, screens: screens})\r\n\t}\r\n\r\n\thandleScreenChange(value) {\r\n\t\tconst filtered = this.state.videoData.filter(item => {\r\n\t\t\treturn item.Module === this.state.module && item.ScreenName === value;\r\n\t\t})\r\n\r\n\t\tfiltered.sort((a, b) => {\r\n\t\t\treturn a.Order > b.Order ? 1 : a.Order < b.Order ? -1 : 0 \r\n\t\t})\r\n\t\tthis.setState({screenName: value, selectedVideos: filtered})\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tthis.props.resetError()\r\n\t\tthis.loadData();\r\n\t\tthis.keyCount = 1;\r\n\t}\r\n\r\n\tloadData() {\r\n\t\tthis.fetchVideoScreens();\r\n\t}\r\n\r\n\tfetchVideoScreens() {\r\n\t\tthis.setState({ isLoading: true, isError: 'No', responseMsg: '' })\r\n\t\tthis.props.fetchScreens()\r\n\t\t\t.then((response) => {\r\n\t\t\t\t//var t = (showLoading === true ? this.props.roleManagerSuccess(response.data.Message) : null)\r\n\t\t\t\tif(response.data.Result.length > 0) {\r\n\t\t\t\t\tconst moduleMap = [];\r\n\t\t\t\t\tconst data = response.data.Result;\r\n\t\t\t\t\tdata.forEach(datum => {\r\n\t\t\t\t\t\tlet screens = moduleMap[datum.Module]\r\n\t\t\t\t\t\tif(!screens) {\r\n\t\t\t\t\t\t\tscreens = []\r\n\t\t\t\t\t\t\tmoduleMap[datum.Module] = screens\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tscreens.push({label: datum.ScreenName, value: datum.ScreenName})\r\n\t\t\t\t\t})\r\n\r\n\t\t\t\t\tthis.setState({isLoading: false, modules: Object.keys(moduleMap).map(key => { return {label: key, value: key}}), moduleToScreen: moduleMap})\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t//\tthis.props.roleManagerFailure()\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\t//this.props.roleManagerFailure(error.response.data.Message)\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t}\r\n\r\n\tonSave() {\r\n\t\tthis.setState({ isLoading: true, isError: 'No', responseMsg: '' })\r\n\t\tthis.props.saveScreenVideosOrder(this.state.selectedVideos)\r\n\t\t\t.then((response) => {\r\n\t\t\t\t//var t = (showLoading === true ? this.props.roleManagerSuccess(response.data.Message) : null)\r\n\t\t\t\tif(response.status === 200) {\r\n\t\t\t\t\tthis.props.getOrderedResult(response.data.Result)\r\n\t\t\t\t\tthis.showModal(\"terms\")\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.setState({ isLoading: false, isError: 'No', responseMsg: 'Record has been updated successfully' })\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n this.setState({ responseMsg: error.response.data.Message, isError: 'Yes', isLoading: false })\r\n }\r\n\t\t\t})\r\n\t}\r\n\r\n\tvideoTemplate(video) {\r\n return (\r\n \r\n\t\t\t\t\t
\r\n\t\t\t\t{this.props.content.newVideo}
\r\n\t\t\t\t\r\n
\r\n\r\n \r\n\t\t\t\t\r\n
\r\n \r\n\t\t\t\t\t\t\t\tVideo has been saved successfully.\r\n
\r\n \r\n
\r\n \r\n this.hideModal(\"terms\")}\r\n color /> \r\n
\r\n \r\n\t\t\t\t\t {\r\n\t\t\t\t\t\tconst errors = {};\r\n\t\t\t\t\t\tif (!values.ScreenVideoRoles && values.ScreenVideoRoles.length === 0) {\r\n\t\t\t\t\t\t errors.videoRole = 'Role is mandatory';\r\n\t\t\t\t\t\t} \r\n\t\t\t\t\t\treturn errors;\r\n\t\t\t\t\t }}\r\n\t\t\t\t\tonSubmit={(values, actions) => {\r\n\t\t\t\t\t\tthis.onSave(values)\r\n\t\t\t\t\t\tactions.setSubmitting(false);\r\n\t\t\t\t\t}}\r\n\t\t\t\t\trender={props => (\r\n\t\t\t\t\t\t
\r\n \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\t)} />\r\n\t\t\t\t\r\n
\r\n );\r\n }\r\n\r\n render() {\r\n\t\treturn (\r\n {video.Name}
\r\n \r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n \t\t);\r\n\t\t}\r\n}\r\n\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tui: state.content.ui,\r\n\t\tuser: state.default,\r\n\t\tcontent: state.content.videoManager,\r\n\t\tvalidation: state.content.validation\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tresetError: () => dispatch(resetError()),\r\n\t\tfetchScreens: () => dispatch(fetchScreens()),\r\n\t\tgetAllRoles: () => dispatch(getAllRoles()),\r\n\t\tsaveScreenVideoFile: (file) => dispatch(saveScreenVideoFile(file)),\r\n\t\tsaveScreenVideo: (formValues, file) => dispatch(saveScreenVideo(formValues, file)),\r\n\t\tsaveScreenVideosOrder: (values) => dispatch(saveScreenVideosOrder(values)),\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ScreenVideoReorder)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n\tfetchScreenVideos,\r\n\tdeleteScreenVideo,\r\n\tresetError,\r\n} from 'actions/videoRoleAction';\r\n\r\nimport ScreenVideo from './ScreenVideo';\r\nimport ScreenVideoReorder from './ScreenVideoReorder';\r\n\r\nimport Button from 'UI/Button'\r\nimport {DataTable} from 'primereact/datatable';\r\nimport {Column} from 'primereact/column';\r\nimport classNames from 'classnames';\r\nimport Modal from 'reboron/OutlineModal'\r\nimport { path } from 'Constants'\r\nimport moment from 'moment'\r\n\r\nimport { modalStyle, modalContentStyle, changeModalStyle, changeModalContentStyle } from 'Constants'\r\n\r\nconst videoEditorModalContentStyle = Object.assign({}, modalContentStyle);\r\nvideoEditorModalContentStyle.padding = \"20px\";\r\nconst videoEditorModalStyle = Object.assign({}, modalStyle);\r\nvideoEditorModalStyle.width = \"90%\";\r\nvideoEditorModalStyle.height = \"700px\";\r\nvideoEditorModalStyle.maxWidth = \"1200px\";\r\n\r\n\r\nconst videoReorderModalStyle = Object.assign({}, modalStyle);\r\nvideoReorderModalStyle.width = \"800px\";\r\nvideoReorderModalStyle.height = \"600px\";\r\nvideoReorderModalStyle.maxWidth = \"800px\";\r\n\r\nclass VideoManagerContainer extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t\tthis.state = {\r\n\t\t\tdata: [],\r\n\t\t\tselectedVideos: [],\r\n\t\t\tvideoData: {}\r\n\t\t}\r\n\r\n\t\tthis.loadData = this.loadData.bind(this)\r\n\t\tthis.fetchRolesAndFeatures = this.fetchRolesAndFeatures.bind(this)\r\n\t\tthis.formParentRecords = this.formParentRecords.bind(this)\r\n\t\tthis.newVideo = this.newVideo.bind(this)\r\n\t\tthis.editVideo = this.editVideo.bind(this)\r\n\t\tthis.deleteVideo = this.deleteVideo.bind(this)\r\n\t\tthis.getResult = this.getResult.bind(this)\r\n\t\tthis.showModal = this.showModal.bind(this)\r\n\t\tthis.hideModal = this.hideModal.bind(this)\r\n\t\tthis.getOrderedResult = this.getOrderedResult.bind(this)\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tthis.props.resetError()\r\n\t\tthis.loadData();\r\n\t\tthis.keyCount = 1;\r\n\t}\r\n\r\n\tloadData() {\r\n\t\tthis.fetchRolesAndFeatures(true);\r\n\t}\r\n\r\n\tfetchRolesAndFeatures(showLoading) {\r\n\t\tthis.props.fetchScreenVideos()\r\n\t\t\t.then((response) => {\r\n\t\t\t\t//var t = (showLoading === true ? this.props.roleManagerSuccess(response.data.Message) : null)\r\n\t\t\t\tthis.setState({ data: this.formParentRecords(response.data.Result) })\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t//\tthis.props.roleManagerFailure()\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\t//this.props.roleManagerFailure(error.response.data.Message)\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t}\r\n\r\n\tformParentRecords(data) {\r\n\t\tdata.forEach(datum => {\r\n\t\t\tdatum.CurrentLoginUser = this.props.user.user.Id\r\n\t\t\tdatum.role = datum.ScreenVideoRoles.reduce((total, curr) => {\r\n\t\t\t\treturn total ? total + ',' + curr.RoleName : curr.RoleName\r\n\t\t\t}, '');\r\n\r\n\t\t\tdatum.UpdatedDate = moment(datum.UpdatedDate).format('YYYY-MM-DD');\r\n\t\t})\r\n\r\n\t\treturn data;\r\n\t}\r\n\r\n\tgetResult(data, isNew) {\r\n\t\tconst records = this.state.data;\r\n\t\tif(!isNew) {\r\n\t\t\tconst idx = records.findIndex(item => {\r\n\t\t\t\treturn item.VideoId === data.VideoId\r\n\t\t\t})\r\n\r\n\t\t\tif(idx !== -1) {\r\n\t\t\t\trecords.splice(idx, 1);\t\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\trecords.splice(0, 0, this.formParentRecords([data])[0])\r\n\r\n\t\tthis.setState({data: records, selectedVideos: []});\r\n\t}\r\n\r\n\tgetOrderedResult(data) {\r\n\t\tconst records = this.state.data;\r\n\t\tdata.forEach(datum => {\r\n\t\t\tconst idx = records.findIndex(item => {\r\n\t\t\t\treturn item.VideoId === datum.VideoId\r\n\t\t\t})\r\n\t\r\n\t\t\tif(idx !== -1) {\r\n\t\t\t\trecords[idx].Order = datum.Order;\t\r\n\t\t\t}\r\n\t\t})\r\n\r\n\t\tthis.setState({data: records});\r\n\t}\r\n\r\n\tgetVideoObj() {\r\n\t\treturn {\r\n\t\t\tVideoId: -1,\r\n\t\t\tModule: '',\r\n\t\t\tScreenName: '',\r\n\t\t\tScreenId: '',\r\n\t\t\tName: '',\r\n\t\t\tDescription: '',\r\n\t\t\tSourceType: true,\r\n\t\t\tVideoSource: '',\r\n\t\t\tOrder: 0,\r\n\t\t\tCurrentLoginUser: this.props.user.user.Id,\r\n\t\t\tScreenVideoRoles: []\r\n\t\t}\r\n\t}\r\n\r\n\tnewVideo() {\r\n\t\tthis.setState({videoData: this.getVideoObj()}, this.refs.screenVideoEditor.show())\r\n\t}\r\n\r\n\treorderVideo() {\r\n\t\tthis.refs.screenVideoReorder.show()\r\n\t}\r\n\r\n\teditVideo() {\r\n\t\tconst videoData = this.state.selectedVideos[0]\r\n\t\tthis.setState({videoData: videoData}, this.refs.screenVideoEditor.show())\r\n\t}\r\n\r\n\tdeleteVideo() {\r\n\t\tthis.setState({ isLoading: true, isError: 'No', responseMsg: '' })\r\n\t\tthis.props.deleteScreenVideo(this.state.selectedVideos)\r\n\t\t\t.then((response) => {\r\n\t\t\t\t//var t = (showLoading === true ? this.props.roleManagerSuccess(response.data.Message) : null)\r\n\t\t\t\tif(response.status === 200) {\r\n\t\t\t\t\tconst records = this.state.data;\r\n\t\t\t\t\r\n\t\t\t\t\tthis.state.selectedVideos.forEach(data => {\r\n\t\t\t\t\t\tconst idx = records.findIndex(item => {\r\n\t\t\t\t\t\t\treturn item.VideoId === data.VideoId\r\n\t\t\t\t\t\t})\r\n\t\r\n\t\t\t\t\t\tif(idx !== -1) {\r\n\t\t\t\t\t\t\trecords.splice(idx, 1);\t\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t})\r\n\t\t\t\t\tthis.showModal(\"deleteVideo\")\r\n\t\t\t\t\tthis.setState({data: records, selectedVideos: [], responseMsg: '', isError: 'No', isLoading: false});\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n }\r\n\t\t\t})\r\n\t}\r\n\r\n\tshowModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n\t\tthis.refs[action].hide()\r\n }\r\n\r\n render() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t{this.props.content.reorderVideo}
\r\n\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\tVideo order has been saved successfully.\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t this.hideModal(\"terms\")}\r\n\t\t\t\t\t\t\t\t\tcolor /> \r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n \t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{(this.state.isLoading) ?\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t: null\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t{(this.state.isError === 'Yes') ?\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t{this.state.responseMsg}
\r\n\t\t\t\t\t\t\t\t\t\t\t\t: {this.state.responseMsg}
\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{this.props.content.name}\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t option.label == this.state.module\r\n\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\tonChange={(value) => this.handleModuleChange(value.value)}\r\n\t\t\t\t\t\t\t\t\t\t\toptions={this.state.modules}\r\n\t\t\t\t\t\t\t\t\t\t\tisSearchable={false}\r\n\t\t\t\t\t\t\t\t\t\t\tnoOptionsMessage={() => null}\r\n\t\t\t\t\t\t\t\t\t\t\trequired\r\n\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{this.props.content.screen}\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t option.label == this.state.screenName\r\n\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\tonChange={(value) => this.handleScreenChange(value.value)}\r\n\t\t\t\t\t\t\t\t\t\t\toptions={this.state.screens}\r\n\t\t\t\t\t\t\t\t\t\t\tisSearchable={false}\r\n\t\t\t\t\t\t\t\t\t\t\tnoOptionsMessage={() => null}\r\n\t\t\t\t\t\t\t\t\t\t\trequired\r\n\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t this.setState({selectedVideos: e.value})}> \r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n }\r\n}\r\n\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tui: state.content.ui,\r\n\t\tuser: state.default,\r\n\t\tcontent: state.content.videoManagerContainer,\r\n\t\tvalidation: state.content.validation\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tresetError: () => dispatch(resetError()),\r\n\t\tfetchScreenVideos: () => dispatch(fetchScreenVideos()),\r\n\t\tdeleteScreenVideo: (values) => dispatch(deleteScreenVideo(values)),\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(VideoManagerContainer)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport Popup from \"reactjs-popup\";\r\nimport Button from 'UI/Button'\r\n\r\n// Actions\r\nimport {\r\n\tuserMask,\r\n\tlogoutUser,\r\n\tresetToken\r\n} from 'actions/userActions'\r\n\r\nimport { clearLocalStorage } from '../../utils/Utils'\r\n// UI\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nimport { changeModalStyle, changeModalContentStyle, path } from 'Constants'\r\n\r\nclass WithdrawConsent extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = { render: false, isError: false, responseMsg: '' }\r\n\t\tthis.withdrawConsent = this.withdrawConsent.bind(this)\r\n\t}\r\n\r\n\tshowModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n\t\tthis.refs[action].hide()\r\n\t\tthis.handleLogout()\r\n\t}\r\n\t\r\n\thandleLogout() {\r\n\t\tthis.props\r\n\t\t .logoutUser()\r\n\t\t .then(() => {\r\n\t\t\tthis.props.resetToken()\r\n\t\t\tclearLocalStorage()\r\n\t\r\n\t\t\t// Redirect to home page\r\n\t\t\twindow.location.href = path\r\n\t\r\n\t\t\t// this.props.resetValueStory()\r\n\t\t })\r\n\t\t .catch(() => {\r\n\t\t\tclearLocalStorage();\r\n\t\t\t// Redirect to home page\r\n\t\t\twindow.location.href = path;\r\n\t\t })\r\n\t }\r\n\t\r\n\twithdrawConsent() {\r\n\t\tthis.setState({isError: false, responseMsg: ''})\r\n\t\tthis.props.userMask(this.props.user.user.Email)\r\n\t\t.then(response => {\r\n\t\t\tif(response.status === 200) {\r\n\t\t\t\tthis.showModal('terms')\r\n\t\t\t} else {\r\n\t\t\t\tthis.setState({isError: true, responseMsg: 'Failed to remove user'})\r\n\t\t\t}\r\n\t\t})\r\n\t\t.catch((error) => {\r\n\t\t\tthis.setState({isError: true, responseMsg: 'Failed to remove user'})\r\n\t\t})\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{(this.state.isLoading) ?\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t: null\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t{(this.state.isError === 'Yes') ?\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t{this.state.responseMsg}
\r\n\t\t\t\t\t\t\t\t\t: {this.state.responseMsg}
\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t this.newVideo()}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t this.reorderVideo()}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t{this.state.selectedVideos.length === 1 ? \r\n\t\t\t\t\t\t\t this.editVideo()}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t
: ''}\r\n\t\t\t\t\t\t{this.state.selectedVideos.length === 0 ? '' : \r\n\t\t\t\t\t\t\t this.deleteVideo()}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t
}\r\n\t\t\t\t\t\r\n\t\t\t\t\t this.dt = el} value={this.state.data}\r\n\t\t\t\t\t\tresponsive className=\"p-datatable-videos\" dataKey=\"VideoId\" rowHover\r\n\t\t\t\t\t\tselection={this.state.selectedVideos} onSelectionChange={e => this.setState({selectedVideos: e.value})}\r\n\t\t\t\t\t\tpaginator rows={50} emptyMessage={this.props.content.noData}\r\n\t\t\t\t\t\tpaginatorTemplate=\"FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown\" rowsPerPageOptions={[10,25,50]}>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t \r\n\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\t\tif (e === 'backdrop') {\r\n\t\t\t\t\t\t\t\t//this.props.outsidePopupClick()\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t {this.refs.screenVideoEditor.hide()}}/>\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n {\r\n\t\t\t\t\t\t\tif (e === 'backdrop') {\r\n\t\t\t\t\t\t\t\t//this.props.outsidePopupClick()\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t {this.refs.screenVideoReorder.hide()}}/>\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n
\r\n \r\n\t\t\t\t\t\r\n
\r\n \r\n\t\t\t\t\t\t\t\t{this.props.content.deletionSuccess}\r\n
\r\n \r\n
\r\n \r\n this.hideModal(\"deleteVideo\")}\r\n color /> \r\n
\r\n \r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tuser: state.default,\r\n\t\tvalidation: state.content.validation,\r\n\t\tcontent : state.content.menu.WithdrawConsent[0].withdrawConsentDetails\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tuserMask: (email) => dispatch(userMask(email)),\r\n\t\tlogoutUser: () => dispatch(logoutUser()),\r\n\t\tresetToken: () => dispatch(resetToken()),\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(WithdrawConsent)\r\n\r\n\r\n","import React, { Component } from 'react'\r\n\r\nimport { CountryColumns } from 'Constants'\r\nimport CustomGrid from 'UI/CustomGrid'\r\nimport { connect } from 'react-redux'\r\nimport { Filters, Editors } from \"react-data-grid-addons\";\r\n\r\nimport NotesEditor from 'UI/NotesEditor'\r\n\r\nimport {\r\n getCountryDetailsLoading,\r\n getCountryDetailsSuccess,\r\n getCountryDetailsFailure,\r\n getCountryDetails,\r\n updateCountryDetailsLoading,\r\n updateCountryDetailsSuccess,\r\n updateCountryDetailsFailure,\r\n updateCountryDetails\r\n} from 'actions/spendActions'\r\nimport { AlignFormatter, RoundFormatter, CenterAlignFormatter, getNonEmptyValue, formatter } from \"../../utils/Utils\";\r\n\r\nconst {\r\n SingleSelectFilter,\r\n NumericFilter,\r\n AutoCompleteFilter,\r\n} = Filters;\r\n\r\nconst { DropDownEditor } = Editors;\r\n\r\nconst dropdownValues = [\"Yes\", \"No\"];\r\nconst dropDownEditor = \r\n\t\t\t\t\t{this.props.content.description}\r\n\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t this.withdrawConsent()}\r\n\t\t\t\t\t\tcolor />\r\n\t\t\t\t\t \r\n\t\t\t\t\t{(this.state.isError === 'Yes') ?\r\n
\r\n\t\t\t\t{this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n\t\t\t\t\r\n \r\n
\r\n\t\t\t\r\n
\r\n\r\n \r\n \r\n {this.props.content.acknowledgement}\r\n
\r\n \r\n
\r\n \r\n this.hideModal(\"terms\")}\r\n color /> \r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content,\r\n ui: state.content.ui,\r\n gicsDetail: state.gicsDetails\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getCountryDetailsLoading: message => dispatch(getCountryDetailsLoading(message)),\r\n getCountryDetailsFailure: error => dispatch(getCountryDetailsFailure(error)),\r\n getCountryDetailsSuccess: bool => dispatch(getCountryDetailsSuccess(bool)),\r\n getCountryDetails: () => dispatch(getCountryDetails()),\r\n updateCountryDetailsLoading: message => dispatch(updateCountryDetailsLoading(message)),\r\n updateCountryDetailsFailure: error => dispatch(updateCountryDetailsFailure(error)),\r\n updateCountryDetailsSuccess: bool => dispatch(updateCountryDetailsSuccess(bool)),\r\n updateCountryDetails: (records) => dispatch(updateCountryDetails(records)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CountryLookup); ","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport classNames from \"classnames\";\r\nimport { path } from 'Constants'\r\nimport moment from 'moment'\r\nimport {ControlTextE} from 'UI/CustomComponents/Controls';\r\n// Actions\r\nimport {\r\n getFlightPlanningDocParameters,\r\n updateFlightPlanningDocParameters,\r\n resetError\r\n} from 'actions/spendActions'\r\n\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\n\r\nclass FlightPlanningDocParameters extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isLoading: false,\r\n flightPlanningDocParameters: [],\r\n editedDocParameters: [],\r\n respnseMessage: '',\r\n isError: false\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n this.trackDocParameterChanges = this.trackDocParameterChanges.bind(this)\r\n this.onDocParameterSave = this.onDocParameterSave.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n }\r\n\r\n loadData() {\r\n this.getAllParameters();\r\n }\r\n\r\n trackDocParameterChanges(record) {\r\n if (this.state.editedDocParameters.length === 0 || this.state.editedDocParameters.find(a => a.DOC_ID === record.DOC_ID) === undefined) {\r\n var updatedRecords = this.state.editedDocParameters\r\n updatedRecords.push(record)\r\n this.setState({ respnseMessage: '', editedDocParameters: updatedRecords, isError: false })\r\n }\r\n }\r\n\r\n getAllParameters() {\r\n this.setState({ isLoading: true, respnseMessage: '', isError: false });\r\n this.props.getFlightPlanningDocParameters().then((response) => {\r\n if (response.status === 200) {\r\n this.setState({ flightPlanningDocParameters: response.data.Result, isLoading: false, respnseMessage: '', isError: false });\r\n }\r\n else {\r\n this.setState({ isLoading: false, respnseMessage: this.props.content.errorMessage, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ isLoading: false, respnseMessage: this.props.content.errorMessage, isError: true });\r\n })\r\n }\r\n\r\n onDocParameterSave() {\r\n if (this.state.editedDocParameters.find(a => a.MIN_DOC === '') === undefined && this.state.editedDocParameters.find(a => a.MAX_DOC === '') === undefined && this.state.editedDocParameters.find(a => a.DOC_SEGMENTATION === '') === undefined) {\r\n if (this.state.editedDocParameters.find(a => a.MIN_DOC === '-') === undefined && this.state.editedDocParameters.find(a => a.MAX_DOC === '-') === undefined) {\r\n if (this.state.editedDocParameters.find(a => Number(a.MAX_DOC) > 999999999) !== undefined) {\r\n this.setState({ respnseMessage: this.props.content.maxDocLimit, isError: true });\r\n }\r\n else if (this.state.editedDocParameters.find(a => Number(a.MIN_DOC) < 0) !== undefined) {\r\n this.setState({ respnseMessage: this.props.content.minDocLimit, isError: true });\r\n }\r\n else {\r\n this.setState({ isLoading: true, respnseMessage: '', isError: false });\r\n let email = this.props.user.user.Email\r\n let updatedRecords = this.state.editedDocParameters.map(item => ({ ...item }))\r\n updatedRecords.map(function (parameter) {\r\n parameter['UPDATED_BY'] = email\r\n });\r\n this.props.updateFlightPlanningDocParameters(updatedRecords).then((response) => {\r\n if (response.status === 200) {\r\n // this.state.flightPlanningDocParameters.map(function (parameter) {\r\n // if (updatedRecords.find(a => a.DOC_ID === parameter.DOC_ID))\r\n // parameter['UPDATED_BY'] = email\r\n // });\r\n this.setState({ flightPlanningDocParameters: response.data.Result, editedDocParameters: [], isLoading: false, respnseMessage: this.props.content.successMessage, isError: false });\r\n }\r\n else {\r\n this.setState({ isLoading: false, respnseMessage: this.props.content.errorMessage, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ isLoading: false, respnseMessage: this.props.content.errorMessage, isError: true });\r\n })\r\n }\r\n }\r\n else {\r\n this.setState({ respnseMessage: this.props.content.validNumber, isError: true });\r\n }\r\n }\r\n else {\r\n this.setState({ respnseMessage: this.props.content.blankValue, isError: true });\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetError()\r\n }\r\n\r\n render() {\r\n var _instance = this\r\n var docParameters = this.state.flightPlanningDocParameters.map(function (parameter) {\r\n return (\r\n
\r\n )\r\n }\r\n}\r\n\r\nclass TableRows extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n //parameter: this.props.docParameter,\r\n };\r\n }\r\n\r\n onChangeEvent(val) {\r\n if (val.target.id === 'DOC_SEGMENTATION' || val.target.value === ''\r\n || /^(\\-(\\d*))$/.test(val.target.value) || !isNaN(val.target.value)) {\r\n var editingRow = this.props.docParameter;\r\n if (val.target.id === 'DOC_SEGMENTATION') {\r\n editingRow[val.target.id] = val.target.value\r\n this.props.trackDocParameterChanges(editingRow)\r\n }\r\n else {\r\n let editedValue = val.target.value.trim()\r\n if (editedValue.toString() !== editingRow[val.target.id].toString()) {\r\n editingRow[val.target.id] = editedValue\r\n this.props.trackDocParameterChanges(editingRow)\r\n }\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n var bindValues = this.props.docParameter;\r\n return (\r\n \r\n
\r\n \r\n
\r\n {this.state.flightPlanningDocParameters.length > 0 ?\r\n \r\n
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n
\r\n {this.state.flightPlanningDocParameters.length > 0 ?\r\n \r\n
\r\n : null}\r\n \r\n
\r\n {BreakLine(this.props.content.docParameters)}
\r\n \r\n {this.state.isError ?\r\n
\r\n \r\n {this.state.respnseMessage}
:\r\n {this.state.respnseMessage}
\r\n }\r\n \r\n
\r\n {this.props.content.docDescription}
\r\n {this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ?\r\n \r\n \r\n
: null}\r\n \r\n
\r\n : null}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n | {this.props.content.minDoc} | \r\n{this.props.content.maxDoc} | \r\n{this.props.content.docSegmentation} | \r\n{this.props.content.updatedBy} | \r\n{this.props.content.updatedOn} | \r\n
|---|
\r\n
\r\n )\r\n }\r\n}\r\n\r\nclass TableRows extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n //parameter: this.props.spendParameter,\r\n };\r\n }\r\n\r\n onChangeEvent(val) {\r\n if (val.target.id === 'SPEND_SEGMENTATION' || val.target.value === '' ||\r\n /^(\\-(\\d*))$/.test(val.target.value) || !isNaN(val.target.value)) {\r\n var editingRow = this.props.spendParameter;\r\n if (val.target.id === 'SPEND_SEGMENTATION') {\r\n editingRow[val.target.id] = val.target.value\r\n this.props.trackSpendParameterChanges(editingRow)\r\n }\r\n else {\r\n let editedValue = val.target.value.trim()\r\n if (editedValue.toString() !== editingRow[val.target.id].toString()) {\r\n editingRow[val.target.id] = editedValue\r\n this.props.trackSpendParameterChanges(editingRow)\r\n }\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n var bindValues = this.props.spendParameter;\r\n return (\r\n \r\n
\r\n \r\n
\r\n {this.state.flightPlanningSpendParameters.length > 0 ?\r\n \r\n
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n
\r\n {this.state.flightPlanningSpendParameters.length > 0 ?\r\n \r\n
\r\n : null}\r\n \r\n
\r\n {BreakLine(this.props.content.spendParameters)}
\r\n \r\n {this.state.isError ?\r\n
\r\n \r\n {this.state.respnseMessage}
:\r\n {this.state.respnseMessage}
\r\n }\r\n \r\n
\r\n {this.props.content.spendDescription}
\r\n {this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ?\r\n \r\n \r\n
: null}\r\n \r\n
\r\n : null}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n | {this.props.content.minSpend} | \r\n{this.props.content.maxSpend} | \r\n{this.props.content.spendSegmentation} | \r\n{this.props.content.updatedBy} | \r\n{this.props.content.updatedOn} | \r\n
|---|
\r\n
\r\n )\r\n }\r\n}\r\n\r\nclass TableRows extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n //parameter: this.props.spendParameter,\r\n };\r\n }\r\n\r\n onChangeEvent(val) {\r\n if (val.target.id === 'TRANSACTING_BUYER_RELATIONSHIP' || val.target.value === '' ||\r\n /^(\\-(\\d*))$/.test(val.target.value) || !isNaN(val.target.value)) {\r\n var editingRow = this.props.spendParameter;\r\n if (val.target.id === 'TRANSACTING_BUYER_RELATIONSHIP') {\r\n editingRow[val.target.id] = val.target.value\r\n this.props.trackSpendParameterChanges(editingRow)\r\n }\r\n else {\r\n let editedValue = val.target.value.trim()\r\n if (editedValue.toString() !== editingRow[val.target.id].toString()) {\r\n editingRow[val.target.id] = editedValue\r\n this.props.trackSpendParameterChanges(editingRow)\r\n }\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n var bindValues = this.props.spendParameter;\r\n return (\r\n \r\n
\r\n \r\n
\r\n {this.state.FlightPlanningTransactingBuyRelationship.length > 0 ?\r\n \r\n
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n
\r\n {this.state.FlightPlanningTransactingBuyRelationship.length > 0 ?\r\n \r\n
\r\n : null}\r\n \r\n
\r\n {BreakLine(this.props.content.spendParameters)}
\r\n \r\n {this.state.isError ?\r\n
\r\n \r\n {this.state.respnseMessage}
:\r\n {this.state.respnseMessage}
\r\n }\r\n \r\n
\r\n {this.props.content.spendDescription}
\r\n {this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ?\r\n \r\n \r\n
: null}\r\n \r\n
\r\n : null}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n | {this.props.content.minSpend} | \r\n{this.props.content.maxSpend} | \r\n{this.props.content.spendSegmentation} | \r\n{this.props.content.updatedBy} | \r\n{this.props.content.updatedOn} | \r\n
|---|
\r\n
\r\n )\r\n }\r\n}\r\n\r\nclass TableRows extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n transactionEligible: false,\r\n unclassifiedEligible: false,\r\n sCCEligible: false,\r\n fieldglass: false,\r\n fieldglassEligible: false\r\n };\r\n }\r\n\r\n onChangeEvent(val) {\r\n var editingRow = this.props.currentRowData;\r\n let editedValue = val.target.value.trim()\r\n if (editedValue.toString() !== editingRow[val.target.id].toString()) {\r\n editingRow[val.target.id] = editedValue\r\n this.props.trackScopeVisibilityChanges(editingRow)\r\n }\r\n }\r\n selectIstransactionEligibleChk(e) {\r\n //this.setState({ transactionEligible: !this.state.transactionEligible }, () => {\r\n var editingRow = this.props.currentRowData;\r\n editingRow['TRAN_AN_SUPP_AUTO_ELIGIBLE'] = !editingRow['TRAN_AN_SUPP_AUTO_ELIGIBLE'] //= true ? 'Yes' : 'No';\r\n this.props.trackScopeVisibilityChanges(editingRow);\r\n //});\r\n }\r\n selectIsSupplierEligibleChk(e) {\r\n //this.setState({ transactionEligible: !this.state.transactionEligible }, () => {\r\n var editingRow = this.props.currentRowData;\r\n editingRow['SUPPLIER_ELIGIBLE'] = !editingRow['SUPPLIER_ELIGIBLE'] //= true ? 'Yes' : 'No';\r\n this.props.trackScopeVisibilityChanges(editingRow);\r\n //});\r\n }\r\n selectIsCatalogInScopeChk(e) {\r\n //this.setState({ transactionEligible: !this.state.transactionEligible }, () => {\r\n var editingRow = this.props.currentRowData;\r\n editingRow['CATEGORY_IN_SCOPE'] = !editingRow['CATEGORY_IN_SCOPE'] //= true ? 'Yes' : 'No';\r\n this.props.trackScopeVisibilityChanges(editingRow);\r\n //});\r\n }\r\n\r\n \r\n\r\n selectIsunclassifiedEligibleChk(e) {\r\n this.setState({ unclassifiedEligible: !this.state.unclassifiedEligible }, () => {\r\n var editingRow = this.props.currentRowData;\r\n editingRow['UNCLASS_SUPP_AUTO_ELIGIBLE'] = !editingRow['UNCLASS_SUPP_AUTO_ELIGIBLE'] //= true ? 'Yes' : 'No';\r\n this.props.trackScopeVisibilityChanges(editingRow);\r\n //this.props.userData.UnclassifiedEligible = this.state.unclassifiedEligible;\r\n });\r\n }\r\n\r\n selectIssCCEligibleChk(e) {\r\n this.setState({ sCCEligible: !this.state.sCCEligible }, () => {\r\n var editingRow = this.props.currentRowData;\r\n editingRow['DIRECT_YES_SUPP_SCC_ELIGIBLE'] = !editingRow['DIRECT_YES_SUPP_SCC_ELIGIBLE'] //= true ? 'Yes' : 'No';\r\n this.props.trackScopeVisibilityChanges(editingRow);\r\n //this.props.userData.SCCEligible = this.state.sCCEligible;\r\n });\r\n }\r\n\r\n selectIsfieldglassChk(e) {\r\n this.setState({ fieldglass: !this.state.fieldglass }, () => {\r\n var editingRow = this.props.currentRowData;\r\n editingRow['FLDG_IN_SCOPE'] = !editingRow['FLDG_IN_SCOPE'] //= true ? 'Yes' : 'No';\r\n this.props.trackScopeVisibilityChanges(editingRow);\r\n //this.props.userData.Fieldglass = this.state.fieldglass;\r\n });\r\n }\r\n\r\n selectIsfieldglassEligibleChk(e) {\r\n this.setState({ fieldglassEligible: !this.state.fieldglassEligible }, () => {\r\n var editingRow = this.props.currentRowData;\r\n editingRow['FG_IN_AUTO_ELG'] = !editingRow['FG_IN_AUTO_ELG'] //= true ? 'Yes' : 'No';\r\n this.props.trackScopeVisibilityChanges(editingRow);\r\n //this.props.userData.FieldglassEligible = this.state.fieldglassEligible ;\r\n });\r\n }\r\n\r\n render() {\r\n var bindValues = this.props.currentRowData;\r\n return (\r\n \r\n {(this.state.isLoading) ?\r\n : null}\r\n
\r\n \r\n
\r\n {this.state.apiData.length > 0 ?\r\n \r\n
\r\n {BreakLine(this.props.content.scopeValueHeader)}
\r\n \r\n {this.state.isError ?\r\n
\r\n \r\n {this.state.responseMessage}
:\r\n {this.state.responseMessage}
\r\n }\r\n \r\n
\r\n \r\n {/* {this.props.content.accountYieldDesc} */}\r\n
\r\n {this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ?\r\n \r\n \r\n
: null}\r\n \r\n \r\n
\r\n : null\r\n }\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nclass TableRows extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n };\r\n }\r\n\r\n onChangeEvent(val) {\r\n if (val.target.value === '' || val.target.value.match(/^[0-9]+$/) || !isNaN(val.target.value)) {\r\n var editingRow = this.props.enablementResourceParameter;\r\n let editedValue = val.target.value.trim()\r\n if (editedValue.toString() !== editingRow[val.target.id].toString()) {\r\n editingRow[val.target.id] = editedValue\r\n this.props.trackEnablementResourceParametersChanges(editingRow)\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n var bindValues = this.props.enablementResourceParameter;\r\n return (\r\n \r\n {(this.state.isLoading) ?\r\n : null}\r\n
\r\n \r\n
\r\n \r\n {/* \r\n
\r\n {BreakLine(this.props.tab == 'KPI Based Model' ? this.props.content.titleKPI : this.props.content.title)}
\r\n \r\n {this.state.isError ?\r\n
\r\n \r\n {this.state.responseMessage}
:\r\n {this.state.responseMessage}
\r\n }\r\n \r\n
\r\n \r\n {this.props.tab == 'KPI Based Model' ? this.props.content.tabDescKPIAdmin : this.props.content.tabDescAdmin }
\r\n {this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ?\r\n \r\n \r\n
: null}\r\n */}\r\n
\r\n \r\n \r\n {/*
*/}\r\n \r\n {this.state.enablementResourceParameters.length > 0 ?\r\n Solution in Scope : \r\n | \r\n
\r\n \r\n
\r\n : null\r\n }\r\n \r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n user: state.default\r\n }\r\n}\r\n\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(MatchAndSegmentation)","import React, { Component } from 'react'\r\nimport { EnablementLogicRecommendationColumns, EnablementLogicReasonColumns,OnboardingWorkstreamSupplierColumns } from 'Constants'\r\nimport CustomGrid from 'UI/CustomGrid'\r\nimport { connect } from 'react-redux'\r\nimport { Editors,Filters } from \"react-data-grid-addons\";\r\nimport {\r\n getFlightPlanningRecommendationDetails,\r\n updateFlightPlanningRecommendationDetails,\r\n updateOnboardingworkstreamDetails,\r\n getSupplierChoiceEnablementParametersDetails\r\n} from 'actions/spendActions'\r\nimport { getNonEmptyValue, formatter } from \"../../utils/Utils\";\r\nconst { DropDownEditor } = Editors;\r\n\r\n// const dropdownEnablementRecommendationValues = [\r\n// 'Enterprise - Integration','Enterprise - Integration & Catalog','Enterprise - Integration & Catalog Candidate','Enterprise - Integration Candidate'\r\n// ,'Enterprise - Portal','Enterprise - Portal & Catalog']\r\n\r\nconst dropdownEnablementRecommendationValues = [\r\n'Enterprise - Supplier Dedicated Specialist (Integration & Catalog)'\r\n,'Enterprise - Integration Ready & Catalog Candidate'\r\n,'Enterprise - Integration Ready Candidate'\r\n,'Enterprise - Integration'\r\n,'Enterprise - Integration & Catalog'\r\n,'Enterprise - Integration & Catalog Candidate'\r\n,'Enterprise - Integration Candidate'\r\n,'Enterprise - Portal & Catalog'\r\n,'Enterprise - Portal & Catalog Candidate'\r\n,'Enterprise - Portal'\r\n,'Managed Standard Account'\r\n,'On Going Standard Account'\r\n,'Out of Scope'\r\n]\r\nconst dropdownEnablementRecommendationEditor = \r\n
\r\n -1 ? true : false}\r\n save={this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ? this.save : null}\r\n validate={this.validate}\r\n export={true}\r\n exportFileName=\"Enablement Recommendation Extract\"\r\n headerRowHeight={65}\r\n />\r\n \r\n
\r\n -1 ? true : false}\r\n save={this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ? this.saveReason : null}\r\n validate={this.validateReasonData}\r\n export={true}\r\n exportFileName=\"Enablement Recommendation Reason Extract\"\r\n headerRowHeight={65}\r\n />\r\n \r\n
\r\n -1 ? true : false}\r\n save={this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ? this.saveOnboardingParameter : null}\r\n // /validate={this.validateReasonData}\r\n export={true}\r\n exportFileName=\"Enablement Recommendation Reason Extract\"\r\n headerRowHeight={65}\r\n />\r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.menu.EnablementParametersManager[0].SELogicAndAnalysisTab\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getFlightPlanningRecommendationDetails: () => dispatch(getFlightPlanningRecommendationDetails()),\r\n updateFlightPlanningRecommendationDetails: (records) => dispatch(updateFlightPlanningRecommendationDetails(records)),\r\n getSupplierChoiceEnablementParametersDetails: () => dispatch(getSupplierChoiceEnablementParametersDetails()),\r\n updateOnboardingworkstreamDetails: (records) => dispatch(updateOnboardingworkstreamDetails(records)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EnablementSELogicAndAnalysis); ","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport classNames from \"classnames\";\r\nimport { path } from 'Constants'\r\nimport moment from 'moment'\r\nimport {ControlTextE} from 'UI/CustomComponents/Controls';\r\n// Actions\r\nimport {\r\n getWaveWeightCategoryDetails,\r\n updateWaveWeightCategoryDetails,\r\n resetError\r\n} from 'actions/spendActions'\r\n\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\n\r\nclass WaveScoringParameters extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isLoading: false,\r\n waveScoringData: [],\r\n editedEnterpriseParameters: [],\r\n responseMsg: '',\r\n isError: false\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n this.trackSpendParameterChanges = this.trackSpendParameterChanges.bind(this)\r\n this.onSpendParameterSave = this.onSpendParameterSave.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n //this.setState({ waveScoringData: this.props.data })\r\n this.loadData();\r\n }\r\n\r\n loadData() {\r\n this.getAllParameters();\r\n }\r\n\r\n trackSpendParameterChanges(record) {\r\n if (this.state.editedEnterpriseParameters.length === 0 || this.state.editedEnterpriseParameters.find(a => a.WEIGHT_CATEGORY_ID === record.WEIGHT_CATEGORY_ID) === undefined) {\r\n var updatedRecords = this.state.editedEnterpriseParameters\r\n updatedRecords.push(record)\r\n this.setState({ responseMsg: '', editedEnterpriseParameters: updatedRecords, isError: false })\r\n }\r\n }\r\n\r\n getAllParameters() {\r\n this.setState({ responseMsg: '', isError: false });\r\n\r\n this.props.getWaveWeightCategoryDetails()\r\n .then((response) => {\r\n if (response.status === 200) {\r\n \r\n this.setState({ waveScoringData: response.data.Result.filter(d=>d.ENABLE_RECMD_TYPE=== this.props.tab), isLoading: false, responseMsg: '', isError: false });\r\n }\r\n else {\r\n this.setState({ responseMsg: this.props.content.errorMessage, isError: true });\r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator', isError: 'Yes' })\r\n }\r\n else {\r\n this.setState({ responseMsg: this.props.content.errorMessage, isError: 'Yes' })\r\n }\r\n })\r\n }\r\n\r\n onSpendParameterSave() {\r\n this.setState({ isLoading: true, responseMsg: '', isError: false }); \r\n let updatedRecords = this.state.editedEnterpriseParameters;\r\n \r\n this.props.updateWaveWeightCategoryDetails(updatedRecords).then((response) => {\r\n if (response.status === 200) {\r\n this.setState({ editedEnterpriseParameters: [], isLoading: false, responseMsg: this.props.content.successMessage, isError: false }); \r\n }\r\n else {\r\n this.setState({ isLoading: false, responseMsg: this.props.content.errorMessage, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ isLoading: false, responseMsg: this.props.content.errorMessage, isError: true });\r\n })\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetError()\r\n }\r\n\r\n render() {\r\n var _instance = this\r\n var enterpriseParameters = this.state.waveScoringData.map(function (parameter) {\r\n return ({this.props.content.recmdTabHeader}
\r\n {this.props.content.recmdTabDescription}
\r\n \r\n
{this.props.content.reasonTabHeader}
\r\n {this.props.content.reasonTabDescription}
\r\n \r\n
{this.props.content.onboardingTabHeader}
\r\n {this.props.content.onboardingTabDescription}
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nclass TableRows extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n parameter: this.props.enterpriseParameter,\r\n };\r\n }\r\n\r\n onChangeEvent(val) {\r\n if (val.target.value === '' ||\r\n /^(\\-(\\d*))$/.test(val.target.value) || !isNaN(val.target.value)) {\r\n var editingRow = this.props.enterpriseParameter;\r\n if (val.target.id === 'WEIGHT') {\r\n editingRow[val.target.id] = val.target.value\r\n this.props.trackSpendParameterChanges(editingRow)\r\n }\r\n \r\n }\r\n }\r\n \r\n\r\n render() {\r\n var bindValues = this.props.enterpriseParameter;\r\n return (\r\n \r\n
\r\n \r\n
\r\n {this.state.waveScoringData.length > 0 ?\r\n \r\n
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n
\r\n {this.state.waveScoringData.length > 0 ?\r\n \r\n
\r\n : null}\r\n \r\n
\r\n \r\n {BreakLine(this.props.tab === 'Enterprise' ? this.props.content.enterpriseParameter : this.props.tab === 'Standard' ? this.props.content.standardParameter : this.props.content.kpiParameter)} \r\n
\r\n \r\n {this.state.isError ?\r\n
\r\n \r\n {this.state.responseMsg}
:\r\n {this.state.responseMsg}
\r\n }\r\n \r\n
\r\n \r\n { this.props.tab === 'Enterprise' ? this.props.content.enterpriseTabDesc : this.props.tab === 'Standard' ? this.props.content.standardTabDesc : this.props.content.kpiTabDesc }\r\n
\r\n {this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ?\r\n \r\n \r\n
: null}\r\n \r\n
\r\n : null}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n | {this.props.content.enablementMatchType} | \r\n{this.props.content.weight} | \r\n
|---|
\r\n
\r\n )\r\n }\r\n}\r\n\r\nclass TableRows extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n //parameter: this.props.enablementMatchTypeParameter,\r\n };\r\n }\r\n\r\n onChangeEvent(val) {\r\n if (val.target.value === '' || /^(\\-(\\d*))$/.test(val.target.value) || !isNaN(val.target.value)) {\r\n var editingRow = this.props.enablementMatchTypeParameter;\r\n let editedValue = val.target.value.trim()\r\n if (editedValue.toString() !== editingRow[val.target.id].toString()) {\r\n editingRow[val.target.id] = editedValue\r\n this.props.trackNetworkEnablementMatchTypeChanges(editingRow)\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n var bindValues = this.props.enablementMatchTypeParameter;\r\n return (\r\n \r\n
\r\n \r\n
\r\n {this.state.networkEnablementMatchTypes.length > 0 ?\r\n \r\n
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n
\r\n {this.state.networkEnablementMatchTypes.length > 0 ?\r\n \r\n
\r\n : null}\r\n \r\n
\r\n {BreakLine(this.props.content.matchType)}
\r\n \r\n {this.state.isError ?\r\n
\r\n {this.state.respnseMessage}
:\r\n {this.state.respnseMessage}
\r\n }\r\n \r\n
\r\n {this.props.content.matchTypeDescription}
\r\n {this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ?\r\n \r\n \r\n
: null}\r\n \r\n
\r\n : null}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n | {this.props.content.matchTypeColumnHeader} | \r\n{this.props.content.enablementYeildPercentage} | \r\n{this.props.content.updatedBy} | \r\n{this.props.content.updatedOn} | \r\n
|---|
\r\n
\r\n )\r\n }\r\n}\r\n\r\nclass TableRows extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n };\r\n }\r\n\r\n onChangeEvent(val) {\r\n if (val.target.value === '' || val.target.value.match(/^[0-9]+$/) || !isNaN(val.target.value)) {\r\n var editingRow = this.props.standardAccountYield;\r\n let editedValue = val.target.value.trim()\r\n if (editedValue.toString() !== editingRow[val.target.id].toString()) {\r\n editingRow[val.target.id] = editedValue\r\n this.props.trackAccountYieldChanges(editingRow)\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n var bindValues = this.props.standardAccountYield;\r\n return (\r\n \r\n {(this.state.isLoading) ?\r\n : null}\r\n
\r\n \r\n
\r\n {this.state.accountYield.length > 0 ?\r\n \r\n
\r\n {BreakLine(this.props.content.accountYieldHeader)}
\r\n \r\n {this.state.isError ?\r\n
\r\n \r\n {this.state.responseMessage}
:\r\n {this.state.responseMessage}
\r\n }\r\n \r\n
\r\n \r\n {this.props.content.accountYieldDesc}\r\n
\r\n {this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ?\r\n \r\n \r\n
: null}\r\n \r\n \r\n
\r\n : null\r\n }\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n user: state.default,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(WaveScoring); ","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport CustomGrid from 'UI/CustomGrid'\r\nimport { Filters, Editors } from \"react-data-grid-addons\";\r\nimport { AlignFormatter, CenterAlignFormatter, getNonEmptyValue } from \"../../utils/Utils\";\r\n\r\n// Actions\r\nimport {\r\n fetchL4IndustryValues,\r\n uploadL4IndustryPriorityData,\r\n userDetailsSuccess,\r\n userDetailsFailure,\r\n userDetailsLoading,\r\n resetError,\r\n}\r\n from 'actions/spendActions'\r\n\r\nconst {\r\n NumericFilter,\r\n AutoCompleteFilter,\r\n} = Filters;\r\n\r\nclass IndustryPrioratization extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n rawData: [],\r\n l4Industries: [],\r\n industryList: [],\r\n data: []\r\n }\r\n\r\n this.loadData = this.loadData.bind(this)\r\n this.save = this.save.bind(this)\r\n }\r\n\r\n componentWillMount() {\r\n this.loadData()\r\n }\r\n\r\n loadData() {\r\n this.props.fetchL4IndustryValues()\r\n .then((response) => {\r\n this.props.userDetailsSuccess(response.data.Message)\r\n let data = response.data.Result;\r\n\r\n let tempIndustryList = []\r\n let tempL4Industry = []\r\n for (let i = 0; i < data.length; i++) {\r\n tempIndustryList.push(data[i]['AVATAR_INDUSTRY_NAME'])\r\n tempL4Industry.push(data[i]['L4_INDUSTRY_NAME'])\r\n }\r\n //let uniqueItems = [...new Set(items)]\r\n let industryList = [...new Set(tempIndustryList)]\r\n\r\n let l4Industries = [...new Set(tempL4Industry)]\r\n let columns = this.initializeColumns(industryList);\r\n\r\n let tableData = []\r\n\r\n for (let j = 0; j < l4Industries.length; j++) {\r\n let level = data.filter(el => el.L4_INDUSTRY_NAME == l4Industries[j])\r\n let obj = {}\r\n industryList.map(el => obj[el] = '')\r\n\r\n obj.INDUSTRY_LEVEL = level[0]['INDUSTRY_LEVEL']\r\n obj.L4_INDUSTRY_GICS_ID = level[0]['L4_INDUSTRY_GICS_ID']\r\n obj.L4_INDUSTRY_NAME = level[0]['L4_INDUSTRY_NAME']\r\n for (let k = 0; k < industryList.length; k++) {\r\n if (industryList[k] == level[k]['AVATAR_INDUSTRY_NAME']) obj[industryList[k]] = level[k]['PRIORITY_NUM']\r\n }\r\n tableData.push(obj)\r\n }\r\n this.setState({ rawData: data, industryList: industryList, l4Industries: l4Industries, columns: columns, data: tableData })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.userDetailsFailure()\r\n }\r\n })\r\n }\r\n\r\n initializeColumns(industryList) {\r\n let columns = []\r\n\r\n let tableColumn = {\r\n name: 'Industry Level',\r\n key: 'INDUSTRY_LEVEL',\r\n width: 120,\r\n sortable: true,\r\n editable: false,\r\n resizable: true,\r\n filterable: true,\r\n screenSeq: 0,\r\n mandatory: 'No',\r\n exportFl: true,\r\n //editProperty: fieldConfig.is_editable,\r\n formatter: CenterAlignFormatter,\r\n helpText: '',\r\n filterRenderer: AutoCompleteFilter\r\n }\r\n\r\n columns.push(tableColumn);\r\n\r\n tableColumn = {\r\n name: 'L4 GICS Code',\r\n key: 'L4_INDUSTRY_GICS_ID',\r\n width: 120,\r\n sortable: true,\r\n editable: false,\r\n resizable: true,\r\n filterable: true,\r\n screenSeq: 1,\r\n mandatory: 'No',\r\n exportFl: true,\r\n //editProperty: fieldConfig.is_editable,\r\n formatter: CenterAlignFormatter,\r\n helpText: '',\r\n filterRenderer: AutoCompleteFilter\r\n }\r\n\r\n columns.push(tableColumn);\r\n\r\n tableColumn = {\r\n name: 'L4 Industry Name',\r\n key: 'L4_INDUSTRY_NAME',\r\n width: 120,\r\n sortable: true,\r\n editable: false,\r\n resizable: true,\r\n filterable: true,\r\n screenSeq: 1,\r\n mandatory: 'No',\r\n exportFl: true,\r\n //editProperty: fieldConfig.is_editable,\r\n formatter: CenterAlignFormatter,\r\n helpText: '',\r\n filterRenderer: AutoCompleteFilter\r\n }\r\n\r\n columns.push(tableColumn);\r\n\r\n for (let i = 0; i < industryList.length; i++) {\r\n //const fieldConfig = industryList[i];\r\n\r\n tableColumn = {\r\n name: industryList[i],\r\n key: industryList[i],\r\n width: 120,\r\n sortable: true,\r\n editable: this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ? true : false,\r\n resizable: true,\r\n filterable: true,\r\n screenSeq: 1,\r\n mandatory: 'No',\r\n exportFl: true,\r\n //editProperty: fieldConfig.is_editable,\r\n formatter: CenterAlignFormatter,\r\n helpText: '',\r\n filterRenderer: AutoCompleteFilter\r\n }\r\n\r\n columns.push(tableColumn);\r\n }\r\n\r\n return columns;\r\n }\r\n\r\n convertDataForSave(data) {\r\n const d = new Date();\r\n let industryList = this.state.industryList;\r\n let finalData = []\r\n for (let i = 0; i < data.length; i++) {\r\n\r\n for (var key in data[i]) {\r\n if (key !== 'INDUSTRY_LEVEL' && key !== 'L4_INDUSTRY_GICS_ID' && key !== 'L4_INDUSTRY_NAME') {\r\n\r\n let obj = {}\r\n obj.INDUSTRY_LEVEL = data[i]['INDUSTRY_LEVEL']\r\n obj.L4_INDUSTRY_GICS_ID = data[i]['L4_INDUSTRY_GICS_ID']\r\n obj.L4_INDUSTRY_NAME = data[i]['L4_INDUSTRY_NAME']\r\n obj.USER_ID = this.props.user.user.Email;\r\n obj.DATA_LOAD_DATE = d.getDate()\r\n obj.AVATAR_INDUSTRY_NAME = key\r\n obj.PRIORITY_NUM = data[i][key]\r\n\r\n finalData.push(obj)\r\n }\r\n }\r\n }\r\n return finalData;\r\n }\r\n\r\n save(data) {\r\n this.setState({ responseMsg: '' })\r\n let rowData = data.length > 0 ? data : this.state.data;\r\n const recordsToInsert = this.convertDataForSave(rowData);\r\n this.setState({ isLoading: true, isSaveInProgress: true })\r\n // this.props.defineScopeLoading(true)\r\n //call hana procedure for save here\r\n return this.props.uploadL4IndustryPriorityData(recordsToInsert)\r\n // .then((response) => {\r\n // if (response.status !== undefined && response.status === 200) this.loadData()\r\n // // this.props.defineScopeLoading(false)\r\n // })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n -1 ? true : false}\r\n save={this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ? this.save : null}\r\n />\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n user: state.default,\r\n language: state.language,\r\n content: state.content.menu.EnablementParametersManager[0]\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchL4IndustryValues: () => dispatch(fetchL4IndustryValues()),\r\n userDetailsLoading: (bool) => dispatch(userDetailsLoading(bool)),\r\n userDetailsSuccess: (bool) => dispatch(userDetailsSuccess(bool)),\r\n userDetailsFailure: (error) => dispatch(userDetailsFailure(error)),\r\n resetError: () => dispatch(resetError()),\r\n uploadL4IndustryPriorityData: (data) => dispatch(uploadL4IndustryPriorityData(data)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(IndustryPrioratization)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Form } from 'react-redux-form'\r\nimport classNames from \"classnames\";\r\nimport { path } from 'Constants'\r\nimport moment from 'moment'\r\nimport { ControlTextE } from 'UI/CustomComponents/Controls';\r\n\r\n// Actions\r\nimport {\r\n fetchRampScheduleFactor,\r\n resetError,\r\n updateRampScheduleFactor\r\n} from 'actions/spendActions'\r\n\r\n// Utils\r\nimport { BreakLine} from 'utils/Utils'\r\n\r\nclass RampScheduleFactor extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isLoading: false,\r\n scheduleFactor: [],\r\n editedScheduleFactors: [],\r\n responseMessage: '',\r\n isError: false\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n this.trackScheduleFactorsChanges = this.trackScheduleFactorsChanges.bind(this)\r\n this.onScheduleFactorsSave = this.onScheduleFactorsSave.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n }\r\n\r\n loadData() {\r\n this.getAllScheduleFactors();\r\n }\r\n\r\n trackScheduleFactorsChanges(record) {\r\n var updatedRecords = this.state.editedScheduleFactors\r\n if (this.state.editedScheduleFactors.length === 0)\r\n updatedRecords.push(record)\r\n else {\r\n let index = this.state.editedScheduleFactors.findIndex(x => x.QUARTER_NO === record.QUARTER_NO);\r\n if (index !== undefined && index !== null && index > -1)\r\n updatedRecords.splice(index, 1)\r\n updatedRecords.push(record)\r\n }\r\n this.setState({ responseMessage: '', editedScheduleFactors: updatedRecords, isError: false })\r\n }\r\n\r\n getAllScheduleFactors() {\r\n this.setState({ responseMessage: '', isLoading: true, isError: false });\r\n this.props.fetchRampScheduleFactor().then((response) => {\r\n if (response.status === 200) {\r\n if (response.data.Result.length === 0) {\r\n this.setState({ responseMessage: this.props.content.reimport, isLoading: false, isError: true });\r\n }\r\n else\r\n this.setState({ scheduleFactor: response.data.Result, isLoading: false, responseMessage: '', isError: false });\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n })\r\n }\r\n\r\n onScheduleFactorsSave() {\r\n if (this.state.editedScheduleFactors.find(a => a.QUARTER_VALUE === '') === undefined ) {\r\n if (this.state.editedScheduleFactors.find(a => a.QUARTER_VALUE === '-') === undefined ) {\r\n this.setState({ isLoading: true, responseMessage: '', isError: false });\r\n let updatedRecords = this.state.editedScheduleFactors\r\n let email = this.props.user.user.Email\r\n let finalObject = [];\r\n updatedRecords.map(function (data) {\r\n let record = {\r\n 'FACTOR_TYPE': data.FACTOR_TYPE,\r\n 'QUARTER_NO': data.QUARTER_NO,\r\n 'QUARTER_VALUE': data.QUARTER_VALUE, \r\n 'UPDATED_BY': email \r\n }\r\n finalObject.push(record)\r\n });\r\n\r\n this.props.updateRampScheduleFactor(finalObject).then((response) => {\r\n if (response.status === 200) {\r\n this.setState({ scheduleFactor: response.data.Result, editedScheduleFactors: [], isLoading: false, responseMessage: this.props.content.successMessage, isError: false });\r\n }\r\n else {\r\n this.setState({ isLoading: false, responseMessage: this.props.content.errorMessage, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ isLoading: false, responseMessage: this.props.content.errorMessage, isError: true });\r\n })\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.validNumber, isError: true });\r\n }\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.blankValue, isError: true });\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetError()\r\n }\r\n\r\n render() {\r\n var _instance = this\r\n var schedule_factors = this.state.scheduleFactor.map(function (data, index) {\r\n return (\r\n
\r\n )\r\n }\r\n}\r\n\r\nclass TableRows extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n };\r\n }\r\n\r\n onChangeEvent(val) {\r\n if (val.target.value === '' || val.target.value.match(/^[0-9]+$/) || !isNaN(val.target.value)) {\r\n var editingRow = this.props.rampScheduleFactor;\r\n let editedValue = val.target.value.trim()\r\n if (editedValue.toString() !== editingRow[val.target.id].toString()) {\r\n editingRow[val.target.id] = editedValue\r\n this.props.trackScheduleFactorsChanges(editingRow)\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n var bindValues = this.props.rampScheduleFactor;\r\n return (\r\n \r\n {(this.state.isLoading) ?\r\n : null}\r\n
\r\n \r\n
\r\n {this.state.scheduleFactor.length > 0 ?\r\n \r\n
\r\n {BreakLine(this.props.content.rampScheduleTitle)}
\r\n \r\n {this.state.isError ?\r\n
\r\n \r\n {this.state.responseMessage}
:\r\n {this.state.responseMessage}
\r\n }\r\n \r\n
\r\n \r\n {this.props.content.rampScheduleDesc}\r\n
\r\n {this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ?\r\n \r\n \r\n
: null}\r\n \r\n \r\n
\r\n : null\r\n }\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nclass TableRows extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n };\r\n }\r\n\r\n onChangeEvent(val) {\r\n if (val.target.value !== '' && val.target.value.indexOf('Q')===0 ){// || val.target.value.match(/^[0-9]+$/) || !isNaN(val.target.value)) {\r\n var userInput = val.target.value.split('Q')\r\n if(userInput[1].match(/^[0-9]+$/) || !isNaN(userInput[1])){\r\n if(userInput[1] <=12){\r\n var editingRow = this.props.goLiveKickoffWeekData;\r\n let editedValue = val.target.value.trim()\r\n if (editedValue.toString() !== editingRow[val.target.id].toString()) {\r\n editingRow[val.target.id] = editedValue\r\n this.props.trackGoLiveKickoffWeekChanges(editingRow)\r\n }\r\n }else{\r\n this.props.setValidationError() \r\n }\r\n\r\n }\r\n else{\r\n this.props.setValidationError() \r\n }\r\n }\r\n else{\r\n this.props.setValidationError()\r\n }\r\n }\r\n\r\n render() {\r\n var bindValues = this.props.goLiveKickoffWeekData;\r\n return (\r\n \r\n {(this.state.isLoading) ?\r\n : null}\r\n
\r\n \r\n
\r\n {this.state.goLiveKickoffWeek.length > 0 ?\r\n \r\n
\r\n {BreakLine(this.props.content.kpiQuarterTitle)}
\r\n \r\n {this.state.isError ?\r\n
\r\n \r\n {this.state.responseMessage}
:\r\n {this.state.responseMessage}
\r\n }\r\n \r\n
\r\n \r\n {this.props.content.kpiQuarterDesc}\r\n
\r\n {this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ?\r\n \r\n \r\n
: null}\r\n \r\n \r\n
\r\n : null\r\n }\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n user: state.default,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(RampSchedule); \r\n\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport CustomGrid from 'UI/CustomGrid'\r\nimport { Filters, Editors } from \"react-data-grid-addons\";\r\nimport { AlignFormatter, CenterAlignFormatter, getNonEmptyValue } from \"../../utils/Utils\";\r\n\r\n// Actions\r\nimport {\r\n fetchMarketPlaceEligibleValues,\r\n updateMarketPlaceEligibleValues,\r\n userDetailsSuccess,\r\n userDetailsFailure,\r\n userDetailsLoading,\r\n resetError,\r\n}\r\n from 'actions/spendActions'\r\n\r\nconst {\r\n NumericFilter,\r\n AutoCompleteFilter,\r\n} = Filters;\r\n\r\nconst { DropDownEditor } = Editors;\r\nconst dropdownValues = [\"Yes\", \"No\"];\r\nconst dropDownEditor = \r\n -1 ? true : false}\r\n save={this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ? this.save : null}\r\n />\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n user: state.default,\r\n language: state.language,\r\n content: state.content.menu.EnablementParametersManager[0]\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchMarketPlaceEligibleValues: () => dispatch(fetchMarketPlaceEligibleValues()),\r\n userDetailsLoading: (bool) => dispatch(userDetailsLoading(bool)),\r\n userDetailsSuccess: (bool) => dispatch(userDetailsSuccess(bool)),\r\n userDetailsFailure: (error) => dispatch(userDetailsFailure(error)),\r\n resetError: () => dispatch(resetError()),\r\n updateMarketPlaceEligibleValues: (data) => dispatch(updateMarketPlaceEligibleValues(data)) \r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(MarketPlaceEligible)","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { getQualityAssessmentData, updateQualityAssessmentData } from 'actions/spendActions'\r\nimport classNames from \"classnames\";\r\nimport { path } from 'Constants'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n\r\nclass QualityAssessment extends React.Component {\r\n constructor(props) {\r\n super()\r\n this.state = {\r\n tableData: [],\r\n tableHeaders: ['Field Name', 'Color', 'Warning Bottom Range', 'Warning Top Range', 'Recommendations'],\r\n updateData: [],\r\n isError: 'No',\r\n responseMsg: '',\r\n isSuccess: false,\r\n readOnly : props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ? false : true\r\n }\r\n this.onQualityAssessmentSave = this.onQualityAssessmentSave.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData()\r\n }\r\n\r\n loadData() {\r\n this.props.getQualityAssessmentData()\r\n .then((response) => {\r\n if (response.data.Result.length > 0) {\r\n this.setState({ tableData: response.data.Result })\r\n } else {\r\n this.setState({ responseMsg: 'No result found. Please try reimporting the file.', isError: 'Yes', isLoading: false })\r\n }\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n }\r\n })\r\n }\r\n\r\n bottomRangeChanged(event) {\r\n let tableData = this.state.tableData;\r\n let id = event.target.id;\r\n tableData.map(item => {\r\n if (item.SORT_ORDER_ID == id) {\r\n item.WARNING_BOTTOM_RANGE = event.target.value\r\n }\r\n })\r\n let updateArr = this.state.updateData\r\n let temp = tableData.filter(item => item.SORT_ORDER_ID == id)\r\n updateArr.length > 0 ? updateArr.map((item, index) => item.SORT_ORDER_ID == temp[0].SORT_ORDER_ID ? updateArr[index] = temp[0] : updateArr.push(temp[0])) : updateArr.push(temp[0])\r\n this.setState({ tableData: tableData, updateData: updateArr })\r\n }\r\n\r\n topRangeChanged(event) {\r\n let tableData = this.state.tableData;\r\n let id = event.target.id;\r\n tableData.map(item => {\r\n if (item.SORT_ORDER_ID == id) {\r\n item.WARNING_TOP_RANGE = event.target.value\r\n }\r\n })\r\n let updateArr = this.state.updateData\r\n let temp = tableData.filter(item => item.SORT_ORDER_ID == id)\r\n updateArr.length > 0 ? updateArr.map((item, index) => item.SORT_ORDER_ID == temp[0].SORT_ORDER_ID ? updateArr[index] = temp[0] : updateArr.push(temp[0])) : updateArr.push(temp[0])\r\n this.setState({ tableData: tableData, updateData: updateArr })\r\n }\r\n\r\n recommendationChange(event) {\r\n let tableData = this.state.tableData;\r\n let id = event.target.id;\r\n tableData.map(item => {\r\n if (item.SORT_ORDER_ID == id) {\r\n item.RECOMMENDATION_TEXT = event.target.value\r\n }\r\n })\r\n let updateArr = this.state.updateData\r\n let temp = tableData.filter(item => item.SORT_ORDER_ID == id)\r\n updateArr.length > 0 ? updateArr.map((item, index) => item.SORT_ORDER_ID == temp[0].SORT_ORDER_ID ? updateArr[index] = temp[0] : updateArr.push(temp[0])) : updateArr.push(temp[0])\r\n this.setState({ tableData: tableData, updateData: updateArr })\r\n }\r\n\r\n onQualityAssessmentSave() {\r\n let uppdateArr = this.state.updateData\r\n this.setState({isLoading: true, responseMsg: ''})\r\n this.props.updateQualityAssessmentData(uppdateArr)\r\n .then((response) => {\r\n if (response.data.StatusCode == 200) {\r\n this.setState({ updateData: [], isSuccess: true, responseMsg: 'Table Updated Successfully.', isLoading: false })\r\n } else {\r\n this.setState({ responseMsg: 'No result found. ', isError: 'Yes', isLoading: false })\r\n }\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n }\r\n })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null}\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n user: state.default,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n getQualityAssessmentData: () => dispatch(getQualityAssessmentData()),\r\n updateQualityAssessmentData: data => dispatch(updateQualityAssessmentData(data))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(QualityAssessment)","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n Route,\r\n NavLink,\r\n MemoryRouter\r\n} from \"react-router-dom\";\r\nimport MatchAndSegmentation from \"./MatchAndSegmentation\";\r\nimport EnablementSELogicAndAnalysis from \"./EnablementSELogicAndAnalysis\";\r\nimport WaveScoring from \"./WaveScoring\"\r\nimport IndustryPrioratization from \"./IndustryPrioratization\"\r\nimport RampSchedule from \"./RampSchedule\"\r\nimport GoLiveVsKickOffWeek from \"./GoLiveVsKickOffWeek\"\r\nimport MarketPlaceEligible from \"./MarketPlaceEligible\"\r\nimport QualityAssessment from './QualityAssessment'\r\n// import SpendQualityAssessment from './SpendQualityAssessment'\r\n\r\nclass EnablementParameters extends React.Component {\r\n\r\n render() {\r\n return (\r\n \r\n {this.state.isError == 'Yes' ?
\r\n {this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ?\r\n {this.state.responseMsg}
: ''}\r\n {this.state.isSuccess ? {this.state.responseMsg}
: ''}\r\n \r\n \r\n
: null}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n | {header} | )}\r\n||||
|---|---|---|---|---|
| {rowData.FIELD_NAME} | \r\n{rowData.WARNING_COLOR} | \r\n \r\n\r\n this.bottomRangeChanged(e)}\r\n readOnly= {this.state.readOnly} />\r\n | \r\n\r\n\r\n this.topRangeChanged(e)}\r\n readOnly= {this.state.readOnly} />\r\n | \r\n\r\n
\r\n
\r\n {this.props.content.popupTitle}
\r\n - \r\n
{this.props.content.seLogicAndAnalysisTabName} \r\n {this.props.content.matchAndSegmentationTabName} \r\n {this.props.content.waveScoring} \r\n {this.props.content.industryPrioratization} \r\n {this.props.content.kpi} \r\n {\"Marketplace Eligible\"} \r\n {\"Enriched Spend Quality Assessment\"} \r\n {/* {\"Spend Quality Assessment\"} */}\r\n
\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.menu.Developer[0].ShareFiles\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n shareFileOnJumphost: (data) => dispatch(shareFileOnJumphost(data)),\r\n shareFilesOnJumphostLoading: (bool) => dispatch(shareFilesOnJumphostLoading(bool)),\r\n shareFilesOnJumphostSuccess: (message) => dispatch(shareFilesOnJumphostSuccess(message)),\r\n shareFilesOnJumphostFailure: (error) => dispatch(shareFilesOnJumphostFailure(error))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ShareFilesOnJumphost)\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { path } from 'Constants'\r\nimport {\r\n fetchSystemReportingDetails\r\n}\r\n from 'actions/userActions'\r\n\r\nclass SystemReporting extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n systemReportingData: [{ ExcelFileName: 'ValueStory Details', UIName: 'Value Story Details', Description: 'Get details of value stories created by Avatar users' },\r\n { ExcelFileName: 'Downloded Report Details', UIName: 'Custom Report Downloads', Description: 'Get details of custom PPT reports downloaded by Avatar users' }],\r\n responseMsg: \"\",\r\n isLoading: false,\r\n isError: false\r\n }\r\n this.downloadFile = this.downloadFile.bind(this)\r\n }\r\n\r\n handleDownload(data) {\r\n this.setState({ isLoading: true, isError: false, responseMsg: '' })\r\n this.props.fetchSystemReportingDetails(data.ExcelFileName)\r\n .then((response) => {\r\n if (response.status === 200) {\r\n this.downloadFile(response)\r\n this.setState({ isLoading: false, isError: false, responseMsg: 'Downloaded successfully' })\r\n }\r\n else\r\n this.setState({ isLoading: false, isError: true, responseMsg: 'An error has occured' })\r\n }).catch((error) => {\r\n this.setState({ isLoading: false, isError: true, responseMsg: 'An error has occured' })\r\n })\r\n }\r\n\r\n downloadFile(response) {\r\n const byteArrays = [];\r\n const byteCharacters = atob(response.data);\r\n\r\n for (let offset = 0; offset < byteCharacters.length; offset += 512) {\r\n const slice = byteCharacters.slice(offset, offset + 512);\r\n const byteNumbers = new Array(slice.length);\r\n for (let i = 0; i < slice.length; i++) {\r\n byteNumbers[i] = slice.charCodeAt(i);\r\n }\r\n\r\n const byteArray = new Uint8Array(byteNumbers);\r\n byteArrays.push(byteArray);\r\n }\r\n\r\n var blob = new Blob(byteArrays);\r\n\r\n var [, filename] = response.headers['content-disposition'].split('filename=');\r\n filename = filename.replace(/ /g, \"_\").replace(/\"/g, \"\")\r\n\r\n if (navigator.msSaveBlob) {\r\n navigator.msSaveBlob(blob, filename);\r\n }\r\n else {\r\n var link = document.createElement(\"a\");\r\n link.href = URL.createObjectURL(blob);\r\n link.setAttribute('visibility', 'hidden');\r\n link.download = filename\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n {this.props.content.title}
\r\n {BreakLine(this.props.content.description)}
\r\n \r\n \r\n
\r\n \r\n
\r\n {this.state.selectedFile !== null ? this.state.selectedFile.name : ''}
\r\n \r\n
\r\n \r\n
\r\n {this.state.errorMsg}
\r\n {this.state.successMsg}
\r\n {this.state.fileError}
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nclass SystemReportingTable extends React.Component {\r\n render() {\r\n var self = this;\r\n var data = self.props.data.map(function (data) {\r\n return (\r\n
\r\n \r\n
\r\n {'System Reporting'}
\r\n {'You can extract Avatar usage details by clicking on Download link'}
\r\n \r\n
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError) ?\r\n
\r\n {this.state.responseMsg}
:\r\n {this.state.responseMsg}
\r\n }\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass SystemReportingRow extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n };\r\n }\r\n\r\n onDownloadEvent() {\r\n this.props.onDownloadEvent(this.props.data);\r\n }\r\n\r\n render() {\r\n return (\r\n | Name | \r\nDescription | \r\nAction | \r\n
|---|
\r\n\t\t\t\t\t
\r\n\t\t)\r\n\t}\r\n\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tui: state.content.ui,\r\n\t\tuser: state.default,\r\n\t\tcontent: state.content.roleManager,\r\n\t\tvalidation: state.content.validation,\r\n\t\tanIDManager: state.spendDetails\r\n\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tuserDetailsSuccess: (bool) => dispatch(userDetailsSuccess(bool)),\r\n\t\tuserDetailsFailure: (error) => dispatch(userDetailsFailure(error)),\r\n\t\tresetError: () => dispatch(resetError()),\r\n\t\tfetchANIdBPIdDetails: (formValues) => dispatch(fetchANIdBPIdDetails(formValues)),\r\n\t\taddANIDDetails: (formValues) => dispatch(addANIDDetails(formValues))\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ANIDManager)","import React, { PureComponent } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { actions } from 'react-redux-form'\r\nimport ScrollArea from 'react-scrollbar'\r\nimport Button from 'UI/Button'\r\n\r\n// Actions\r\nimport {\r\n logoutUser,\r\n resetToken,\r\n reportSubmit,\r\n reportSubmitSuccess,\r\n reportSubmitFailure,\r\n resetError,\r\n resetMessage,\r\n showValueStoryMenu\r\n} from 'actions/userActions'\r\n\r\nimport { valueStoryReset } from 'actions/fetchValueStory'\r\n\r\n// Utils\r\nimport { clearLocalStorage, BreakLine } from '../../utils/Utils'\r\nimport classnames from 'classnames'\r\n\r\n// Components\r\nimport MenuItems from './MenuItems'\r\nimport MenuCheckList from './MenuChecklist'\r\nimport ValueStoryContainer from 'components/ValueStory/ValueStoryContainer'\r\nimport ChangePassword from './ChangePassword'\r\nimport Report from './Report'\r\nimport About from './About'\r\nimport SaveAs from './SaveAs'\r\n\r\n// UI\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nimport { modalStyle, modalContentStyle, path ,reportBugContentStyle } from 'Constants'\r\nimport DomainDetails from 'components/Admin/DomainManager'\r\n\r\nimport UserManagerContainer from 'components/Admin/UserManagerContainer'\r\nimport EmailManager from 'components/Admin/EmailManager'\r\nimport ReportContainer from 'components/Admin/ReportContainer'\r\nimport NotificationManager from 'components/Admin/NotificationManager' \r\nimport ReportBugContainer from 'components/ReportBug/ReportBugContainer'\r\nimport FileUploadManager from 'components/Admin/FileUploadManager'\r\nimport UserAndRoleManager from 'components/Admin/UserAndRoleManagerContainer'\r\n// import DefineScopeContainer from 'components/Spend/DefineScopeContainer'\r\n// import DetailedFileContainer from 'components/Spend/DetailedFileContainer'\r\n//import YourFileContainer from 'components/Spend/YourFileContainer'\r\nimport GICSAdminController from 'components/GICSAdmin/GICSAdminController'\r\nimport ReleaseContainer from 'components/ReleaseNotification/ReleaseContainer'\r\nimport SpendParameter from 'components/Admin/SpendParametersContainer'\r\nimport { backdropStyle, changeModalStyle, changeModalBorderRectStyle, changeModalContentStyle, changeModalBorderStyle } from 'Constants'\r\nimport VideoManager from 'components/Admin/VideoManagerContainer'\r\nimport WithdrawConsent from './WithdrawConsent'\r\nimport CountryLookup from 'components/Admin/CountryLookup'\r\nimport EnablementParameters from 'components/Admin/EnablementParameters'\r\nimport ShareFilesOnJumphost from 'components/Admin/ShareFilesOnJumphost'\r\nimport SystemReporting from 'components/Admin/SystemReporting' \r\nimport ANIDManager from 'components/Admin/ANIDManager'\r\n\r\nconst changeBackdropStyle = Object.assign({}, backdropStyle);\r\nchangeBackdropStyle.zIndex = '1050';\r\n\r\nconst alertModalStyle = Object.assign({}, changeModalStyle);\r\nalertModalStyle.zIndex = '1060';\r\n\r\n// Settings\r\nconst autoHeightModalStyle = Object.assign({}, modalStyle)\r\n\r\nconst valueStoryModalStyle = Object.assign({}, modalStyle)\r\nautoHeightModalStyle.height = 'auto'\r\nvalueStoryModalStyle.maxWidth = '1024px'\r\nvalueStoryModalStyle.height = 'auto'\r\n\r\nconst components = {\r\n emailManager: EmailManager,\r\n valueStory: ValueStoryContainer,\r\n reportManager: ReportContainer,\r\n allowedDomains: DomainDetails,\r\n reportBug: ReportBugContainer,\r\n notificationManager: NotificationManager,\r\n about: About,\r\n fileUploadManager: FileUploadManager,\r\n userManagerContainer: UserManagerContainer,\r\n password: ChangePassword,\r\n report: Report,\r\n saveAs: SaveAs,\r\n userAndRoleManager: UserAndRoleManager,\r\n // defineScopeContainer: DefineScopeContainer,\r\n // detailedFileContainer: DetailedFileContainer,\r\n // yourFileContainer : YourFileContainer,\r\n gicsAdmin: GICSAdminController,\r\n releaseContainer: ReleaseContainer,\r\n SpendParameter : SpendParameter,\r\n videoManager : VideoManager,\r\n withdrawConsent: WithdrawConsent,\r\n countryLookup: CountryLookup,\r\n enablementParameters: EnablementParameters,\r\n shareFilesonJumohost: ShareFilesOnJumphost,\r\n systemReporting: SystemReporting,\r\n ANIDManager: ANIDManager\r\n};\r\n\r\nclass MenuContainer extends PureComponent {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n reportType: 'Summary',\r\n VSId: null\r\n }\r\n\r\n this.showModal = this.showModal.bind(this)\r\n this.hideModal = this.hideModal.bind(this)\r\n this.handleMenuAction = this.handleMenuAction.bind(this)\r\n this.handleLogout = this.handleLogout.bind(this)\r\n this.handleRadioButtonClick = this.handleRadioButtonClick.bind(this)\r\n this.handleReportSubmit = this.handleReportSubmit.bind(this)\r\n this.disableReport = this.disableReport.bind(this)\r\n this.handleMenuAccordion = this.handleMenuAccordion.bind(this)\r\n this.handleValueStoryMenu = this.handleValueStoryMenu.bind(this)\r\n this.setReportBugAlertVisibility = this.setReportBugAlertVisibility.bind(this)\r\n this.hideReportBugAlertModal = this.hideReportBugAlertModal.bind(this)\r\n this.showReportBugAlertModal = this.showReportBugAlertModal.bind(this)\r\n this.reportDisabled = false\r\n }\r\n\r\n handleValueStoryMenu(action) {\r\n switch (action) {\r\n case 'valueStory':\r\n case 'languagemanager':\r\n case 'transaltescreen':\r\n case 'benchmark':\r\n case 'carousel':\r\n case 'userAndRoleManager':\r\n case 'subTabsContainer':\r\n case 'yourFile':\r\n case 'topDetails':\r\n case 'defineScope':\r\n case 'enablement':\r\n case 'gicsAdmin':\r\n case 'releases':\r\n case 'spendParameter':\r\n case 'videoManager':\r\n case 'systemReporting':\r\n case 'countryLookup':\r\n case 'anIdManager':\r\n this.props.showValueStoryMenu(false);\r\n break;\r\n case 'detailedFile':\r\n\r\n default:\r\n break\r\n }\r\n }\r\n\r\n handleMenuAction(e, action) {\r\n window.scrollTo({top: 0, behavior: 'smooth'})\r\n this.handleValueStoryMenu(action);\r\n\r\n switch (action) {\r\n case 'valueStory':\r\n case 'report':\r\n case 'about':\r\n case 'saveAs':\r\n case 'userManagerContainer':\r\n this.showModal(action)\r\n break\r\n case 'allowedDomains':\r\n this.showModal(action)\r\n break\r\n case 'reportBug':\r\n this.showModal(action)\r\n break\r\n case 'emailManager':\r\n this.showModal(action)\r\n break\r\n case 'reportManager':\r\n this.showModal(action)\r\n break\r\n case 'password':\r\n this.props.resetError()\r\n this.showModal(action)\r\n break\r\n case 'account':\r\n e.stopPropagation()\r\n this.handleMenuAccordion(action)\r\n break\r\n case 'admin':\r\n e.stopPropagation()\r\n this.handleMenuAccordion(action)\r\n break\r\n case 'languagemenu':\r\n e.stopPropagation()\r\n this.handleMenuAccordion(action)\r\n break\r\n case 'logout':\r\n this.handleLogout()\r\n break\r\n case 'languagemanager':\r\n this.props.history.push({\r\n pathname: '/language-manager',\r\n nav: this.props.nav,\r\n validation: this.props.validation,\r\n content: this.props.content\r\n })\r\n break\r\n case 'transaltescreen':\r\n this.props.history.push({\r\n pathname: '/translate-screen',\r\n nav: this.props.nav,\r\n validation: this.props.validation,\r\n content: this.props.content,\r\n logout: this.handleLogout\r\n })\r\n\r\n break\r\n\r\n case 'notificationManager':\r\n this.showModal(action)\r\n break\r\n\r\n case 'fileUploadManager':\r\n this.showModal(action)\r\n break\r\n\r\n case 'benchmark':\r\n this.props.history.push({\r\n pathname: '/benchmarks',\r\n content: this.props.content\r\n })\r\n break\r\n\r\n case 'carousel':\r\n this.props.history.push({\r\n pathname: '/carousels',\r\n content: this.props.content\r\n })\r\n break\r\n\r\n case 'userAndRoleManager':\r\n this.props.history.push({\r\n pathname: '/userAndRoleManager'\r\n })\r\n break\r\n\r\n case 'subTabsContainer':\r\n this.props.history.push({\r\n pathname: '/subTabsContainer'\r\n })\r\n break\r\n\r\n case 'yourFile':\r\n this.props.history.push({\r\n pathname: '/yourFile'\r\n })\r\n break\r\n\r\n // case 'defineScope':\r\n // this.props.history.push({\r\n // pathname: '/defineScopeContainer'\r\n // })\r\n // break\r\n\r\n case 'enablement':\r\n this.props.history.push({\r\n pathname: '/enablementContainer'\r\n })\r\n break\r\n\r\n // case 'detailedFile':\r\n // this.props.history.push({\r\n // pathname: '/detailedFileContainer'\r\n // })\r\n // break\r\n\r\n case 'gicsAdmin':\r\n this.props.history.push({\r\n pathname: '/gicsAdmin'\r\n })\r\n break\r\n case 'spendParameter':\r\n this.props.history.push({\r\n pathname: '/spendParameter'\r\n })\r\n break\r\n\r\n case 'releases':\r\n this.props.history.push({\r\n pathname: '/releases',\r\n content: this.props.content\r\n })\r\n break\r\n case 'videoManager':\r\n this.props.history.push({\r\n pathname: '/videoManager'\r\n })\r\n break\r\n\r\n case 'countryLookup':\r\n this.props.history.push({\r\n pathname: '/countryLookup'\r\n })\r\n break\r\n case 'systemReporting':\r\n this.showModal(action)\r\n break\r\n case 'enablementParameters':\r\n this.showModal(action)\r\n break\r\n case 'shareFilesonJumohost':\r\n this.showModal(action)\r\n break\r\n case 'withdrawConsent':\r\n this.showModal(action)\r\n break\r\n case 'anIdManager':\r\n this.props.history.push({\r\n pathname: '/anIdManager'\r\n })\r\n break \r\n default:\r\n break\r\n }\r\n }\r\n\r\n handleRadioButtonClick(value) {\r\n this.setState({\r\n reportType: value\r\n })\r\n\r\n this.props.resetMessage()\r\n }\r\n\r\n handleReportSubmit(formValues) {\r\n this.props.resetError()\r\n let values = Object.assign({}, formValues)\r\n values.Type = this.state.reportType\r\n\r\n this.props\r\n .reportSubmit(values)\r\n .then(response => {\r\n this.props.reportSubmitSuccess(response.data.Message)\r\n\r\n // Reset form\r\n document.getElementById('report.Email').blur()\r\n this.formDispatch(actions.reset('report.Email'))\r\n })\r\n .catch(error => {\r\n if (error.response) {\r\n this.props.reportSubmitFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n\r\n\r\n\r\n handleMenuAccordion(action) {\r\n this.setState({\r\n [action]: !this.state[action]\r\n })\r\n }\r\n\r\n\r\n\r\n handleLogout() {\r\n this.props\r\n .logoutUser()\r\n .then(() => {\r\n this.props.resetToken()\r\n clearLocalStorage()\r\n\r\n // Redirect to home page\r\n window.location.href = path\r\n\r\n // this.props.resetValueStory()\r\n })\r\n .catch(() => {\r\n clearLocalStorage();\r\n // Redirect to home page\r\n window.location.href = path;\r\n })\r\n }\r\n\r\n showModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n // this.refs[action].hide()\r\n\r\n if (action === 'report') {\r\n this.formDispatch(actions.reset('report'))\r\n this.props.resetError()\r\n this.props.resetMessage()\r\n // this.refs[action].hide()\r\n }\r\n if(action === \"reportBug\"){\r\n this.props.resetError()\r\n this.props.resetMessage()}\r\n if (this.refs[action] !== undefined) {\r\n this.refs[action].hide()\r\n }\r\n\r\n }\r\n\r\n disableReport() {\r\n const valueDriversSelected =\r\n this.props.userData &&\r\n this.props.userData.BusinessValueToYou &&\r\n this.props.userData.BusinessValueToYou[0].ValueDriver.filter(\r\n valueDriver => valueDriver.Selected === true\r\n )\r\n\r\n if (\r\n this.props.userData && // value story loaded\r\n (!valueDriversSelected ||\r\n valueDriversSelected.length === 0 || // no value drivers selected\r\n this.props.form.valid === false || // form is invalid\r\n this.props.userData.BusinessValueFromSap[0].NPV === 0) // no calculated NPV Value\r\n ) {\r\n return true\r\n } else {\r\n return false\r\n }\r\n }\r\n\r\n componentWillReceiveProps() {\r\n // Hide Value Story modal if new Value Story is opened\r\n if (this.props.userData !== null) {\r\n if (this.props.userData.VSId !== this.state.VSId) {\r\n this.hideModal(this.props.content.menuItems[0].action)\r\n\r\n this.setState({\r\n VSId: this.props.userData.VSId\r\n })\r\n }\r\n }\r\n\r\n if (!this.props.menuVisible) {\r\n // this.setState({\r\n // accountMenuExpanded: false,\r\n // adminMenuExpanded: false,\r\n // languageMenuExpanded: false\r\n // })\r\n }\r\n }\r\n\r\n isParentMenuEnable = (data, user) => {\r\n var actionName = null\r\n if (user !== null && typeof (data) === 'object') {\r\n var userFeatures = Object.values(user).map(data => data.Action)\r\n Object.values(data).map(item => {\r\n if (\r\n item.action !== undefined &&\r\n userFeatures.indexOf(item.action) > -1\r\n ) {\r\n actionName = item.action\r\n if (this.state[item.action] === undefined) {\r\n this.setState({ [item.action]: false })\r\n }\r\n }\r\n\r\n if (item.subItems !== undefined) {\r\n item.subItems.map(subitem => {\r\n if (userFeatures.indexOf(subitem.action) > -1) {\r\n actionName = item.action\r\n if (this.state[item.action] === undefined) {\r\n this.setState({ [item.action]: false })\r\n }\r\n }\r\n })\r\n }\r\n })\r\n }\r\n return actionName\r\n }\r\n\r\n hideReportBugAlertModal(action) {\r\n this.refs[action].hide()\r\n }\r\n\r\n showReportBugAlertModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n setReportBugAlertVisibility(reportBugResMsg) {\r\n this.setState({reportBugResMsg})\r\n this.showReportBugAlertModal(\"reportBugAlert\")\r\n }\r\n\r\n render() {\r\n var onlyOpenNewStory = []\r\n var instance = this\r\n var showCheckList = 0\r\n onlyOpenNewStory.push(this.props.content.menuItems[0]) // Added for To open the value story only if Role is admin.\r\n return this.props.user !== null &&\r\n this.props.user.user !== null &&\r\n this.props.user.user.applicationFeatures !== null &&\r\n this.props.user.user.applicationFeatures !== undefined ? (\r\n \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t{BreakLine(\"ANID Manager\")}
\r\n\t\t\t\t\t\t\t this.formDispatch = dispatch}\r\n\t\t\t\t\t\t\t\tonSubmit={(values) => this.handleAddUpdateANID(values)}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t{/*
\r\n\r\n \r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\r\n \r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n \r\n
\r\n\r\n \r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\r\n \r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n \r\n
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t{this.props.anIDManager.error}
\r\n\t\t\t\t\t\t\t{this.props.anIDManager.message}
\r\n\r\n\t\t\t\t\t\t\r\n
\r\n\r\n\t\t\t\r\n \r\n \r\n {\r\n Object.values(this.props.content).map(function (childMenuitem) {\r\n var actionName = instance.isParentMenuEnable(childMenuitem, instance.props.user.user.applicationFeatures)\r\n if (actionName !== null) {\r\n if (instance.props.userData !== null && (actionName === \"valueStory\" || actionName === \"saveAs\") && showCheckList === 0) {\r\n showCheckList = showCheckList + 1;\r\n }\r\n return (\r\n \r\n
\r\n {\r\n Object.values(instance.props.user.user.applicationFeatures).map(function (roledetails) {\r\n if (roledetails.IsPopup) {\r\n const SpecificStory = components[roledetails.Action];\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.state.reportBugResMsg}\r\n
\r\n \r\n
\r\n \r\n this.hideReportBugAlertModal(\"reportBugAlert\")}\r\n color /> \r\n
\r\n \r\n
\r\n )\r\n }\r\n })}\r\n {/* \r\n \r\n
*/}\r\n \r\n {SpecificStory !== undefined ?\r\n
\r\n\r\n )\r\n }\r\n })}\r\n\r\n \r\n {roledetails.Action === 'reportBug' ?\r\n \r\n \r\n :\r\n \r\n \r\n }\r\n
\r\n : null}\r\n \r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tcontent: state.content.home,\r\n\t\tuser: state.default\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tresetError: () => dispatch(resetError()),\r\n\t\tsignInSSO: (formValues) => { return dispatch(signInSSO(formValues)) },\r\n\t\tsignInUserSuccess_SSO: (user) => dispatch(signInUserSuccess_SSO(user)),\r\n\t\tmeFromToken: (tokenFromStorage, username) => dispatch(meFromToken(tokenFromStorage, username))\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(HomeContainer)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport { Link } from 'react-router-dom'\r\n\r\n// Actions\r\nimport {\r\n\tsignUpUser,\r\n\tsignUpUserFailure,\r\n\tresetError\r\n} from 'actions/userActions'\r\n\r\n// Components\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\n\r\n// Settings\r\nimport { validators, routes } from 'Constants'\r\n\r\nclass RegisterContainer extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.handleSignUpUser = this.handleSignUpUser.bind(this)\r\n\t\tthis.redirect = this.redirect.bind(this)\r\n\t}\r\n\r\n\thandleSignUpUser(formValues) {\r\n\t\tlet values = Object.assign({}, formValues)\r\n\t\tvalues.Language = this.props.language.toUpperCase()\r\n\t\tvar msg = this.props.content\r\n\t\tthis.props.signUpUser(values).then((result) => {\r\n\r\n\t\t\tif (result.status === 200) {\r\n\t\t\t\tthis.formDispatch(actions.reset('register'))\r\n\r\n\t\t\t\t// Redirect to thank you page\r\n\t\t\t\tthis.redirect()\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tvar httpstatus = result.response.status\r\n\t\t\t\tvar getMsgfromStatus = msg[httpstatus]\r\n\t\t\t\tif (getMsgfromStatus !== undefined) {\r\n\t\t\t\t\tthis.props.signUpUserFailure(getMsgfromStatus)\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.props.signUpUserFailure(result.response.data.message)\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t// Reset form\r\n\r\n\r\n\t\t}).catch((error) => {\r\n\t\t\tif (error.response === undefined) {\r\n\t\t\t\tthis.props.signUpUserFailure(error.message)\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tvar httpstatus = error.response.status\r\n\t\t\t\tvar getMsgfromStatus = msg[httpstatus]\r\n\t\t\t\tthis.props.signUpUserFailure(getMsgfromStatus)\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\tredirect() {\r\n\t\tthis.props.history.push(`/register-thank-you`)\r\n\t}\r\n\r\n\tcomponentWillUnmount() {\r\n\t\tthis.formDispatch(actions.reset('register'))\r\n\t\tthis.props.resetError()\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t{/*
\r\n\t\t\t\r\n\t\t\t\t\t{/* {BreakLine(this.props.content.title)}
*/}\r\n\t\t\t\t\t{this.props.content.description}
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tui: state.content.ui,\r\n\t\tcontent: state.content.register,\r\n\t\tvalidation: state.content.validation,\r\n\t\tuser: state.default\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tsignUpUser: (values) => { return dispatch(signUpUser(values)) },\r\n\t\tsignUpUserFailure: (error) => dispatch(signUpUserFailure(error)),\r\n\t\tresetError: () => dispatch(resetError())\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(RegisterContainer)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Link } from 'react-router-dom'\r\n\r\n// UI\r\nimport Button from 'UI/Button'\r\n\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\nimport Linkify from 'react-linkify'\r\n\r\n// Settings\r\nimport { routes } from 'Constants'\r\n\r\nclass RegisterThankYou extends Component {\r\n\r\n\trender() {\r\n\t\treturn (\t\t\t\r\n\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t{this.props.content.title}
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t this.handleSignUpUser(values)}\r\n\t\t\t\t\t\t\tgetDispatch={(dispatch) => this.formDispatch = dispatch}\r\n\t\t\t\t\t\t\tvalidators={{\r\n\t\t\t\t\t\t\t\t'': {\r\n\t\t\t\t\t\t\t\t\tpasswordsMatch: (vals) => vals.Password === vals.ConfirmPassword,\r\n\t\t\t\t\t\t\t\t\tcharMatch: (vals) => (vals.Password.toLowerCase().indexOf(vals.FirstName.toLowerCase())=== -1 && vals.Password.toLowerCase().indexOf(vals.LastName.toLowerCase())=== -1 \r\n\t\t\t\t\t\t\t\t\t&& vals.Password.toLowerCase().indexOf(vals.Company.toLowerCase()) === -1)\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t{this.props.user.error}
\r\n\t\t\t\t\t\t{this.props.ui.login}\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tcontent: state.content.register.thankYou\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps)(RegisterThankYou)\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport Button from 'UI/Button'\r\nimport { Form } from 'react-redux-form'\r\nimport { Link } from 'react-router-dom'\r\n// Actions\r\nimport {\r\n\tupdateConsent,\r\n\tuserConsentSuccess,\r\n\tuserConsentFailure,\r\n\tresetError\r\n} from 'actions/userActions'\r\n\r\nimport { modalStyle, modalContentStyle, routes, validators } from 'Constants'\r\n\r\n// Utils\r\nimport { Checkbox } from 'material-ui';\r\n\r\nvar aStyle ={\r\n\tcolor: 'blue'\r\n}\r\n\r\nclass Terms extends React.Component {\r\n\tconstructor(props) \r\n {\r\n super(props);\r\n this.state = {\r\n\t\tchkbox: false\r\n\t}\r\n\tthis.isChecked = this.isChecked.bind(this);\r\n\tthis.check = this.check.bind(this);\r\n\tthis.redirect = this.redirect.bind(this)\r\n }\r\n\r\n isChecked(formValue){\r\n\t\tif(this.state.chkbox){\r\n\t\t\tconst value = {\r\n\t\t\t\tUserID: localStorage.getItem('id'),\r\n\t\t\t\tAccepted: true\r\n\t\t\t}\r\n\t\t\tthis.props.updateConsent(value)\r\n\t\t\t.then((result) => {\r\n\t\t\t\tthis.props.userConsentSuccess(result) \r\n\t\t\t\tif(!localStorage.getItem('loggedinUser').includes('sap.com') && sessionStorage.getItem('isCustomer') !== 'true')\r\n\t\t\t {\r\n\t\t\t\tthis.props.checkNewsLetterAcceptance()\r\n\t\t\t\t}else{\r\n\t\t\t\tthis.redirect()\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\t\t this.props.userConsentFailure(error.response.data.Message)\r\n\t\t\t})\r\n\t\t}\r\n\t\telse{\r\n\t\t\tthis.props.userConsentFailure(\"Please select the checkbox\")\r\n\t\t}\r\n\t}\r\n\r\n\tredirect() {\r\n\t\tif (localStorage.getItem('role') !== null && localStorage.getItem('role').toUpperCase() === ('TRANSLATOR')) {\r\n\t\t\t\t\r\n\t\t\t\tthis.props.props.push({\r\n\t\t\t\t\tpathname: '/language-manager', validation: this.props.validation\r\n\t\r\n\t\t\t\t})\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis.props.props.push(`/start`)\r\n\t\t\t}\r\n\t\t}\r\n\r\n\tcheck(e){\r\n\t\tif(e.target.checked){\r\n\t\t\tthis.setState({chkbox: true})\r\n\t\t}\r\n\t\telse{\r\n\t\t\tthis.setState({chkbox: false})\r\n\t\t}\r\n\t}\r\n\r\n\trender(){\r\n\t\treturn(\r\n\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t{BreakLine(this.props.content.title)}
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{BreakLine(this.props.content.description)}
\r\n\t\t\t\t\t\t\t{this.props.content.contactDescri} Intelligent Spend Management Value Experience Tools\r\n\r\n\t\t\t\t\t\t\r\n\t\t\t
\r\n
\r\n \r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t
\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n \r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n\t\t\t\t \r\n\t\t\t\t
\r\n\t\t\t\t\t
\r\n \r\n\t\t\t \t - \r\n\t\t\t\t\t
\r\n\t\t\t\t \r\n\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n
\r\n\t\t\t\t\t\r\n\t\t\t\t\t{ this.props.buttonVisible !== undefined && this.props.buttonVisible ?\r\n\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t : null\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t\t this.check(e)}/>\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t* I have read and agree to the Terms of Use for SAP Ariba Connect, Copyright and processing of my personal data according to the SAP Ariba Privacy Statement
\r\n\t\t\t\t\t\r\n \r\n \t\t
\r\n\t\t\t\t\t {this.props.user.error}
\r\n\t\t\r\n\t\t)\r\n\t}\r\n\t\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tcontent: state.content.TermsAndConditions,\r\n\t\tvalidation: state.content.validation,\r\n\t\tuser: state.default\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tupdateConsent: (formValues) => dispatch(updateConsent(formValues)),\r\n\t\tuserConsentSuccess: (user) => dispatch(userConsentSuccess(user)),\r\n\t\tuserConsentFailure: (error) => dispatch(userConsentFailure(error)),\r\n\t\tresetError: () => dispatch(resetError())\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Terms)\r\n\r\n\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport Button from 'UI/Button'\r\nimport moment from 'moment'\r\nimport { Checkbox } from 'material-ui';\r\n\r\n// Actions\r\nimport {\r\n\tgetLatestPublishedReleaseFeatures,\r\n\tupdateUserConfirmation,\t\r\n\tuserConsentSuccess,\r\n\tuserConsentFailure,\r\n\tresetError\r\n} from 'actions/userActions'\r\n\r\n\r\nclass NewUpdate extends React.Component {\r\n\tconstructor(props) \r\n {\r\n\tsuper(props);\r\n\tthis.state = {\r\n\t\tdescription: [],\r\n\t\tchkbox: false\r\n\t}\r\n\tthis.redirect = this.redirect.bind(this)\r\n\tthis.getData = this.getData.bind(this)\t\r\n\tthis.hideModal=this.hideModal.bind(this);\r\n\t\r\n }\r\n\r\n componentDidMount(){\r\n\t this.getData()\r\n }\t\r\n\r\n getData(){\r\n\t this.props.getLatestPublishedReleaseFeatures()\r\n\t .then((result) => {\r\n\t\t this.setState({description: result.data.Result})\r\n\t }).catch((error) =>{\r\n\t\t this.props.userConsentFailure(error)\r\n\t })\r\n }\r\n\r\n hideModal()\r\n {\r\n\tthis.props.hideModal('newupdate');\r\n }\r\n\r\n \r\n\tredirect() {\r\n\t\tif (localStorage.getItem('role') !== null && localStorage.getItem('role').toUpperCase() === ('TRANSLATOR')) {\r\n\t\t\t\t\r\n\t\t\t\tthis.props.props.push({\r\n\t\t\t\t\tpathname: '/language-manager', validation: this.props.validation\r\n\t\r\n\t\t\t\t})\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis.props.props.push(`/start`)\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tcheck(e){\r\n\t\t\tif(e.target.checked){\r\n\t\t\t\tthis.props.onChecked(true);\r\n\t\t\t}\r\n\t\t\telse{\r\n\t\t\t\tthis.props.onChecked(false);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\trender(){\r\n\t\treturn(\r\n\t\t\r\n\t\t\r\n\t\t\t
\r\n\t\t)\r\n\t}\r\n\t\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tcontent: state.content.login,\r\n\t\tvalidation: state.content.validation,\r\n\t\tuser: state.default\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tupdateUserConfirmation: (formValues)=> dispatch(updateUserConfirmation(formValues)),\r\n\t\tgetLatestPublishedReleaseFeatures: (formValues) => dispatch(getLatestPublishedReleaseFeatures(formValues)),\t\t\r\n\t\tuserConsentSuccess: (user) => dispatch(userConsentSuccess(user)),\r\n\t\tuserConsentFailure: (error) => dispatch(userConsentFailure(error)),\r\n\t\tresetError: () => dispatch(resetError())\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(NewUpdate)\r\n\r\n\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport Button from 'UI/Button'\r\nimport { Form } from 'react-redux-form'\r\nimport { Link } from 'react-router-dom'\r\n// Actions\r\nimport {\r\n\tNewsletterAcceptanceUpdate,\r\n\tuserConsentSuccess,\r\n\tuserConsentFailure,\r\n\tresetError,\r\n\tnewsletterAcceptanceSuccess,\r\n\tnewsletterAcceptanceFailure\r\n} from 'actions/userActions'\r\n\r\n\r\n// Utils\r\nimport { Checkbox } from 'material-ui';\r\n\r\nvar aStyle ={\r\n\tcolor: 'blue'\r\n}\r\n\r\nclass NewsLetter extends React.Component {\r\n\tconstructor(props) \r\n {\r\n super(props);\r\n this.state = {\r\n\t\tchkbox: this.props.newsLetterCheck !== undefined ? this.props.newsLetterCheck : false\r\n\t}\r\n\tthis.isChecked = this.isChecked.bind(this);\r\n\tthis.check = this.check.bind(this);\r\n\tthis.redirect = this.redirect.bind(this)\r\n }\r\n\r\n isChecked(formValue){\r\n\t\t\tconst value = {\r\n\t\t\t\tUserID: localStorage.getItem('id'),\r\n\t\t\t\tAccepted: this.state.chkbox\r\n\t\t\t}\r\n\t\t\tthis.props.NewsletterAcceptanceUpdate(value)\r\n\t\t\t.then((result) => {\r\n\t\t\t\tthis.props.newsletterAcceptanceSuccess(result) \r\n\t\t\t\t//this.redirect()\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\t\t this.props.newsletterAcceptanceFailure(error.response.data.Message)\r\n\t\t\t})\r\n\t\t\tthis.redirect()\r\n\t}\r\n\r\n\tredirect() {\r\n\t\tif (localStorage.getItem('role') !== null && localStorage.getItem('role').toUpperCase() === ('TRANSLATOR')) {\r\n\t\t\t\t\r\n\t\t\t\tthis.props.props.push({\r\n\t\t\t\t\tpathname: '/language-manager', validation: this.props.validation\r\n\t\r\n\t\t\t\t})\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis.props.props.push(`/start`)\r\n\t\t\t}\r\n\t\t}\r\n\r\n\tcheck(e){\r\n\t\tif(e.target.checked){\r\n\t\t\tthis.setState({chkbox: true})\r\n\t\t}\t\t\r\n\t}\r\n\r\n\tdisagreeCheck(e){\r\n\t\tif(e.target.checked){\r\n\t\t\tthis.setState({chkbox: false})\r\n\t\t}\r\n\t\t\r\n\t}\r\n\r\n\trender(){\r\n\t\treturn(\r\n\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\r\n
\r\n\t\tWhat you need to know
\r\n\t\t\t\t\t{this.props.validation.publishedDate} {this.state.description.length>0 ? moment(this.state.description[0].VersionPublishedDate).format('L') : null}
\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t{this.state.description.map((data)=>\r\n\t\t\t\t\t\t- \r\n\t\t\t\t\t\t\t
- {data.ReleaseFeatureName} \r\n\t\t\t\t\t\t\t
- {data.ReleaseFeatureDescription} \r\n\t\t\t\t\t\t
- \r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\r\n
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t this.check(e)}/>\r\n\t\t\t\t\t
\r\n\t\t\t\t\t \r\n\t\t\t\t \t
\r\n\t\t\t\t\t\t\tDo not show me this again
\r\n\t\t\t\t \t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t{this.props.user.error}
\r\n\t\t\r\n\t\t\t
\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t
\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t
\r\n\t\t\t{this.props.user.error}
\r\n\t\t\r\n\t\t)\r\n\t}\r\n\t\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tcontent: state.content.NewsLetter,\r\n\t\tvalidation: state.content.validation,\r\n\t\tuser: state.default\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tNewsletterAcceptanceUpdate: (formValues) => dispatch(NewsletterAcceptanceUpdate(formValues)),\r\n\t\tnewsletterAcceptanceSuccess: (user) => dispatch(newsletterAcceptanceSuccess(user)),\r\n\t\tnewsletterAcceptanceFailure: (error) => dispatch(newsletterAcceptanceFailure(error)),\r\n\t\tresetError: () => dispatch(resetError())\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(NewsLetter)\r\n\r\n\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport { Link } from 'react-router-dom'\r\n//import Marquee from 'grand-marquee-react';\r\nimport Parser from 'html-react-parser'\r\n// Actions\r\nimport {\r\n\tsignInUser,\r\n\tcheckConsent,\r\n\tsignInUserSuccess,\r\n\tsignInUserFailure,\r\n\tuserConsentSuccess,\r\n\tuserConsentFailure,\r\n\tUpdateAcknowledgement,\r\n\tgetToken,\r\n\tresetError,\r\n\tPeriodicValidationPartnersUsers,\r\n\tcheckPasswordValidity,\r\n\tcheckNewsLetterAcceptance,\r\n\tnewsletterAcceptanceSuccess,\r\n\tnewsletterAcceptanceFailure\r\n} from 'actions/userActions'\r\n\r\nimport ChangePassword from 'components/Menu/ChangePassword'\r\nimport moment from 'moment'\r\n\r\n// Components\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\n\r\n// Utils\r\nimport { BreakLine, getCurrentLanguage } from 'utils/Utils'\r\n\r\n// Settings\r\nimport { modalStyle, modalContentStyle, routes, validators } from 'Constants'\r\n\r\nimport Modal from 'reboron/OutlineModal'\r\nimport Terms from './Terms'\r\nimport NewUpdate from './NewUpdate'\r\nimport NewsLetter from './NewsLetter'\r\nimport {\r\n\tperiodicEmailConfirmation,\r\n\tperiodicEmailConfirmationFailure,\r\n\tperiodicEmailConfirmationSuccess\r\n} from 'actions/userActions'\r\n\r\nclass LoginContainer extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.handleSignInUser = this.handleSignInUser.bind(this)\r\n\t\tthis.redirect = this.redirect.bind(this)\r\n\t\tthis.checkConsent = this.checkConsent.bind(this)\r\n\t\tthis.showModal = this.showModal.bind(this)\r\n\t\tthis.hideModal = this.hideModal.bind(this)\r\n\t\tthis.checkNewsLetterAcceptance = this.checkNewsLetterAcceptance.bind(this)\r\n\t\tthis.state = {\r\n\t\t\tenablePeriodicValidation: false,\r\n\t\t\temail: '',\r\n\t\t\tcounter: 2,\r\n\t\t\tlockUser: false,\r\n\t\t\tisPasswordValid: true,\r\n\t\t\tisCustomer: false\r\n\t\t}\r\n\t\tthis.PeriodicEmailConfirmation = this.PeriodicEmailConfirmation.bind(this)\r\n\t\tthis.checkPasswordValidity = this.checkPasswordValidity.bind(this)\r\n\t}\r\n\r\n\thandleSignInUser(values) {\r\n\t\tvar data = {};\r\n\t\tvar content = this.props.content;\r\n\t\tthis.setState({ email: values.Email })\r\n\t\tif (this.state.counter <= 0) {\r\n\t\t\tthis.setState({ lockUser: true })\r\n\t\t\tdata = {\r\n\t\t\t\tEmail: values.Email,\r\n\t\t\t\tPassword: values.Password,\r\n\t\t\t\tLockUser: true\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tdata = {\r\n\t\t\t\tEmail: values.Email,\r\n\t\t\t\tPassword: values.Password,\r\n\t\t\t\tLockUser: this.state.lockUser\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tthis.checkPasswordValidity(data)\r\n\t\tthis.props.signInUser(data)\r\n\t\t\t.then((result) => {\r\n\t\t\t\t// var userResponseForActivateion = false;\r\n\t\t\t\t// // if(result.data.Result.NextPeriodicValidationInDays !== null ){\r\n\t\t\t\t// // \t userResponseForActivateion = window.confirm('Account activation will expires in 10 days, Would you like to reactivate now?');\r\n\t\t\t\t// // \t // + result.data.Result.NextPeriodicValidationInDays + ' && result.data.Result.NextPeriodicValidationInDays > 0\r\n\t\t\t\t// // }\r\n\r\n\t\t\t\t// if (userResponseForActivateion) {\r\n\t\t\t\t// \tthis.props.PeriodicValidationPartnersUsers(values.Email)\r\n\t\t\t\t// \t\t.then((res) => {\r\n\t\t\t\t// \t\t\tthis.props.signInUserFailure(\"Kindly check registered email address for reactivation.\");\r\n\t\t\t\t// \t\t});\r\n\t\t\t\t// }\r\n\t\t\t\t// else\r\n\t\t\t\t// {\r\n\t\t\t\t\r\n\t\t\t\tif(result.data.Result.applicationUser) {\r\n\t\t\t\t\tresult.data.Result.applicationUser.isCustomer = result.data.Result.isCustomer\r\n\t\t\t\t}\r\n\t\t\t\tthis.props.signInUserSuccess(result);\r\n\t\t\t\t// Reset form\r\n\t\t\t\tthis.formDispatch(actions.reset('signIn'))\r\n\r\n\t\t\t\t// Store JWT Token\r\n\t\t\t\tlocalStorage.setItem('jwtToken', result.data.Result.applicationUser.Token)\r\n\t\t\t\tlocalStorage.setItem('role', result.data.Result.applicationUser.Role)\r\n\t\t\t\tlocalStorage.setItem('loggedinUser', result.data.Result.applicationUser.Email)\r\n\t\t\t\tlocalStorage.setItem('id', result.data.Result.applicationUser.Id)\r\n\t\t\t\tlocalStorage.setItem('daysRemainforReactivation', result.data.Result.NextPeriodicValidationInDays)\r\n\t\t\t\tsessionStorage.setItem('isCustomer', result.data.Result.isCustomer)\r\n\t\t\t\tlocalStorage.setItem('enablementInsightFlag', result.data.Result.enablementFlag)\r\n\t\t\t\t// const sessionValues = {\r\n\t\t\t\t// Email: result.data.Result.applicationUser.Email,\r\n\t\t\t\t// VSId: null\r\n\t\t\t\t// }\r\n\r\n\t\t\t\t// localStorage.setItem('sessionInfo', JSON.stringify(sessionValues))\r\n\r\n\t\t\t\t//check consent of user for terms and conditions\r\n\t\t\t\t//this.checkConsent()\r\n\t\t\t\tif(!this.state.isPasswordValid)\r\n {\r\n\t\t\t\t\tthis.props.resetError()\r\n\t\t\t\t\tthis.showModal(\"changePassword\")\t\t\t\t\t \r\n\t\t\t\t}\t\r\n\t\t\t\telse{\r\n\t\t\t\t\tthis.checkConsent()\t \r\n\t\t\t\t}\t\t\t\t\r\n\t\t\t\t// // Redirect to Start page\r\n\t\t\t\t//this.redirect()\r\n\t\t\t\t//}\r\n\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.message === \"Network Error\") {\r\n\t\t\t\t\tthis.props.signInUserFailure(\"API service is down. Please contact administrator.\")\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tvar errorMsg = content[error.response.data.Message];\r\n\t\t\t\t\tthis.setState((prevState, props) => ({\r\n\t\t\t\t\t\tcounter: prevState.counter - 1\r\n\t\t\t\t\t}));\r\n\t\t\t\t\tif (this.state.counter < 0) {\r\n\t\t\t\t\t\tif(error.response.status == \"501\"){\r\n\t\t\t\t\t\t\tvar errMsg = content[error.response.status]\t\r\n\t\t\t\t\t\t\tif(error.response.data.Message !== undefined){\t\t\t\t\t\t\r\n\t\t\t\t\t\t\tlocalStorage.setItem('LockoutEndDate', error.response.data.Message)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\tvar lockDate = localStorage.getItem('LockoutEndDate').split(\"-\");\t\r\n\t\t\t\t\t\t\tthis.props.signInUserFailure(errMsg.replace('%Date%', lockDate[1] ))\r\n\t\t\t\t\t\t\t// moment(new Date().toLocaleString()).format(\"YYYY-MM-DD HH:mm:ss\")))\t\t\t\t\t\t\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\telse{\r\n\t\t\t\t\t\tthis.props.signInUserFailure(content[error.response.status]);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t} else if (content[error.response.status] !== undefined && error.response.status !== \"501\" && errorMsg !== undefined) {\r\n\t\t\t\t\t\tthis.setState({ enablePeriodicValidation: true });\r\n\t\t\t\t\t\t//this.props.signInUserFailure(errorMsg)\r\n\t\t\t\t\t\tif(error.response.status == \"501\"){\r\n\t\t\t\t\t\t\tvar errMsg = content[error.response.status]\t\t\r\n\t\t\t\t\t\t\tif(error.response.data.Message !== undefined){\t\t\t\t\t\t\r\n\t\t\t\t\t\t\tlocalStorage.setItem('LockoutEndDate', error.response.data.Message)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\tvar lockDate = localStorage.getItem('LockoutEndDate').split(\"-\");\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\tthis.props.signInUserFailure(errMsg.replace('%Date%', lockDate[1] ))\r\n\t\t\t\t\t\t\t// moment(new Date().toLocaleString()).format(\"YYYY-MM-DD HH:mm:ss\")))\r\n\t\t\t\t\t\t}else{\r\n\t\t\t\t\t\t\tthis.props.signInUserFailure(content[error.response.status])\t\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t} else if (content[error.response.status] !== undefined) {\r\n\t\t\t\t\t\tthis.setState({ enablePeriodicValidation: false });\r\n\t\t\t\t\t\tthis.props.signInUserFailure(content[error.response.status])\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse {\r\n\t\t\t\t\t\tthis.props.signInUserFailure(error.response.data.Message);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t})\r\n\t}\r\n\r\n\tcheckConsent() {\r\n\t\tvar content = this.props.content;\r\n\t\tconst value = {\r\n\t\t\tUserID: localStorage.getItem('id')\r\n\t\t}\t\t\r\n\t\tthis.props.checkConsent(value)\r\n\t\t\t.then((result) => {\r\n\t\t\t\tthis.props.userConsentSuccess(result)\r\n\t\t\t\tif(!localStorage.getItem('loggedinUser').includes('sap.com') && sessionStorage.getItem('isCustomer') !== 'true')\r\n\t\t \t{\r\n\t\t\t\tthis.checkNewsLetterAcceptance()\r\n\t\t\t\t}\r\n\t\t\t\telse{\r\n\t\t\t\t\tthis.redirect()\r\n\t\t\t\t}\r\n\t\t\t\t//this.redirect()\r\n\t\t\t\t\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.response.status == 404) {\r\n\t\t\t\t\tthis.showModal(\"terms\")\r\n\t\t\t\t}\r\n\t\t\t\tthis.props.userConsentFailure(error.response.data.Message)\r\n\t\t\t})\r\n\t}\r\n\r\n\tcheckNewsLetterAcceptance(){\r\n\t\tconst value = {\r\n\t\t\tUserID: localStorage.getItem('id')\r\n\t\t}\t\t\r\n\t\tthis.props.checkNewsLetterAcceptance(value)\r\n\t\t\t.then((result) => {\r\n\t\t\t\tthis.setState({ newsLetterCheck : result.data.Result })\r\n\t\t\t\tthis.props.newsletterAcceptanceSuccess(result)\r\n\t\t\t\tthis.redirect()\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.response.status == 404) {\r\n\t\t\t\t\tthis.showModal(\"newsLetter\")\r\n\t\t\t\t}\r\n\t\t\t\tthis.props.newsletterAcceptanceFailure(error.response.data.Message)\r\n\t\t\t})\r\n\t}\r\n\r\n\tshowModal(action) {\r\n\t\tthis.refs[action].show()\r\n\t\t}\r\n\r\n\thideModal(action) {\r\n\t\tconst value = {\r\n\t\t\tUserID: localStorage.getItem('id'),\r\n\t\t\tAccepted: true\r\n\t\t}\r\n\t\tthis.props.UpdateAcknowledgement(value)\r\n\t\t\t.then((result) => {\r\n\t\t\t\tthis.props.userConsentSuccess(result)\r\n\t\t\t\tthis.redirect()\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tthis.props.userConsentFailure(error.response.data.Message)\r\n\t\t\t})\r\n\t\tthis.refs[action].hide()\r\n\t}\r\n\r\n\tcheckPasswordValidity(param){\r\n\t\tconst value = {\r\n\t\t\tUserID: param.Email\r\n\t\t}\r\n\t\tthis.props.checkPasswordValidity(value)\r\n\t\t\t.then((result) => {\r\n\t\t\t\tthis.props.userConsentSuccess(result)\r\n\r\n\t\t\t\tthis.setState({isPasswordValid : result.data.Result})\r\n\t\t\t\t\r\n\t\t\t}).catch((error) => {\t\t\t\t\r\n\t\t\t\tthis.props.userConsentFailure(error.response.data.Message)\r\n\t\t\t})\r\n\t}\r\n\r\n\tredirect() {\r\n\t\tthis.props.history.push(`/start`)\r\n\t\t\r\n\t\t/// To show start page as Translator will be the SAP user and will show everything to that user \r\n\r\n\t\t// if (localStorage.getItem('role') !== null && localStorage.getItem('role').toUpperCase() === ('TRANSLATOR')) {\r\n\r\n\t\t// \t\tthis.props.history.push({\r\n\t\t// \t\t\tpathname: '/language-manager', validation: this.props.validation\r\n\r\n\t\t// \t\t})\r\n\t\t// \t}\r\n\t\t// \telse {\r\n\r\n\t\t// \t}\r\n\t}\r\n\r\n\tcomponentWillUnmount() {\r\n\t\tthis.formDispatch(actions.reset('signIn'))\r\n\t\tthis.props.resetError()\r\n\t}\r\n\r\n\tPeriodicEmailConfirmation() {\r\n\t\tlet language = getCurrentLanguage()\r\n\r\n\t\tif (language === undefined || language === 'undefined' || language === '') {\r\n\t\t\tlanguage = 'en'\r\n\t\t}\r\n\t\tlet values = { Email: this.state.email, Language: language };\r\n\r\n\t\tvar content = this.props.content\r\n\r\n\t\tthis.props.periodicEmailConfirmation(values)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tthis.setState({ enablePeriodicValidation: false })\r\n\t\t\t\tthis.props.periodicEmailConfirmationSuccess(content[response.status])\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tthis.props.periodicEmailConfirmationFailure(content[error.response.status])\r\n\t\t\t})\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tcontent: state.content.login,\r\n\t\tvalidation: state.content.validation,\r\n\t\tuser: state.default\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tsignInUser: (formValues) => dispatch(signInUser(formValues)),\r\n\t\tcheckConsent: (formValues) => dispatch(checkConsent(formValues)),\r\n\t\tUpdateAcknowledgement: (formValues) => dispatch(UpdateAcknowledgement(formValues)),\r\n\t\tsignInUserSuccess: (user) => dispatch(signInUserSuccess(user)),\r\n\t\tsignInUserFailure: (error) => dispatch(signInUserFailure(error)),\r\n\t\tuserConsentSuccess: (user) => dispatch(userConsentSuccess(user)),\r\n\t\tuserConsentFailure: (error) => dispatch(userConsentFailure(error)),\r\n\t\tgetToken: (username) => dispatch(getToken(username)),\r\n\t\tresetError: () => dispatch(resetError()),\r\n\t\tPeriodicValidationPartnersUsers: (email) => dispatch(PeriodicValidationPartnersUsers(email)),\r\n\t\tperiodicEmailConfirmation: (email) => dispatch(periodicEmailConfirmation(email)),\r\n\t\tperiodicEmailConfirmationSuccess: (bool) => dispatch(periodicEmailConfirmationSuccess(bool)),\r\n\t\tperiodicEmailConfirmationFailure: (error) => dispatch(periodicEmailConfirmationFailure(error)),\r\n\t\tcheckPasswordValidity: (formValues) => dispatch(checkPasswordValidity(formValues)),\r\n\t\tcheckNewsLetterAcceptance: (formValues) => dispatch(checkNewsLetterAcceptance(formValues)),\r\n\t\tnewsletterAcceptanceSuccess: (user) => dispatch(newsletterAcceptanceSuccess(user)),\r\n\t\tnewsletterAcceptanceFailure: (error) => dispatch(newsletterAcceptanceFailure(error))\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LoginContainer)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Link, Route, Redirect } from 'react-router-dom'\r\nimport PropTypes from 'prop-types'\r\n\r\n// Components\r\nimport Button from 'UI/Button'\r\n\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\n\r\nimport { routes } from 'Constants'\r\n\r\nexport class ActivationContainer extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\r\n\t\t\t\t{BreakLine(this.props.content.title)}
\r\n\t\t\t\t\t\t this.formDispatch = dispatch}\r\n\t\t\t\t\t\t\tmethod=\"post\" onSubmit={(values) => this.handleSignInUser(values)}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t- \r\n\t\t\t\t\t\t\t\t
- {this.props.content.register} \r\n\t\t\t\t\t\t\t\t
- {this.props.content.forgotPassword} \r\n\t\t\t\t\t\t\t\t
- {this.props.content.help} \r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\t(this.state.enablePeriodicValidation) ?\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t{this.props.content.periodicErrorMessage}\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t: - \r\n\t\t\t\t\t\t\t\t\t\t\t\t
- \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t this.PeriodicEmailConfirmation(event)}> {Parser(this.props.content.periodicValidationLink)} \r\n\t\t\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\t\t
{this.props.user.error}
\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tcontent: state.content.activation\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps)(ActivationContainer)\r\n\r\nActivationContainer.propTypes = {\r\n\tcontent: PropTypes.shape({\r\n\t\ttitle: PropTypes.string,\r\n\t\tdescription: PropTypes.string\r\n\t})\r\n}\r\n","import React, { Component } from 'react'\r\nimport { Link } from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n\r\n// Actions\r\nimport {\r\n\tforgotPassword,\r\n\tforgotPasswordFailure,\r\n\tforgotPasswordSuccess,\r\n\tresetError\r\n}\r\n\tfrom 'actions/userActions'\r\n\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\n\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\n\r\n// Settings\r\nimport { validators, routes } from 'Constants'\r\n\r\nclass ForgotPasswordContainer extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = {\r\n\t\t\tsuccess: false\r\n\t\t}\r\n\r\n\t\tthis.forgotPassword = this.forgotPassword.bind(this)\r\n\t}\r\n\r\n\tforgotPassword(formValues) {\r\n\t\tlet values = Object.assign({}, formValues)\r\n\t\tvalues.Language = this.props.language.toUpperCase()\r\n\t\tvar content = this.props.content\r\n\r\n\t\tthis.props.forgotPassword(values)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tthis.props.forgotPasswordFailure(content[response.status])\r\n\t\t\t\t//this.setState({ success: true })\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.response.status == 401) {\r\n\t\t\t\t\tthis.props.forgotPasswordSuccess(content[error.response.status])\r\n\t\t\t\t}\r\n\t\t\t\tthis.props.forgotPasswordFailure(content[error.response.data.Message])\r\n\t\t\t})\r\n\t}\r\n\r\n\tcomponentWillUnmount() {\r\n\t\tthis.formDispatch(actions.reset('forgotPassword'))\r\n\t\tthis.props.resetError()\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t \r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t{BreakLine(this.props.content.title)}
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t{BreakLine(this.props.content.description)}
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t{\r\n\t\t\t\t\tthis.state.success ?\r\n\t\t\t\t\t\t(\r\n\t\t\t\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tui: state.content.ui,\r\n\t\tuser: state.default,\r\n\t\tcontent: state.content.forgotPassword,\r\n\t\tvalidation: state.content.validation\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tforgotPassword: (email) => dispatch(forgotPassword(email)),\r\n\t\tforgotPasswordSuccess: (bool) => dispatch(forgotPasswordSuccess(bool)),\r\n\t\tforgotPasswordFailure: (error) => dispatch(forgotPasswordFailure(error)),\r\n\t\tresetError: () => dispatch(resetError())\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ForgotPasswordContainer)\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n\r\n// Actions\r\nimport {\r\n\tresetPassword,\r\n\tresetPasswordSuccess,\r\n\tresetPasswordFailure,\r\n\tfetchUserDetails,\r\n\tfetchUserDetailsSuccess\r\n}\r\n\tfrom 'actions/userActions'\r\n\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\n\r\n// Utils\r\nimport { getParameterByName } from 'utils/Utils'\r\n\r\n// Settings\r\nimport { validators } from 'Constants'\r\n\r\nconst styles = { width: '70%' }\r\n\r\nclass ResetPasswordContainer extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t\tthis.state = {\r\n\t\t\tuserData: {\r\n\t\t\t\tFirstName: 'FirstName',\r\n\t\t\t\tLastName: 'LastName',\r\n\t\t\t\tCompany: 'Company'\t\t\t\t\r\n\t\t\t}\r\n\t\t}\r\n\t\tthis.resetPassword = this.resetPassword.bind(this)\r\n\t}\r\n\r\n\tresetPassword(formValues) {\r\n\t\tlet values = Object.assign({}, formValues)\r\n\t\tvalues.Language = this.props.language.toUpperCase()\r\n\t\tvalues.LoginUser = this.props.user.user.Id\r\n\t\tlet content = this.props.content\r\n\t\tthis.props.resetPassword(values)\r\n\t\t\t.then((result) => {\r\n\t\t\t\tif (result.status === 200) {\r\n\t\t\t\t\tthis.props.resetPasswordSuccess(content[result.status])\r\n\t\t\t\t\t// Reset form\r\n\t\t\t\t\tthis.formDispatch(actions.reset('resetPassword'))\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tthis.props.resetPasswordFailure(error.response.data.Message)\r\n\t\t\t})\r\n\t}\r\n\r\n\tfetchUserDetails(e)\r\n\t{\t\r\n\t\tthis.props.fetchUserDetails(e.target.defaultValue)\r\n\t\t\t.then((result) => {\r\n\t\t\t\tif (result.status === 200) {\r\n\t\t\t\t\tconsole.log(result.data.Result);\r\n\t\t\t\t\tthis.setState({userData: result.data.Result})\r\n\t\t\t\t\tthis.props.fetchUserDetailsSuccess(result.data.Result)\t\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tthis.props.resetPasswordFailure(error.response.data.Message)\r\n\t\t\t})\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t{BreakLine(this.props.content.success.title)}
\r\n\t\t\t\t\t\t\t\t\t{this.props.content.success.description}
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t)\r\n\t\t\t\t}\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t\t this.formDispatch = dispatch}\r\n\t\t\t\t\t\t\t\t\t\tonSubmit={(values) => this.forgotPassword(values)}\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t{this.props.content.title}
\r\n\t\t\t\t\t\t\t\t\t{BreakLine(this.props.content.description)}
\r\n\t\t\t\t\t\t\t\t\t{this.props.user.error}
\r\n\t\t\t\t\t\t\t\t\t{this.props.ui.login}\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tui: state.content.ui,\r\n\t\tuser: state.default,\r\n\t\tcontent: state.content.resetPassword,\r\n\t\tvalidation: state.content.validation\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tresetPassword: (email) => dispatch(resetPassword(email)),\r\n\t\tresetPasswordSuccess: (message) => dispatch(resetPasswordSuccess(message)),\r\n\t\tresetPasswordFailure: (error) => dispatch(resetPasswordFailure(error))\r\n\t\t,fetchUserDetails: (email) => dispatch(fetchUserDetails(email)),\r\n\t\tfetchUserDetailsSuccess: (message) =>dispatch(fetchUserDetailsSuccess(message))\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ResetPasswordContainer)","import React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Modal from 'reboron/OutlineModal'\r\nimport { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';\r\nimport { modalStyle, modalContentStyle } from 'Constants'\r\nconst videoControlModalContentStyle = Object.assign({}, modalContentStyle);\r\nvideoControlModalContentStyle.padding = \"15px\";\r\nconst videoControlModalStyle = Object.assign({}, modalStyle);\r\nvideoControlModalStyle.width = \"95vw\";\r\nvideoControlModalStyle.height = \"95vh\";\r\nvideoControlModalStyle.maxWidth = \"95vw\";\r\n//videoControlModalStyle.maxWidth = \"1400px\";\r\n\r\nconst styles = {\r\n block: {\r\n maxWidth: 250,\r\n },\r\n radioButton: {\r\n marginBottom: 16,\r\n },\r\n};\r\n\r\nclass Video extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n currentVideo: {},\r\n videoDetails: { title: '', videos: [] }\r\n }\r\n\r\n this.selectVideo = this.selectVideo.bind(this)\r\n }\r\n\r\n selectVideo(item) {\r\n this.setState({ currentVideo: item })\r\n }\r\n\r\n render() {\r\n let currentVideo = this.state.currentVideo;\r\n if (!currentVideo.file && this.props.videoDetails.videos.length > 0) {\r\n currentVideo = this.props.videoDetails.videos[0]\r\n }\r\n return (\r\n \r\n\t\t\t\t\t
\r\n\t\t\t{this.props.content.title}
\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tthis.props.user.status !== 'password_reset' ?\r\n\t\t\t\t\t\t\t(\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t this.resetPassword(values)}\r\n\t\t\t\t\t\t\t\t\t\tgetDispatch={(dispatch) => this.formDispatch = dispatch}\r\n\t\t\t\t\t\t\t\t\t\tvalidators={{\r\n\t\t\t\t\t\t\t\t\t\t\t'': { passwordsMatch: (vals) => vals.Password === vals.ConfirmPassword\r\n\t\t\t\t\t\t\t\t\t\t\t\t,charMatch: (vals) => (vals.Password.toLowerCase().indexOf(this.state.userData.FirstName.toLowerCase())=== -1 && vals.Password.toLowerCase().indexOf(this.state.userData.LastName.toLowerCase())=== -1 \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t&& vals.Password.toLowerCase().indexOf(this.state.userData.Company.toLowerCase()) === -1)\r\n\t\t\t\t\t\t\t\t\t\t\t\t }\r\n\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\tthis.fetchUserDetails(e)}\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t) :\r\n\t\t\t\t\t\t\t(\r\n\t\t\t\t\t\t\t\t{this.props.content.description}
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t{this.props.user.error}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t}\r\n\t\t\t\t{this.props.user.message}
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n {this.refs.videoControl ? this.props.open ?\r\n this.refs.videoControl.show() :\r\n this.refs.videoControl.hide() : ''}\r\n {\r\n if (e === 'backdrop') {\r\n this.props.visibility(false)\r\n }\r\n }}\r\n >\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n //content: state.content,\r\n //ui: state.content.ui,\r\n user: state.default,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n \r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Video); ","import React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Video from 'components/UI/Video'\r\nimport classNames from \"classnames\";\r\nimport {\r\n fetchScreenVideosForUser\r\n} from 'actions/videoRoleAction';\r\n\r\nclass VideoHelp extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n open: false,\r\n counter: 1,\r\n videoDetails: { title: '', videos: [] }\r\n }\r\n\r\n this.hideVideo = this.hideVideo.bind(this)\r\n this.showVideo = this.showVideo.bind(this)\r\n this.blink = this.blink.bind(this)\r\n this.clearBlink = this.clearBlink.bind(this)\r\n\r\n this.blinkInterval = setInterval(this.blink, 1000);\r\n setTimeout(this.clearBlink, 10 * 1000)\r\n }\r\n\r\n componentDidMount() {\r\n this.props.fetchScreenVideosForUser(this.props.user.user.Id).then((response) => {\r\n if (response.data.Result.length > 0) {\r\n const videos = []\r\n const filter = response.data.Result.filter(element => {\r\n return element.ScreenVideoRoles.length != 0 &&\r\n (element.Module === this.props.screen.module && element.ScreenName === this.props.screen.screenName)\r\n })\r\n\r\n filter.forEach(item => {\r\n videos.push({\r\n name: item.Name,\r\n desc: item.Description,\r\n file: item.SourceType ? \"/videos/\" + item.VideoSource : item.VideoSource,\r\n sourceType: item.SourceType,\r\n order: item.Order\r\n })\r\n })\r\n\r\n videos.sort((a, b) => {\r\n return a.order > b.order ? 1 : a.order < b.order ? -1 : 0;\r\n })\r\n\r\n this.setState({ videoDetails: { title: this.props.screen.screenName, videos: videos } });\r\n }\r\n })\r\n }\r\n\r\n blink() {\r\n this.setState(prevState => {\r\n return {counter: prevState.counter + 1}\r\n })\r\n }\r\n\r\n clearBlink() {\r\n this.setState({counter: 1})\r\n clearInterval(this.blinkInterval);\r\n }\r\n\r\n hideVideo() {\r\n\t\tthis.setState({open: false})\r\n\t}\r\n\r\n\tshowVideo() {\r\n\t\tthis.setState({open: true})\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n {this.showVideo()}} className={classNames('hand-cursor', 'img-32', 'video-help',\r\n {\r\n 'opacity0': this.state.counter % 2 === 0,\r\n 'display-none': this.state.videoDetails.videos.length === 0,\r\n\r\n })}\r\n >\r\n
\r\n \r\n
\r\n {this.props.videoDetails.title}
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {this.props.videoDetails.videos.map((item, idx) => {\r\n return \r\n
\r\n {item.name}
{item.desc}
}\r\n style={styles.radioButton}\r\n onClick={(e) => this.selectVideo(item)} />\r\n })}\r\n \r\n {currentVideo.sourceType ? : }\r\n
\r\n {this.props.ui.needHelp}\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n user: state.default,\r\n ui: state.content.ui,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchScreenVideosForUser: (user) => dispatch(fetchScreenVideosForUser(user)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(VideoHelp); ","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Link } from 'react-router-dom'\r\n\r\n// Components\r\nimport ValueStoryContainer from 'ValueStory/ValueStoryContainer'\r\nimport { modalStyle, modalContentStyle, routes, validators } from 'Constants'\r\nimport Button from 'UI/Button'\r\n\r\nimport Modal from 'reboron/OutlineModal'\r\nimport NewUpdate from '../Login/NewUpdate'\r\nimport MyWorkContainer from '../ValueStory/MyWorkContainer'\r\nimport SharedValueStories from 'ValueStory/SharedValueStories';\r\nimport classNames from \"classnames\";\r\n\r\n// Actions\r\nimport {\r\n\tcheckUserConfirmation,\r\n\tgetLatestPublishedReleaseFeatures,\r\n\tuserConsentSuccess,\r\n\tuserConsentFailure,\r\n\tupdateUserConfirmation,\r\n\tresetError,\r\n\tresetMessage\r\n} from 'actions/userActions'\r\nimport { valueStoryFetchDataSuccess } from 'actions/fetchValueStory'\r\nimport { isNewValueStory } from 'actions/searchActions'\r\nimport VideoHelp from 'components/UI/VideoHelp'\r\n\r\nconst autoHeightModalStyle = Object.assign({}, modalStyle)\r\nautoHeightModalStyle.height = 'auto'\r\n\r\nconst valueStoryModalStyle = Object.assign({}, modalStyle);\r\nvalueStoryModalStyle.width = \"60%\";\r\nvalueStoryModalStyle.maxWidth = \"1250px\";\r\nvalueStoryModalStyle.height = \"515px\";\r\n\r\nconst valueStoryContentModalStyle = Object.assign({}, modalContentStyle);\r\nvalueStoryContentModalStyle.paddingTop = \"20px\";\r\nvalueStoryContentModalStyle.paddingLeft = \"30px\";\r\nvalueStoryContentModalStyle.paddingRight = \"30px\";\r\nvalueStoryContentModalStyle.paddingBottom = \"10px\";\r\n\r\n\r\nclass StartContainer extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = {\r\n\t\t\treleaseVersionId: '',\r\n\t\t\tcheckCheckbox: false,\r\n\t\t\topen: false\r\n\t\t}\r\n\r\n\t\t//this.checkUserConfirmation = this.checkUserConfirmation.bind(this)\r\n\t\t//this.getLatestPublishedReleaseFeatures = this.getLatestPublishedReleaseFeatures.bind(this)\r\n\t\tthis.showModal = this.showModal.bind(this)\r\n\t\tthis.hideModal = this.hideModal.bind(this)\r\n\t\tthis.actions = this.getApplicationFeatureActions();\r\n\t}\r\n\tcomponentDidMount() {\r\n\t\tthis.getLatestPublishedReleaseFeatures();\r\n\t\tlet initialData = []\r\n\t\tif (this.props.userData !== null && this.props.userData !== undefined) {\r\n\t\t\tlet arr = [{\r\n\t\t\t\tOrganization: '', Industry: '', Location: '0', AnnualRevenue: null, TotalSpend: '0', CapIQId: '',\r\n\t\t\t\tCapIQCompany: '', GlobalUltimateId: '', GlobalUltimateCompany: '', BPId: '', BPCompany: '',\r\n\t\t\t\tPEId: '', PECompany: '', CurrencyCode: 'USD', BusinessValueFromSap: this.props.userData.BusinessValueFromSap,\r\n\t\t\t\tBusinessValueToYou: this.props.userData.BusinessValueToYou, AreaOfInterest: this.props.userData.AreaOfInterest,\r\n\t\t\t\tAllowEdit: this.props.userData.AllowEdit, ValueStoryType: ''\r\n\t\t\t}]\r\n\t\t\tinitialData = {...arr}\r\n\t\t}\r\n\t\telse {\r\n\t\t\tlet arr = [{\r\n\t\t\t\tOrganization: '', Industry: '', Location: '0', AnnualRevenue: null, TotalSpend: '0', CapIQId: '',\r\n\t\t\t\tCapIQCompany: '', GlobalUltimateId: '', GlobalUltimateCompany: '', BPId: '', BPCompany: '',\r\n\t\t\t\tPEId: '', PECompany: '', CurrencyCode: 'USD', AllowEdit: true, ValueStoryType: ''\r\n\t\t\t}]\r\n\t\t\tinitialData = {...arr}\r\n\t\t}\r\n\t\tconst companyData = initialData[0];\r\n\t\tthis.props.valueStoryFetchDataSuccess(companyData);\r\n\t\tthis.props.isNewValueStory(true);\r\n\t}\r\n\r\n\tcheckUserConfirmation() {\r\n\t\tconst value = {\r\n\t\t\tUserID: localStorage.getItem('id'),\r\n\t\t\tReleaseVersionId: this.state.releaseVersionId\r\n\t\t}\r\n\t\tthis.props.checkUserConfirmation(value)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tthis.props.userConsentSuccess(response)\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.response.status == 404) {\r\n\t\t\t\t\tthis.showModal(\"newupdate\")\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t}\r\n\r\n\thandleCheckbox = (checkboxValue) => {\r\n\t\tthis.setState({ checkCheckbox: checkboxValue });\r\n\t}\r\n\r\n\tgetLatestPublishedReleaseFeatures() {\r\n\t\tthis.props.getLatestPublishedReleaseFeatures()\r\n\t\t\t.then((response) => {\r\n\t\t\t\tthis.props.userConsentSuccess(response.data.Message)\r\n\t\t\t\tfor (var i = 0; i < response.data.Result.length; i++) {\r\n\t\t\t\t\tvar obj = response.data.Result[i];\r\n\r\n\t\t\t\t\tif (obj != null) {\r\n\t\t\t\t\t\tthis.setState({ releaseVersionId: obj.ReleaseVersionID })\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\tthis.checkUserConfirmation();\r\n\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\tthis.props.userConsentFailure()\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\t//this.props.userConsentFailure(error.response.data.Message) \r\n\t\t\t\t}\r\n\t\t\t})\r\n\t}\r\n\r\n\r\n\tshowModal(action) {\r\n\t\tthis.refs[action].show()\r\n\t}\r\n\r\n\thideModal(action) {\r\n\t\tif (this.state.checkCheckbox) {\r\n\t\t\tconst value = {\r\n\t\t\t\tUserID: localStorage.getItem('id'),\r\n\t\t\t\tReleaseVersionId: this.state.releaseVersionId,\r\n\t\t\t\tIsConfirmed: true\r\n\t\t\t}\r\n\t\t\tthis.props.updateUserConfirmation(value)\r\n\t\t\t\t.then((result) => {\r\n\t\t\t\t\tthis.props.userConsentSuccess(result)\r\n\t\t\t\t}).catch((error) => {\r\n\t\t\t\t\tthis.props.userConsentFailure(error.response.data.Message)\r\n\t\t\t\t})\r\n\t\t\tthis.refs[action].hide()\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.refs[action].hide()\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentWillUnmount(){\r\n\t\tthis.props.resetError();\r\n\t\tthis.props.resetMessage();\t\t\r\n\t}\r\n\r\n\tgetApplicationFeatureActions() {\r\n\t\tlet actions = [];\r\n\t\tlet applicationFeatures = this.props.user && this.props.user.user && this.props.user.user.applicationFeatures ? this.props.user.user.applicationFeatures : [];\r\n\t\tapplicationFeatures.map(applicationFeat => {\r\n\t\t\tactions.push(applicationFeat.Action);\r\n\t\t})\r\n\t\treturn actions;\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst isCustomer = sessionStorage.getItem('isCustomer') === 'true'\r\n\t\treturn (\r\n\t\t\tisCustomer ? \r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tuser: state.default,\r\n\t\tcontent: state.content.start,\r\n\t\tuserData: state.valueStory,\r\n\t\tmenu: state.content.menu\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tupdateUserConfirmation: (formValues) => dispatch(updateUserConfirmation(formValues)),\r\n\t\tcheckUserConfirmation: (formValues) => dispatch(checkUserConfirmation(formValues)),\r\n\t\tgetLatestPublishedReleaseFeatures: (formValues) => dispatch(getLatestPublishedReleaseFeatures(formValues)),\r\n\t\tuserConsentSuccess: (user) => dispatch(userConsentSuccess(user)),\r\n\t\tuserConsentFailure: (error) => dispatch(userConsentFailure(error)),\r\n\t\tresetError: () => dispatch(resetError()),\r\n\t\tvalueStoryFetchDataSuccess: (valueStory) => dispatch(valueStoryFetchDataSuccess(valueStory)),\r\n\t\tisNewValueStory: (bool) => dispatch(isNewValueStory(bool)),\r\n\t\tresetMessage: () => dispatch(resetMessage())\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(StartContainer)\r\n","// Store\r\nimport { store } from 'index'\r\n\r\n// Actions\r\nimport {\r\n\ttoggleValueDriver,\r\n\ttoggleSubLever\r\n} from 'actions/valueDriverActions'\r\n\r\nimport { getSubLeverIdObject } from 'utils/Utils'\r\n\r\n// Settings\r\nimport { industryBusinessMatrix, LAC } from 'Constants'\r\n\r\nexport const subLeverChange = (subQuestion, arr, checkMappedPriorities = false) => {\r\n\tarr.forEach(data => {\r\n\r\n\t\tlet state = store.getState(),\r\n\t\t\tuserData = state.valueStory\r\n\r\n\t\tlet subLeverSwitch = null,\r\n\t\t\tvalueDriverSwitch = false,\r\n\t\t\tsubLeverIdObject\r\n\r\n\t\t// // Check values of all mapped priorities levels for the Sub Lever\r\n\t\t// subLeverSwitch = data.mappedPriorities.some((e) => {\r\n\t\t// \t// Turn Sub Lever on if any mapped priority is above \"High\"(>= 4, index starts from 1) and the Area Of Interest it falls under has been selected by the user\r\n\t\t// \tif (userData.AreaOfInterest[e.prioritiesId].Selected) {\r\n\t\t// \t\treturn userData.AreaOfInterest[e.prioritiesId].AOIValueDrivers[e.priorityIndex].Value >= 4\r\n\t\t// \t}\r\n\t\t// })\r\n\r\n\t\t// // Check values of all mapped priorities levels for the Sub Lever\r\n\t\t// subLeverSwitch = data.mappedPriorities.some((e) => {\r\n\t\t// \t// Turn Sub Lever on if any mapped priority is above \"High\"(>= 4, index starts from 1) and the Area Of Interest it falls under has been selected by the user\r\n\r\n\t\t// \tvar index = 0\r\n\t\t// \tif (userData.AreaOfInterest[e.prioritiesId].Selected) {\r\n\t\t// \t\tif (subQuestion !== '') {\r\n\t\t// \t\t\tuserData.AreaOfInterest[e.prioritiesId].AOIValueDrivers.map((data, x) => {\r\n\t\t// \t\t\t\tif (data.SubItem == subQuestion) {\r\n\t\t// \t\t\t\t\tindex = x\r\n\t\t// \t\t\t\t}\r\n\t\t// \t\t\t})\r\n\t\t// \t\t\treturn userData.AreaOfInterest[e.prioritiesId].AOIValueDrivers[index].Value >= 4\r\n\t\t// \t\t}\r\n\t\t// \t\telse {\r\n\t\t// \t\t\treturn userData.AreaOfInterest[e.prioritiesId].AOIValueDrivers[e.priorityIndex].Value >= 4\r\n\t\t// \t\t}\r\n\t\t// \t}\r\n\t\t// })\r\n\r\n\t\tif (!checkMappedPriorities) {\r\n\t\t\t// Reset subLeverSwitch value to null if not true\r\n\t\t\tif (subLeverSwitch !== true) subLeverSwitch = null\r\n\t\t}\r\n\r\n\t\tsubLeverIdObject = getSubLeverIdObject(data)\r\n\r\n\t\t// Do not turn on Reduce Inventory Levels,\r\n\t\t// Extend Days Payable Outstanding or\r\n\t\t// Reduce Cost Of Processing payments sub levers\r\n\t\t// if selected Industry/Location matches\r\n\t\tif ((!industryBusinessMatrix[userData.Industry].extendDaysPayableOutstanding\r\n\t\t\t&& data === '4.3'/* && subLeverSwitch != true*/) ||\r\n\t\t\t(!industryBusinessMatrix[userData.Industry].reduceInventoryLevels\r\n\t\t\t\t&& data === '4.4'/* && subLeverSwitch != true*/)\r\n\t\t\t/*||(LAC.indexOf(userData.Location) > -1 && data.id === '3.3')*/\r\n\t\t) {\r\n\t\t\tsubLeverSwitch = false\r\n\t\t}\r\n\r\n\t\t// Dispatch to Redux\r\n\t\tif (subLeverSwitch !== null) store.dispatch(toggleSubLever(subLeverIdObject, subLeverSwitch))\r\n\r\n\r\n\t\tsetTimeout(() => {\r\n\t\t\t// Update userData\r\n\t\t\tlet state = store.getState(),\r\n\t\t\t\tuserData = state.valueStory\r\n\r\n\t\t\t// Check selected state of sibling Sub Levers and mapped Sub Lever\r\n\t\t\t// If none are selected, set selected state of parent Value Driver to false\r\n\t\t\tlet valueDriverSwitch;\r\n\t\t\tif (userData.BusinessValueToYou != undefined) {\r\n\t\t\t\tvalueDriverSwitch = userData.BusinessValueToYou[0].ValueDriver[subLeverIdObject.BVUIdIndex].SubLever.some((e) => {\r\n\t\t\t\t\treturn e.Selected === true || subLeverSwitch\r\n\t\t\t\t})\r\n\t\t\t\t// Dispatch to Redux\r\n\t\t\t\tstore.dispatch(toggleValueDriver(subLeverIdObject.BVUIdIndex, valueDriverSwitch))\r\n\t\t\t}\r\n\r\n\t\t}, 1)\r\n\t})\r\n}","//\r\n//\r\n//\r\n//\r\n// <- This code is no longer used ->\r\n//\r\n//\r\n//\r\n//\r\nimport React from 'react';\r\nimport { connect } from 'react-redux'\r\nimport CheckboxTree from 'react-checkbox-tree';\r\nimport Button from 'UI/Button'\r\nimport { GoPlus, GoMail, GoDash } from \"react-icons/lib/go\";\r\nimport { RadioButton } from 'material-ui';\r\nimport ScrollArea from 'react-scrollbar'\r\n\r\nclass TreeView extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: props.data,\r\n peArray: [],\r\n bpArray: [],\r\n flag: false,\r\n index: -1,\r\n peChecked: false,\r\n bpChecked: false,\r\n peCheckIndex: -1,\r\n bpCheckIndex: -1,\r\n companyName: []\r\n }\r\n this.loadPE_Data = this.loadPE_Data.bind(this)\r\n this.fetchDataForBP_ID = this.fetchDataForBP_ID.bind(this);\r\n this.PE_RadioButtonChecked = this.PE_RadioButtonChecked.bind(this);\r\n this.BP_RadioButtonChecked = this.BP_RadioButtonChecked.bind(this);\r\n this.save = this.save.bind(this)\r\n }\r\n\r\n componentWillReceiveProps(NextProps) {\r\n if (NextProps.data != this.state.data) {\r\n this.setState({ data: NextProps.data }, this.loadPE_Data)\r\n }\r\n }\r\n\r\n save() {\r\n if (this.state.peChecked || this.state.bpChecked) {\r\n this.props.radioButtonClicked(this.state.companyName)\r\n }\r\n\r\n this.props.close();\r\n }\r\n\r\n componentWillMount() {\r\n this.loadPE_Data()\r\n //this.fetchDataForBP_ID()\r\n }\r\n\r\n //still need to think on this \r\n fetchDataForBP_ID(e) {\r\n let peId = e.currentTarget.attributes.value.nodeValue;\r\n let data = this.props.firstSearchResult;\r\n let results = data.filter(item => item.PE_ID == peId)\r\n const uniqueObj = [];\r\n const map = new Map();\r\n for (const item of results) {\r\n if (!map.has(item.ORG_ID)) {\r\n map.set(item.ORG_ID, true); // set any value to Map\r\n uniqueObj.push({ item });\r\n }\r\n }\r\n let temp = this.state.data;\r\n\r\n temp.forEach(item => {\r\n if (item.item.PE_ID == peId && item.flag == false) {\r\n item.flag = true\r\n } else {\r\n item.flag = false\r\n }\r\n })\r\n this.setState({ bpArray: uniqueObj, data: temp, flag: !this.state.flag, index: e.currentTarget.id }, this.loadPE_Data)\r\n }\r\n\r\n PE_RadioButtonChecked(e) {\r\n var companyName = [];\r\n var peData = this.state.data.find(item => item.item.PE_ID == e.currentTarget.id)\r\n peData.item.COMPANY_SOURCE = 'PE';\r\n companyName.push({ 'name': peData.item.PE_NAME, 'id': peData.item.PE_ID, 'flag': 'PE', 'data': peData.item })\r\n //After this send the data back to search results to populate company profile..................................\r\n\r\n this.setState({ peChecked: true, peCheckIndex: e.currentTarget.id, companyName: companyName, bpCheckIndex: -1, bpChecked: false }, this.loadPE_Data)\r\n }\r\n\r\n BP_RadioButtonChecked(e) {\r\n var companyName = [];\r\n var bpData = this.state.bpArray.find(item => item.item.ORG_ID == e.currentTarget.id)\r\n bpData.item.COMPANY_SOURCE = 'BP'\r\n companyName.push({ 'name': bpData.item.PE_NAME, 'id': bpData.item.PE_ID, 'flag': 'BP', 'data': bpData.item })\r\n //After this send the data back to search results to populate company profile..................................\r\n\r\n this.setState({ bpChecked: true, bpCheckIndex: e.currentTarget.id, companyName: companyName, peChecked: false, peCheckIndex: -1 }, this.loadPE_Data)\r\n }\r\n\r\n loadPE_Data() {\r\n var result = (\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t{!isCustomer ? this.props.content.bannerTitle : this.props.content.sharedBannerTitle}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t -1 ? (this.actions.indexOf(routes.businessValue)> -1 ? routes.discovery : routes.yourSpend) : routes.discovery\r\n\t\t\t\t\t\t\t\t\t\t}}>\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t{this.props.content.newFeature}
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{this.props.content.featureDesc}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t{this.props.content.heading}
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t{
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t{this.props.content.headingDesc}\r\n\t\t\t\t\t\t\t\t\t {this.props.content.jamSite} \r\n\t\t\t\t\t\t\t\t\t{this.props.content.sapUsersOnly}\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t this.hideModal(\"newupdate\")} onChecked={this.handleCheckbox} />\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n
\r\n ))}\r\n \r\n
\r\n \r\n
\r\n \r\n {data.flag ? : }\r\n
\r\n : }\r\n \r\n
\r\n \r\n
\r\n \r\n {data.item.PE_NAME}\r\n | {data.item.PE_ID_CITY}\r\n | {data.item.PE_ID_COUNTRY}\r\n
\r\n \r\n PE ID: {data.item.PE_ID}\r\n | CapIQ ID: {data.item.PE_CAPIQ_ID}\r\n
\r\n \r\n {this.state.bpArray.map((bpData, bpIndex) => (\r\n
\r\n \r\n
\r\n ))}\r\n \r\n
\r\n \r\n
\r\n \r\n {bpData.item.ORG_NAME}\r\n | {bpData.item.CITY}\r\n | {bpData.item.COUNTRY}\r\n
\r\n \r\n BP ID: {bpData.item.ORG_ID}\r\n | CapIQ ID: {bpData.item.ORG_CAPIQ_ID}\r\n
\r\n \r\n \r\n {this.state.peArray}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n data: state.treeData,\r\n firstSearchResult: state.searchData,\r\n ui: state.content.ui\r\n }\r\n}\r\nexport default connect(mapStateToProps, null)(TreeView);\r\n","import React from 'react';\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport { RadioButton } from 'material-ui';\r\nimport ScrollArea from 'react-scrollbar'\r\n\r\nimport Button from 'UI/Button';\r\nimport ButtonWithoutLoader from 'UI/ButtonWithoutLoader'\r\nimport Select from 'react-select'\r\n\r\nimport { validators, dropdownColourStyles } from 'Constants'\r\nimport { formatThousands, BreakLine, round, mergeArrayByKey } from 'utils/Utils'\r\n\r\nimport {\r\n resetError\r\n} from 'actions/userActions'\r\n\r\nimport {\r\n searchResult,\r\n fetchCapIqSearchResults,\r\n capIqSearchSuccess,\r\n capIqSearchFailure\r\n}\r\n from 'actions/searchActions'\r\n\r\nimport { capIQFetchData } from 'actions/discoveryActions'\r\nimport { valueStoryFetchDataSuccess } from 'actions/fetchValueStory'\r\nimport {\r\n getSPCapitalIQData,\r\n getSPCapitalIQLoading,\r\n getSPCapitalIQSuccess,\r\n getSPCapitalIQFailure,\r\n getCapIQDataBlank\r\n} from 'actions/spendActions'\r\n\r\nimport { Checkbox } from 'material-ui';\r\n\r\nclass DiscoveryCapIQSearch extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: props.data,\r\n peArray: [],\r\n bpArray: [],\r\n flag: false,\r\n index: -1,\r\n checked: false,\r\n checkIndex: -1,\r\n // companyName: [],\r\n //companyName: '',\r\n capIQId: '',\r\n stockTicker: '',\r\n selectedData: null,\r\n searchOption: [{ label: 'CapIQ ID', value: 'CapIQ ID' }, { label: 'Company Name', value: 'Company Name' }, { label: 'Stock Ticker', value: 'Stock Ticker' }],\r\n selectedOption: 'Company Name',\r\n searchText: '',\r\n companyDetails: [],\r\n companyObj: [],\r\n isLoading: false,\r\n ultimateParentChecked: true,\r\n publicCompanyChecked: false,\r\n currencyCode: 'USD',\r\n capIQResult: [],\r\n errorMsg: '',\r\n searchFlag: false,\r\n searchMessage: '',\r\n countryArray: [],\r\n selectedCountry: 'All Countries'\r\n }\r\n this.loadPE_Data = this.loadPE_Data.bind(this)\r\n this.loadCompanyData = this.loadCompanyData.bind(this)\r\n this.createCompanyProfileArray = this.createCompanyProfileArray.bind(this)\r\n this.changeUltimateParentCheck = this.changeUltimateParentCheck.bind(this)\r\n this.changePublicCompanyCheck = this.changePublicCompanyCheck.bind(this)\r\n this.RadioButtonChecked = this.RadioButtonChecked.bind(this);\r\n this.onCapIQIdChangeEvent = this.onCapIQIdChangeEvent.bind(this);\r\n this.onSearchTextChangeEvent = this.onSearchTextChangeEvent.bind(this);\r\n this.onStockTickerChangeEvent = this.onStockTickerChangeEvent.bind(this);\r\n this.search = this.search.bind(this);\r\n this._handleKeyDown = this._handleKeyDown.bind(this);\r\n this.save = this.save.bind(this)\r\n this.addCurrencyMask = this.addCurrencyMask.bind(this)\r\n this.filterSearchData = this.filterSearchData.bind(this)\r\n this.clearCAPIQ = this.clearCAPIQ.bind(this);\r\n }\r\n\r\n addCurrencyMask(value) {\r\n const regex = /\\d*\\.?\\d{0,2}/g\r\n const filteredValue = regex.exec(value)\r\n let currencySymbol = this.props.currencySymbols[this.state.currencyCode];\r\n if (this.state.currencyCode === null) {\r\n currencySymbol = '$';\r\n }\r\n\r\n if (filteredValue[0] === '') {\r\n return currencySymbol + formatThousands(this.value) + ' M'\r\n } else {\r\n this.value = filteredValue[0]\r\n return currencySymbol + formatThousands(this.value) + ' M'\r\n }\r\n\r\n }\r\n\r\n\r\n save() {\r\n if (this.state.checked) {\r\n this.props.capIqRadioButtonClicked(this.state.selectedData) \r\n }\r\n this.props.close();\r\n }\r\n clearCAPIQ() {\r\n // let arr = [{\r\n // \tOrganization: '', Industry: '', Location: '0', AnnualRevenue: null, TotalSpend: '0', CapIQId: '',\r\n // \tCapIQCompany: '', GlobalUltimateId: '', GlobalUltimateCompany: '', BPId: '', BPCompany: '',\r\n // \tPEId: '', PECompany: '', CurrencyCode: 'USD'\r\n // }]\r\n const companyData = this.props.userData;\r\n companyData.Organization = '';\r\n companyData.Industry = '';\r\n companyData.Location = '0';\r\n companyData.AnnualRevenue = null;\r\n companyData.TotalSpend = '0';\r\n companyData.CapIQId = '';\r\n companyData.CurrencyCode = 'USD';\r\n this.props.valueStoryFetchDataSuccess(companyData)\r\n this.props.capIqDataCleared()\r\n this.props.getCapIQDataBlank(true)\r\n this.props.close(); \r\n \r\n }\r\n\r\n changeUltimateParentCheck() {\r\n this.setState({ ultimateParentChecked: !this.state.ultimateParentChecked })\r\n //this.setState({ ultimateParentChecked: !this.state.ultimateParentChecked }, this.filterSearchData)\r\n }\r\n\r\n changePublicCompanyCheck() {\r\n this.setState({ publicCompanyChecked: !this.state.publicCompanyChecked })\r\n //this.setState({ publicCompanyChecked: !this.state.publicCompanyChecked }, this.filterSearchData)\r\n }\r\n\r\n onCapIQIdChangeEvent(event) {\r\n this.setState({ capIQId: event.target.value !== undefined ? event.target.value : '' });\r\n }\r\n\r\n onSearchTextChangeEvent(event) {\r\n this.setState({ searchText: event.target.value !== undefined ? event.target.value : '', checked: false, searchFlag: event.target.value !== '' ? true : false });\r\n }\r\n\r\n onStockTickerChangeEvent(event) {\r\n this.setState({ stockTicker: event.target.value !== undefined ? event.target.value : '' });\r\n }\r\n\r\n _handleKeyDown(e) {\r\n if (e.key === 'Enter') {\r\n this.search()\r\n }\r\n }\r\n\r\n filterSearchData() {\r\n let data = this.state.capIQResult\r\n let filteredResult = []\r\n //check if the checkbox to include only ultimate parent companies checked\r\n if (this.state.ultimateParentChecked && this.state.publicCompanyChecked) {\r\n for (let i = 0; i < data.length; i++) {\r\n //Include only the results which have a parent id & type publi\r\n if (data[i].PARENT_COMPANY_ID == data[i].COMPANY_ID && data[i].COMPANY_TYPE == 'Public Company') {\r\n filteredResult.push(data[i])\r\n }\r\n }\r\n } else if (this.state.ultimateParentChecked && !this.state.publicCompanyChecked) {\r\n for (let i = 0; i < data.length; i++) {\r\n //Include only the results which have a parent id\r\n if (data[i].PARENT_COMPANY_ID == data[i].COMPANY_ID) {\r\n filteredResult.push(data[i])\r\n }\r\n }\r\n }\r\n else if (!this.state.ultimateParentChecked && this.state.publicCompanyChecked) {\r\n for (let i = 0; i < data.length; i++) {\r\n //Include only the results which have a company type public\r\n if (data[i].COMPANY_TYPE == 'Public Company') {\r\n filteredResult.push(data[i])\r\n }\r\n }\r\n }\r\n else {\r\n filteredResult = data;\r\n }\r\n this.setState({ searchResult: filteredResult }, this.loadPE_Data)\r\n }\r\n\r\n search() {\r\n let searchText = this.state.searchText;\r\n let searchType = 1;\r\n if (this.state.selectedOption == 'Stock Ticker') {\r\n searchType = 2;\r\n }\r\n\r\n if (searchText.trim().length === 0) {\r\n return;\r\n }\r\n let parentFlag = 1;\r\n if (this.state.ultimateParentChecked) {\r\n parentFlag = 2;\r\n }\r\n let publicFlag = 1;\r\n if (this.state.publicCompanyChecked) {\r\n publicFlag = 2;\r\n }\r\n let country = this.state.selectedCountry == 'All Countries' ? 'all' : this.state.selectedCountry;\r\n this.props.searchResult([])\r\n this.setState({ searchMessage: '', searchResult: [], companyDetails: [] }, this.loadPE_Data)\r\n this.props.fetchCapIqSearchResults(searchText, searchType, parentFlag, publicFlag, country)\r\n .then((result) => {\r\n this.props.capIqSearchSuccess(result)\r\n this.props.searchResult(result.data.Result)\r\n let searchResult = result.data.Result.SearchResult;\r\n let scoreResult = result.data.Result.ScoreResult;\r\n\r\n let data = mergeArrayByKey(scoreResult, searchResult, 'COMPANY_ID')\r\n let length = 0\r\n let error = ''\r\n let message = 'Search results: '\r\n if (data.length > 500) {\r\n length = 500\r\n } else {\r\n length = data.length\r\n this.setState({ errorMsg: error })\r\n }\r\n // let filteredResult = []\r\n // //check if the checkbox to include only ultimate parent companies checked\r\n // if (this.state.ultimateParentChecked && this.state.publicCompanyChecked) {\r\n // for (let i = 0; i < length; i++) {\r\n // //Include only the results which have a parent id & type publi\r\n // if (data[i].PARENT_COMPANY_ID == data[i].COMPANY_ID && data[i].COMPANY_TYPE == 'Public Company') {\r\n // filteredResult.push(data[i])\r\n // }\r\n // }\r\n // } else if (this.state.ultimateParentChecked && !this.state.publicCompanyChecked) {\r\n // for (let i = 0; i < length; i++) {\r\n // //Include only the results which have a parent id\r\n // if (data[i].PARENT_COMPANY_ID == data[i].COMPANY_ID) {\r\n // filteredResult.push(data[i])\r\n // }\r\n // }\r\n // }\r\n // else if (!this.state.ultimateParentChecked && this.state.publicCompanyChecked) {\r\n // for (let i = 0; i < length; i++) {\r\n // //Include only the results which have a company type public\r\n // if (data[i].COMPANY_TYPE == 'Public Company') {\r\n // filteredResult.push(data[i])\r\n // }\r\n // }\r\n // }\r\n // else {\r\n // filteredResult = data;\r\n // }\r\n\r\n if (data.length >= 500) {\r\n let error1 = 'Your search has returned 500+ records. Please refine and re-search.'\r\n this.setState({ errorMsg: error1, searchMessage: '' })\r\n } else {\r\n if (data.length == 0) {\r\n this.setState({ searchMessage: '' })\r\n }\r\n let msg = message + data.length\r\n this.setState({ searchMessage: msg })\r\n }\r\n this.setState({ searchResult: data, capIQResult: data }, this.loadPE_Data)\r\n //this.setState({ capIQResult: result.data.Result }, this.filterSearchData)\r\n }).catch((error) => {\r\n this.props.capIqSearchFailure(error.response.data.Message)\r\n this.setState({ searchMessage: '', errorMsg: '' })\r\n })\r\n }\r\n\r\n\r\n\r\n RadioButtonChecked(e) {\r\n var companyName = [];\r\n let data = this.state.searchResult[e.currentTarget.value]\r\n if (data.AVATAR_INDUSTRY != null) {\r\n const industryIdx = this.props.contentData.industries.findIndex(item => data.AVATAR_INDUSTRY.toLowerCase() === item.toLowerCase());\r\n const companyData = this.props.userData;\r\n companyData.Industry = industryIdx;\r\n this.props.valueStoryFetchDataSuccess(companyData);\r\n }\r\n\r\n //this.props.capIqRadioButtonClicked(data)\r\n //After this send the data back to search results to populate company profile..................................\r\n\r\n this.setState({ checked: true, checkIndex: e.currentTarget.id, selectedData: data, isLoading: true, currencyCode: data.CURRENCY_CODE }, this.callMethods)\r\n }\r\n\r\n callMethods() {\r\n this.loadPE_Data();\r\n this.createCompanyProfileArray(null);\r\n }\r\n\r\n createCompanyProfileArray(id) {\r\n let capIQ = id != null && id != '' ? id : this.state.selectedData != null ? this.state.selectedData.COMPANY_ID : null;\r\n if(capIQ != null && capIQ != '' && capIQ != undefined)\r\n {\r\n this.props.getSPCapitalIQData(capIQ)\r\n .then((result) => {\r\n this.props.getSPCapitalIQSuccess(result)\r\n let data = result.data.Result;\r\n this.setState({ companyObj: data, capIQId: capIQ }, this.loadCompanyData)\r\n }).catch((error) => {\r\n this.props.getSPCapitalIQFailure(error.response.data.Message)\r\n })\r\n } \r\n }\r\n\r\n loadPE_Data() {\r\n var result = (\r\n
\r\n PE and BP IDs associated to this Global Ultimate ID
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.state.searchResult.map((data, index) => (\r\n
)\r\n\r\n this.setState({ peArray: result })\r\n }\r\n\r\n loadCompanyData() {\r\n var data = this.state.companyObj[0];\r\n this.props.capIQFetchData(data)\r\n\r\n\r\n const companyData = this.props.userData;\r\n companyData.CurrencyCode = data.CURRENCY_CODE;\r\n this.props.valueStoryFetchDataSuccess(companyData);\r\n\r\n var result = (\r\n
\r\n ))}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {data.COMPANY_NAME}\r\n | {this.props.content.capIdSearchText}: {data.COMPANY_ID}\r\n
\r\n \r\n {data.COUNTRY_NAME}\r\n | {data.EXCHANGE_SYMBOL}: {data.STOCK_TICKER}\r\n | {this.props.content.capIndustryText}: {data.COMPANY_INDUSTRY_DESC}\r\n
\r\n \r\n {this.props.content.capParentCompanyText}: {data.PARENT_COMPANY_NAME}\r\n | {\"Parent Id\"}: {data.PARENT_COMPANY_ID}\r\n
\r\n Company Name: {data.name}
*/}\r\n\r\n
\r\n \r\n
\r\n {this.props.company.COMPANY_NAME}
\r\n {data.COMPANY_NAME != null ? data.COMPANY_NAME : '-'}
\r\n \r\n
\r\n {this.props.company.COMPANY_ADDRESS}
\r\n \r\n {data.COMPANY_ADDRESS != null ? data.COMPANY_ADDRESS : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.COMPANY_TYPE}
\r\n \r\n {data.COMPANY_TYPE != null ? data.COMPANY_TYPE : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.COMPANY_STATUS}
\r\n \r\n {data.COMPANY_STATUS != null ? data.COMPANY_STATUS : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.EMPLOYEE_COUNT}
\r\n \r\n {data.EMPLOYEE_COUNT != null ? formatThousands(data.EMPLOYEE_COUNT) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.WEBPAGE}
\r\n \r\n \r\n
\r\n {this.props.company.FISCAL_YEAR}
\r\n \r\n {data.FISCAL_YEAR != null ? data.FISCAL_YEAR : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.TOT_REV}
\r\n \r\n {data.TOT_REV != null ? this.addCurrencyMask(data.TOT_REV) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.GRO_MARG}
\r\n \r\n {data.GRO_MARG != null ? round(data.GRO_MARG, 2) + ' %' : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.EBITDA_MARG}
\r\n \r\n {data.EBITDA_MARG != null ? round(data.EBITDA_MARG, 2) + ' %' : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.DSO}
\r\n \r\n {data.DSO != null ? round(data.DSO, 2) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.DPO}
\r\n \r\n {data.DPO != null ? round(data.DPO, 2) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.DIO}
\r\n \r\n {data.DIO != null ? round(data.DIO, 2) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.CCC}
\r\n \r\n {data.CCC != null ? round(data.CCC, 2) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.COGS}
\r\n \r\n {data.COGS != null ? this.addCurrencyMask(data.COGS) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.SG_A}
\r\n \r\n {data.SG_A != null ? this.addCurrencyMask(data.SG_A) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.INV}
\r\n \r\n {data.INV != null ? this.addCurrencyMask(data.INV) : '-'}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content.discovery.form,\r\n data: state.treeData,\r\n firstSearchResult: state.searchData,\r\n search: state.searchResultData,\r\n ui: state.content.ui,\r\n company: state.content.capitalDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n userData: state.valueStory,\r\n countryList: state.content.CountryList,\r\n capIQSearchData: state.capIQSearchTree,\r\n spendDetails: state.spendDetails\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchCapIqSearchResults: (value, type, parentFlag, publicFlag, country) => dispatch(fetchCapIqSearchResults(value, type, parentFlag, publicFlag, country)),\r\n capIqSearchSuccess: (msg) => dispatch(capIqSearchSuccess(msg)),\r\n capIqSearchFailure: (error) => dispatch(capIqSearchFailure(error)),\r\n searchResult: (result) => dispatch(searchResult(result)),\r\n getSPCapitalIQSuccess: message => dispatch(getSPCapitalIQSuccess(message)),\r\n getSPCapitalIQFailure: error => dispatch(getSPCapitalIQFailure(error)),\r\n getSPCapitalIQLoading: bool => dispatch(getSPCapitalIQLoading(bool)),\r\n getSPCapitalIQData: (CapIQID) => dispatch(getSPCapitalIQData(CapIQID)),\r\n capIQFetchData: (capIQData) => dispatch(capIQFetchData(capIQData)),\r\n // capIQSearchTree: (capIQTreeData) => dispatch(capIQSearchTree(capIQTreeData)),\r\n valueStoryFetchDataSuccess: (valueStory) => dispatch(valueStoryFetchDataSuccess(valueStory)),\r\n resetError: () => dispatch(resetError()),\r\n getCapIQDataBlank: bool => dispatch(getCapIQDataBlank(bool))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DiscoveryCapIQSearch);\r\n","import React, { PureComponent } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport TreeView from '../Search/TreeView'\r\nimport Popup from \"reactjs-popup\";\r\nimport Button from 'UI/Button'\r\nimport { Checkbox } from 'material-ui';\r\nimport ValueStoryList from 'Search/ValueStories'\r\nimport ScrollArea from 'react-scrollbar'\r\n//import Screen from 'UI/CustomComponents/Screen';\r\n\r\n// Actions\r\nimport { updateOrganization, addRevenue, updateCurrency, updateCurrencyCode, capIQFetchData } from 'actions/discoveryActions'\r\n\r\nimport {\r\n\tgetSPCapitalIQData,\r\n\tgetSPCapitalIQLoading,\r\n\tgetSPCapitalIQSuccess,\r\n\tgetSPCapitalIQFailure\r\n} from 'actions/spendActions'\r\nimport {\r\n\tuserDetailsSuccess,\r\n\tuserDetailsFailure,\r\n\tuserDetailsLoading,\r\n\tfetchUserValueStories,\r\n\tfetchValueStories,\r\n\tfetchUserSharedValueStories,\r\n\tfetchValueStoriesLoading,\r\n\tfetchValueStoriesSuccess,\r\n\tfetchValueStoriesFailure,\r\n} from 'actions/userActions'\r\nimport {\r\n\ttoggleValueDriver,\r\n\ttoggleSubLever\r\n} from 'actions/valueDriverActions'\r\nimport { updateUserInput } from 'actions/subLeverCalculationActions'\r\n\r\n// UI\r\nimport Select from 'react-select'\r\n\r\n\r\n// Common Functions\r\nimport { subLeverChange } from 'components/BusinessValue/SubLeverChange'\r\n\r\n// Utils\r\nimport { round, onChangeRemoveMask, formatThousands, getSubLeverIdObject, subLeverHasTotalSpend, removeMask, isDuplicate } from 'utils/Utils'\r\n\r\n// Settings\r\nimport { validators, dropdownColourStyles } from 'Constants'\r\n\r\nimport DiscoveryCapIQSearch from './DiscoveryCapIQSearch';\r\nimport DiscoveryVsSearch from './DiscoveryVsSearch'\r\nimport Modal from 'reboron/OutlineModal';\r\nimport { modalStyle, emailmodalContentStyle } from 'Constants'\r\nimport {ControlTextE, SelectE, CheckboxE, ScreenE, PopupE} from 'UI/CustomComponents/Controls';\r\n\r\nconst autoHeightModalStyle = Object.assign({}, modalStyle)\r\nautoHeightModalStyle.height = 'auto'\r\nautoHeightModalStyle.width = '30%'\r\n\r\nconst defaultOptions = [\r\n\t{ value: 0, label: \"\" }];\r\n\r\nconst BLURPENAME = '|BLURPENAME';\r\n\r\nexport class DiscoveryForm extends PureComponent {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.fetchValueStories = this.fetchValueStories.bind(this);\r\n\t\tthis.fetchUserSharedValueStories = this.fetchUserSharedValueStories.bind(this);\r\n\t\tthis.addCurrencyMask = this.addCurrencyMask.bind(this)\r\n\t\tthis.calculateTotalSpendFromRevenue = this.calculateTotalSpendFromRevenue.bind(this)\r\n\t\tthis.dispatchAddRevenue = this.dispatchAddRevenue.bind(this)\r\n\t\tthis.getTotalSpend = this.getTotalSpend.bind(this)\r\n\t\tthis.handleIndustryChange = this.handleIndustryChange.bind(this)\r\n\t\tthis.handleLocationChange = this.handleLocationChange.bind(this)\r\n\t\tthis.handleCurrencyChange = this.handleCurrencyChange.bind(this)\r\n\t\tthis.handleTotalSpendBlur = this.handleTotalSpendBlur.bind(this)\r\n\t\tthis.repositionInputCaret = this.repositionInputCaret.bind(this)\r\n\t\tthis.capIqRadioButtonClicked = this.capIqRadioButtonClicked.bind(this)\r\n\t\tthis.capIqDataCleared = this.capIqDataCleared.bind(this)\r\n\t\tthis.closeCapIqPopUp = this.closeCapIqPopUp.bind(this)\r\n\t\tthis.closeVsListPopUp = this.closeVsListPopUp.bind(this)\r\n\t\tthis.isZero = this.notZero.bind(this)\r\n\t\tthis.value = 0\r\n\t\tthis.totalSpendTouched = false\r\n\t\tthis.annualRevenueCaret = 0\r\n\t\tthis.annualRevenueThousandsSeparatorCount = 0\r\n\t\tthis.annualRevenueValue = null\r\n\t\tthis.totalSpendCaret = 0\r\n\t\tthis.totalSpendThousandsSeparftorCount = 0\r\n\t\tthis.totalSpendValue = null\r\n\t\tthis.state = {\r\n\t\t\tindustryOption: [],\r\n\t\t\tselectedIndustry: '',\r\n\t\t\tselectedLocation: '',\r\n\t\t\tlocationOption: [],\r\n\t\t\tcurrencyOption: [],\r\n\t\t\tselectedCurrency: '',\r\n\t\t\tselectedCurrencySymbol: '',\r\n\t\t\tshowFloatingLabelFlag: false,\r\n\t\t\tselectedRegion: '',\r\n\t\t\tvalueStory: '',\r\n\t\t\tisValueStoryNameEdit: false,\r\n\t\t\torganization: '',\r\n\t\t\tselectedCapIQCompanyId: '',\r\n\t\t\topen: false,\r\n\t\t\tcloseCapIqPopUp: false,\r\n\t\t\ttest: false,\r\n\t\t\topenVSList: false,\r\n\t\t\tvalueStories: [],\r\n\t\t\tsearchText: '',\r\n\t\t\tvalueStoriesShared: [],\r\n\t\t\tisLoading: false,\r\n\t\t\tvsLoad: '',\r\n\t\t\tisCapIQLicesend: false\r\n\t\t}\r\n\t\tthis.onTextChangeEvent = this.onTextChangeEvent.bind(this);\r\n\t\tthis.onOrganizationChangeEvent = this.onOrganizationChangeEvent.bind(this);\r\n\t\tthis.handleCapIQIdChange = this.handleCapIQIdChange.bind(this);\r\n\t}\r\n\r\n\tcomponentWillMount() {\r\n\t\tthis.fetchUserValueStories();\r\n\t\t//if (this.props.newValueStory) {\r\n\t\t//this.dispatchAddRevenue(this.props.userData.AnnualRevenue)\r\n\t\t//}\r\n\r\n\t\t// Check for user inputted total spend\r\n\t\tconst firstSubLeverTotalSpend = this.props.userData.BusinessValueToYou ? this.props.userData.BusinessValueToYou[0].ValueDriver[0].SubLever[0].UserInput[0].UserInput : null\r\n\r\n\t\tif (firstSubLeverTotalSpend !== '' && firstSubLeverTotalSpend !== null) this.totalSpendTouched = true\r\n\r\n\t\tthis.setState({ valueStory: this.props.userData.ValueStoryName });\r\n\t\tthis.setState({ organization: this.props.userData.Organization });\r\n\r\n\t\tif (this.props.userData.CapIQCompany) {\r\n\t\t\tthis.setState({ selectedCapIQCompanyId: this.props.userData.CapIQCompany + ' | ' + this.props.userData.CapIQId }, this.callCapIQProcedure);\r\n\t\t}\r\n\r\n\t\tif (this.props.userData.Test !== undefined && this.props.userData.Test !== null) {\r\n\t\t\tthis.setState({ test: this.props.userData.Test });\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tthis.loadData();\r\n\t\t//this.initialFieldValues();\r\n\t\tthis.setState({ isCapIQLicesend: this.props.user.user.applicationFeatures.findIndex(a => a.Action === this.props.capIQ.capIQAction) > -1 ? true : false })\r\n\t\tthis.fetchUserSharedValueStories()\r\n\t\tthis.annualRevenueElement = document.getElementById('discovery.AnnualRevenue')\r\n\t\tthis.totalSpendInMillionsElement = document.getElementById('discovery.TotalSpend')\r\n\r\n\t\tthis.bindIndustryAndLocation();\r\n\r\n\r\n\t\tif (this.props.content.industries.indexOf(this.props.content.industries[0]) === 0) {\r\n\t\t\tthis.formDispatch(actions.setErrors('discovery.Industry', true))\r\n\t\t} else {\r\n\t\t\tthis.formDispatch(actions.change('discovery.Industry', this.props.content.industries[this.props.userData.Industry]));\r\n\t\t\tthis.formDispatch(actions.setErrors('discovery.Industry', false))\r\n\t\t}\r\n\r\n\t\tif (!validators.notZero(this.props.userData.AnnualRevenue) || this.props.userData.AnnualRevenue === '' || this.props.userData.AnnualRevenue === null) {\r\n\t\t\tthis.formDispatch(actions.setErrors('discovery.AnnualRevenue', {\r\n\t\t\t\trequired: validators.required(this.props.userData.AnnualRevenue) && this.props.validation.required,\r\n\t\t\t\tisZero: (vals) => this.notZero(this.props.userData.AnnualRevenue) && this.props.validation.isZero\r\n\t\t\t}))\r\n\t\t} else {\r\n\t\t\tthis.formDispatch(actions.setErrors('discovery.AnnualRevenue', false))\r\n\t\t}\r\n\t}\r\n\r\n\tfetchUserValueStories() {\r\n\t\tthis.props.fetchValueStoriesLoading(true)\r\n\t\tthis.props.fetchUserValueStories(this.props.user.user.Id)\r\n\t\t\t.then((result) => {\r\n\t\t\t\tthis.props.fetchValueStoriesSuccess(result)\r\n\t\t\t\tfor (var i = 0; i < result.data.Result.length; i++) {\r\n\t\t\t\t\tvar obj = result.data.Result[i];\r\n\t\t\t\t\tif (obj.Id !== localStorage.getItem('id')) {\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\tfor (var i = 0; i < result.data.Result.length; i++) {\r\n\t\t\t\t\tvar obj = result.data.Result[i];\r\n\t\t\t\t\tif (obj.Id === localStorage.getItem('id')) {\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tthis.props.fetchValueStoriesFailure(error.response.data.Message)\r\n\t\t\t})\r\n\t}\r\n\r\n\tloadData() {\r\n\r\n\t\tvar array = [\r\n\t\t\t{ label: 'Total Invoice spend', value: 'Total Invoice spend' },\r\n\t\t\t{ label: 'Total Invoice Count', value: 'Total Invoice Count' },\r\n\t\t\t{ label: 'Total Purchase Order Spend', value: 'Total Purchase Order Spend' },\r\n\t\t\t{ label: 'Total Purchase Order Count', value: 'Total Purchase Order Count' },\r\n\t\t]\r\n\r\n\t\tconst group = { defaultValue: undefined, groupLabel: 'CapIqId', groupName: 'CapIqId' }\r\n\r\n\t\tthis.setState({\r\n\t\t\tgroup: group,\r\n\t\t\titems: array\r\n\t\t})\r\n\r\n\t}\r\n\r\n\thandleIndustryChange(value) {\r\n\r\n\t\tthis.props.dispatchIndustryChange(this.props.content.industries.indexOf(value))\r\n\t\tconst self = this;\r\n\t\tsetTimeout(() => {\r\n\t\t\tif (!self.props.newValueStory) {\r\n\t\t\t\tlet arr = []\r\n\t\t\t\tarr.push('4.3')\r\n\t\t\t\tarr.push('4.4')\r\n\t\t\t\tsubLeverChange('', arr)\r\n\t\t\t}\r\n\t\t\tif (!this.totalSpendTouched) this.props.dispatchUpdateTotalSpend(this.calculateTotalSpendFromRevenue())\r\n\t\t}, 1)\r\n\r\n\t\tthis.setState({ selectedIndustry: value });\r\n\t\tthis.formDispatch(actions.change('discovery.Industry', value));\r\n\r\n\r\n\t\tif (this.props.content.industries.indexOf(this.props.content.industries[0]) === 0) {\r\n\t\t\tthis.formDispatch(actions.setErrors('discovery.Industry', true))\r\n\t\t\tthis.formDispatch(actions.change('discovery.Industry', ''));\r\n\t\t} else {\r\n\t\t\tthis.formDispatch(actions.setErrors('discovery.Industry', false))\r\n\t\t}\r\n\r\n\r\n\t}\r\n\r\n\thandleLocationChange(value) {\r\n\t\tvar result = this.props.content.regions.find(region => region.Country.toLowerCase() == value.toLowerCase())\r\n\t\tthis.props.dispatchLocationChange(this.props.content.locations.indexOf(value), result.Region)\r\n\t\t//this.getCurrency(this.props.content.locations.indexOf(value))\r\n\r\n\t\tsetTimeout(() => {\r\n\t\t\tif (!this.totalSpendTouched) this.props.dispatchUpdateTotalSpend(this.calculateTotalSpendFromRevenue())\r\n\t\t}, 1)\r\n\r\n\t\tthis.setState({ selectedLocation: value });\r\n\r\n\r\n\t}\r\n\r\n\thandleCurrencyChange(value) {\r\n\t\tvar result = this.state.currencyOption.find(currency => currency.value == value.value)\r\n\t\t//this.props.userData.CurrencyCode = value.value;\r\n\t\t//this.props.userData.Currency = this.props.currencySymbols[value.value];\r\n\r\n\t\tthis.setState({ selectedCurrency: value });\r\n\t\tthis.setState({ selectedCurrencySymbol: this.props.currencySymbols[value.value] });\r\n\t\tthis.getCurrency(value);\r\n\r\n\t\tthis.showModal(\"currencychange\");\r\n\t}\r\n\r\n\tdispatchAddRevenue(revenue) {\r\n\r\n\t\tthis.props.addRevenue(revenue)\r\n\r\n\t\tsetTimeout(() => {\r\n\t\t\tif ((this.props.userData.TotalSpend === '' || this.props.userData.TotalSpend === null) || !this.totalSpendTouched)\r\n\t\t\t\tthis.props.dispatchUpdateTotalSpend(this.calculateTotalSpendFromRevenue())\r\n\r\n\t\t\tthis.repositionInputCaret('discovery.AnnualRevenue', this.annualRevenueCaret, this.annualRevenueThousandsSeparatorCount, this.props.userData.AnnualRevenue)\r\n\t\t}, 1)\r\n\t}\r\n\r\n\tcalculateTotalSpendFromRevenue() {\r\n\t\t// Calculate Total Spend based on\r\n\t\t// Annual Revenue and Spend as Percentage of Revenue\r\n\t\t// if Annual Revenue is not empty\r\n\t\tif (this.props.userData.AnnualRevenue === '' || this.props.userData.AnnualRevenue === null) {\r\n\t\t\treturn ''\r\n\t\t} else {\r\n\t\t\t//const totalSpend = round(this.props.spendAsPercentageOfRevenue / 100 * this.props.userData.AnnualRevenue, 2)\r\n\t\t\tconst totalSpend = round(this.props.spendAsPercentageOfRevenue * this.props.userData.AnnualRevenue, 2)\r\n\t\t\treturn totalSpend\r\n\t\t}\r\n\t}\r\n\r\n\tgetTotalSpend(e) {\r\n\t\tthis.totalSpendTouched = true\r\n\t\tconst handleChange = this.props.handleChange\r\n\r\n\t\tlet value = onChangeRemoveMask(e, this.state.selectedCurrencySymbol)\r\n\r\n\t\t// Total Spend user input is empty string or null\r\n\t\tif (!this.props.newValueStory && (value !== '' || value !== null)) {\r\n\t\t\t// Update Total Spend rows for all sub levers\r\n\t\t\tthis.props.subLeverCalculationContent.forEach(function (obj) {\r\n\r\n\t\t\t\tconst subLever = getSubLeverIdObject(obj.id)\r\n\r\n\t\t\t\tif (subLeverHasTotalSpend(obj.id)) {\r\n\t\t\t\t\thandleChange(value, subLever, 0)\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t\t}\r\n\r\n\t\t// Update Total Spend in state\r\n\t\tthis.props.dispatchUpdateTotalSpend(value)\r\n\r\n\t\t// Update controlled input\r\n\t\tthis.props.dispatchTotalSpendChange(value)\r\n\r\n\t\t// add is-dirty state\r\n\t\tlet el = document.getElementById(\"discovery.TotalSpend\"),\r\n\t\t\tparent = el.parentNode\r\n\t\tparent.className += ' is-dirty'\r\n\r\n\t\tsetTimeout(() => {\r\n\t\t\t// Update caret position\r\n\t\t\tif (this.totalSpendInMillionsElement === document.activeElement) {\r\n\t\t\t\tthis.repositionInputCaret('discovery.TotalSpend', this.totalSpendCaret, this.totalSpendThousandsSeparatorCount, this.props.userData.TotalSpend)\r\n\t\t\t}\r\n\t\t}, 1)\r\n\t}\r\n\r\n\thandleTotalSpendBlur(e) {\r\n\t\tconst handleChange = this.props.handleChange\r\n\t\tlet value = onChangeRemoveMask(e, this.state.selectedCurrencySymbol)\r\n\r\n\t\t// Total Spend user input is empty string or null\r\n\t\tif (value === '' || value === null) {\r\n\t\t\t// Use default calculated Total Spend (Revenue * Industry BM percentage)\r\n\t\t\tvalue = this.calculateTotalSpendFromRevenue()\r\n\r\n\r\n\t\t\t// Clear Total Spend rows for all sub levers\r\n\t\t\tif (!this.props.newValueStory) {\r\n\t\t\t\tthis.props.subLeverCalculationContent.forEach(function (obj) {\r\n\r\n\t\t\t\t\tconst subLever = getSubLeverIdObject(obj.id)\r\n\r\n\t\t\t\t\tif (subLeverHasTotalSpend(obj.id)) {\r\n\t\t\t\t\t\thandleChange(null, subLever, 0)\r\n\t\t\t\t\t}\r\n\t\t\t\t})\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// Update Total Spend in state\r\n\t\tthis.props.dispatchUpdateTotalSpend(value)\r\n\r\n\t\t// Update controlled input\r\n\t\tthis.props.dispatchTotalSpendChange(value)\r\n\t}\r\n\r\n\tdispatchUpdateCurrency(currency) {\r\n\t\tlet encodedCurrency = encodeURIComponent(currency)\r\n\t\tthis.props.updateCurrency(encodedCurrency)\r\n\t}\r\n\r\n\tgetCurrency(value) {\r\n\t\tthis.dispatchUpdateCurrency(this.props.currencySymbols[value.value])\r\n\t\tthis.props.updateCurrencyCode(value.value)\r\n\t}\r\n\r\n\taddCurrencyMask(value) {\r\n\t\tif (value === '' || value === null || value === '0') {\r\n\r\n\t\t\tif (this.formDispatch !== undefined) {\r\n\t\t\t\tthis.formDispatch(actions.setErrors('discovery.AnnualRevenue', {\r\n\t\t\t\t\trequired: validators.required(this.props.userData.AnnualRevenue) && this.props.validation.required,\r\n\t\t\t\t\tisZero: (vals) => this.notZero(this.props.userData.AnnualRevenue) && this.props.validation.isZero\r\n\t\t\t\t}))\r\n\t\t\t\t//this.formDispatch(actions.reset('discovery.AnnualRevenue'))\r\n\t\t\t}\r\n\t\t\treturn ''\r\n\t\t} else {\r\n\t\t\tvar temp = this.formDispatch !== undefined ? this.formDispatch(actions.setErrors('discovery.AnnualRevenue', false)) : null\r\n\t\t\tconst regex = /\\d*\\.?\\d{0,2}/g\r\n\t\t\tconst filteredValue = regex.exec(value)\r\n\r\n\t\t\tif (filteredValue[0] === '') {\r\n\t\t\t\treturn this.state.selectedCurrencySymbol + formatThousands(this.value) + ' M'\r\n\t\t\t} else {\r\n\t\t\t\tthis.value = filteredValue[0]\r\n\t\t\t\treturn this.state.selectedCurrencySymbol + formatThousands(this.value) + ' M'\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\trepositionInputCaret(selector, lastCaretPosition, lastThousandsSeparatorCount, lastValue) {\r\n\t\t// Reposition Annual Revenue cursor after currency mask has been applied\r\n\t\tconst el = document.getElementById(selector)\r\n\t\tif (!el) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tlet val = el.value\r\n\t\tlet thousandsSeparatorCount = val.split(\",\").length - 1\r\n\t\tlet length = val.length\r\n\r\n\t\tlet caretPosition = 0\r\n\r\n\t\t// Don't let caret go past Millions postfix\r\n\t\tif (lastCaretPosition >= val.length - 2) {\r\n\t\t\tel.selectionStart = length - 2\r\n\t\t\tel.selectionEnd = length - 2\r\n\t\t\t// If input is not empty\r\n\t\t} else if (el === document.activeElement && (lastValue.indexOf('M') > -1)) {\r\n\t\t\tif (thousandsSeparatorCount > lastThousandsSeparatorCount) {\r\n\t\t\t\tcaretPosition = lastCaretPosition + 1\r\n\t\t\t} else if (thousandsSeparatorCount < lastThousandsSeparatorCount) {\r\n\t\t\t\tcaretPosition = lastCaretPosition - 1\r\n\t\t\t} else {\r\n\t\t\t\tcaretPosition = lastCaretPosition\r\n\t\t\t}\r\n\r\n\t\t\tel.selectionStart = caretPosition\r\n\t\t\tel.selectionEnd = caretPosition\r\n\t\t\t// If input is empty\r\n\t\t} else {\r\n\t\t\tel.selectionStart = length - 2\r\n\t\t\tel.selectionEnd = length - 2\r\n\t\t}\r\n\r\n\t\t//console.log('component did update', thousandsSeparatorCount, val, el.selectionStart, el.selectionEnd)\r\n\t}\r\n\r\n\r\n\tcomponentWillReceiveProps(nextProps) {\r\n\t\t/*\r\n\t\tUpdate Caret positions on user input\r\n\t\t */\r\n\t\tconst val = this.annualRevenueElement.value\r\n\t\tthis.annualRevenueCaret = this.annualRevenueElement.selectionStart\r\n\t\tthis.annualRevenueThousandsSeparatorCount = val.split(\",\").length - 1\r\n\t\tthis.annualRevenueValue = val\r\n\r\n\t\tconst val2 = this.totalSpendInMillionsElement.value\r\n\t\tthis.totalSpendCaret = this.totalSpendInMillionsElement.selectionStart\r\n\t\tthis.totalSpendThousandsSeparatorCount = val2.split(\",\").length - 1\r\n\t\tthis.totalSpendValue = val2\r\n\r\n\t\t//console.log('component will receive props', this.annualRevenueThousandsSeparatorCount, el.value, el.selectionStart, el.selectionEnd)\r\n\r\n\r\n\t\t//bind industry option\r\n\t\tif (this.props.content !== nextProps.content) {\r\n\t\t\tthis.props = nextProps;\r\n\r\n\t\t\tthis.bindIndustryAndLocation();\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentDidUpdate(nextProps, nextState) {\r\n\t\tif (this.annualRevenueElement === document.activeElement) {\r\n\t\t\tthis.repositionInputCaret('discovery.AnnualRevenue', this.annualRevenueCaret, this.annualRevenueThousandsSeparatorCount, this.annualRevenueValue)\r\n\t\t}\r\n\r\n\t\tif (this.totalSpendInMillionsElement === document.activeElement) {\r\n\t\t\tthis.repositionInputCaret('discovery.TotalSpend', this.totalSpendCaret, this.totalSpendThousandsSeparatorCount, this.totalSpendValue)\r\n\t\t}\r\n\r\n\t\tif (this.props !== undefined) {\r\n\t\t\tif (this.props.content.industries.indexOf(this.props.content.industries[this.props.userData.Industry]) > 0) {\r\n\t\t\t\tthis.formDispatch(actions.change('discovery.Industry', this.props.content.industries[this.props.userData.Industry]));\r\n\t\t\t} else {\r\n\t\t\t\tthis.formDispatch(actions.setErrors('discovery.Industry', true));\r\n\t\t\t\tthis.formDispatch(actions.reset('discovery.Industry'));\r\n\t\t\t}\r\n\r\n\t\t\tif (this.props.userData.AnnualRevenue === '' || this.props.userData.AnnualRevenue === null || this.props.userData.AnnualRevenue === '0') {\r\n\r\n\t\t\t\tif (this.formDispatch !== undefined) {\r\n\t\t\t\t\tthis.formDispatch(actions.setErrors('discovery.AnnualRevenue', {\r\n\t\t\t\t\t\trequired: validators.required(this.props.userData.AnnualRevenue) && this.props.validation.required,\r\n\t\t\t\t\t\tisZero: (vals) => this.notZero(this.props.userData.AnnualRevenue) && this.props.validation.isZero\r\n\t\t\t\t\t}))\r\n\t\t\t\t\t//this.formDispatch(actions.reset('discovery.AnnualRevenue'))\r\n\t\t\t\t}\r\n\t\t\t\treturn ''\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tbindIndustryAndLocation() {\r\n\t\t//bind industry option\r\n\t\tvar array = [];\r\n\t\tthis.props.content.industries.forEach((element) => {\r\n\t\t\tvar obj = {};\r\n\t\t\tobj.label = element;\r\n\t\t\tobj.value = element;\r\n\t\t\tarray.push(obj);\r\n\t\t});\r\n\t\tthis.setState({ industryOption: array });\r\n\r\n\t\t// set default value for industry\r\n\t\tthis.setState({ selectedIndustry: this.props.content.industries[this.props.userData.Industry] });\r\n\r\n\t\t//bind location option\t\t\r\n\t\tvar array1 = [];\r\n\t\tthis.props.content.locations.forEach((element) => {\r\n\t\t\tvar obj = {};\r\n\t\t\tobj.label = element;\r\n\t\t\tobj.value = element;\r\n\t\t\tarray1.push(obj);\r\n\t\t});\r\n\t\tthis.setState({ locationOption: array1 });\r\n\r\n\t\t//bind currency option\t\t\r\n\t\tvar array2 = [];\r\n\t\tlet currencyCodes = this.props.content.currencyCodes;\r\n\t\tfor (let i = 1; i < currencyCodes.length; i++) {\r\n\t\t\tlet obj = { label: currencyCodes[i], value: currencyCodes[i].split(' - ')[0] }\r\n\t\t\tarray2.push(obj);\r\n\t\t}\r\n\t\tthis.setState({ currencyOption: array2 });\r\n\r\n\t\t// set default value for location \r\n\t\tthis.setState({ selectedLocation: this.props.content.locations[this.props.userData.Location] });\r\n\r\n\t\tvar idx = array2.findIndex((element) => {\r\n\t\t\treturn element.value === this.props.userData.CurrencyCode\r\n\t\t})\r\n\r\n\t\tif (idx === -1) {\r\n\t\t\tidx = array2.findIndex((element) => {\r\n\t\t\t\treturn element.value === 'USD'\r\n\t\t\t})\r\n\t\t}\r\n\r\n\t\tlet selectedCurrencySym = this.props.currencySymbols[array2[idx].value];\r\n\r\n\t\tthis.getCurrency({ label: selectedCurrencySym, value: array2[idx].value })\r\n\r\n\r\n\t\t//this.dispatchUpdateCurrency(selectedCurrencySym);\r\n\r\n\t\tthis.setState({ selectedCurrencySymbol: selectedCurrencySym });\r\n\t\t// set default value for currency \r\n\t\tthis.setState({ selectedCurrency: array2[idx] });\r\n\t}\r\n\r\n\t\r\n\r\n\tonTextChangeEvent(event) {\r\n\t\tthis.setState({ valueStory: event.target.value !== undefined ? event.target.value : this.props.userData.ValueStoryName });\r\n\t\tthis.props.userData.ValueStoryName = event.target.value;\r\n\t\tthis.setState({ isValueStoryNameEdit: true });\r\n\t}\r\n\r\n\tonOrganizationChangeEvent(event) {\r\n\t\tthis.setState({ organization: event.target.value !== undefined ? event.target.value : this.props.userData.Organization });\r\n\t\tthis.props.userData.Organization = event.target.value;\r\n\t\tthis.props.updateOrganization(this.props.userData.Organization);\r\n\t\tthis.setState({ isOrganizationEdit: true });\r\n\t}\r\n\r\n\thandleCapIQIdChange(event) {\r\n\t\tthis.setState({ capIQId: event.target.value !== undefined ? event.target.value : this.props.userData.CapIQId });\r\n\t\tthis.props.userData.CapIQId = event.target.value;\r\n\t\tthis.setState({ isCapIQIdEdit: true });\r\n\t}\r\n\r\n\tnotZero(vals) {\r\n\t\tif ((vals !== null && vals !== '' && Number.parseFloat(removeMask(vals, this.state.selectedCurrencySymbol)) === 0)) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\t\treturn true;\r\n\t}\r\n\r\n\tcloseCapIqPopUp() {\r\n\t\tthis.setState({ openCapIq: !this.state.openCapIq })\r\n\t}\r\n\r\n\tcloseVsListPopUp() {\r\n\t\tthis.setState({ openVSList: !this.state.openVSList, vsLoad: '' })\r\n\t}\r\n\r\n\tcallCapIQProcedure() {\r\n\t\tlet str = this.state.selectedCapIQCompanyId\r\n\t\tlet id = str.split('|').pop().trim()\r\n\t\tthis.props.dispatchCapIQChange(id)\r\n\t\t// this.props.getSPCapitalIQData(id)\r\n\t\t// .then((result) => {\r\n\t\t// this.props.getSPCapitalIQSuccess(result)\r\n\t\t// \t\tthis.props.capIQFetchData(result.data.Result[0])\r\n\t\t// }).catch((error) => {\r\n\t\t// this.props.getSPCapitalIQFailure(error.response.data.Message)\r\n\t\t// })\r\n\t}\r\n\r\n\tcapIqDataCleared() {\r\n\t\tvar array2 = [];\r\n\t\tlet currencyCodes = this.props.content.currencyCodes;\r\n\t\tfor (let i = 1; i < currencyCodes.length; i++) {\r\n\t\t\tlet obj = { label: currencyCodes[i], value: currencyCodes[i].split(' - ')[0] }\r\n\t\t\tarray2.push(obj);\r\n\t\t}\r\n\t\tthis.setState({ currencyOption: array2 });\r\n\t\tlet idx = array2.findIndex((element) => {\r\n\t\t\treturn element.value === 'USD'\r\n\t\t})\r\n\r\n\r\n\t\tlet selectedCurrencySym = this.props.currencySymbols[array2[idx].value];\r\n\r\n\t\tthis.getCurrency({ label: selectedCurrencySym, value: array2[idx].value })\r\n\r\n\r\n\t\t//this.dispatchUpdateCurrency(selectedCurrencySym);\r\n\r\n\t\tthis.setState({ selectedCurrencySymbol: selectedCurrencySym });\r\n\t\t// set default value for currency \r\n\t\tthis.setState({ selectedCurrency: array2[idx] });\r\n\t\tthis.props.dispatchCapIQChange('clear')\r\n\t\tthis.setState({ capIQId: '', selectedCapIQCompanyId: '', selectedLocation: this.props.content.locations[0], selectedIndustry: this.props.content.industries[0] })\r\n\t}\r\n\r\n\tcapIqRadioButtonClicked(data) {\r\n\t\tthis.props.userData.CapIQId = data.COMPANY_ID\r\n\t\tthis.props.userData.CapIQCompany = data.COMPANY_NAME\r\n\t\tthis.props.userData.Organization = data.COMPANY_NAME\r\n\t\tthis.bindIndustryAndLocation()\r\n\t\tthis.formDispatch(actions.change('discovery.Organization', data.COMPANY_NAME));\r\n\t\tif (this.props.userData.CapIQCompany) {\r\n\t\t\tthis.setState({ selectedCapIQCompanyId: this.props.userData.CapIQCompany + ' | ' + this.props.userData.CapIQId, organization: data.COMPANY_NAME }, this.callCapIQProcedure);\r\n\t\t} else {\r\n\t\t\tthis.setState({ selectedCapIQCompanyId: '' })\r\n\t\t}\r\n\r\n\t\tthis.props.userData.AnnualRevenue = data.COMPANY_REVENUE ? data.COMPANY_REVENUE + '' : null;\r\n\t\tthis.dispatchAddRevenue(this.props.userData.AnnualRevenue)\r\n\t\t//this.props.userData.Location = data.COUNTRY_NAME\r\n\t\tlet idx = this.props.content.locations.findIndex(item => data.COUNTRY_NAME.toLowerCase() === item.toLowerCase())\r\n\t\tif (idx !== -1) {\r\n\t\t\tthis.props.userData.Location = idx;\r\n\t\t\tthis.setState({ selectedLocation: this.props.content.locations[idx] });\r\n\t\t} else {\r\n\t\t\tthis.setState({ selectedLocation: this.props.content.locations[0] })\r\n\t\t}\r\n\r\n\t\tif (data.AVATAR_INDUSTRY) {\r\n\t\t\tconst industryIdx = this.props.content.industries.findIndex(item => data.AVATAR_INDUSTRY.toLowerCase() === item.toLowerCase());\r\n\t\t\tif (industryIdx !== -1) {\r\n\t\t\t\tthis.props.userData.Industry = industryIdx;\r\n\t\t\t\tthis.formDispatch(actions.change('discovery.Industry', this.props.content.industries[industryIdx]));\r\n\t\t\t\tthis.setState({ selectedIndustry: this.props.content.industries[industryIdx] });\r\n\t\t\t} else {\r\n\t\t\t\tthis.setState({ selectedIndustry: this.props.content.industries[0] });\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tshowModal(action) {\r\n\t\tthis.refs[action].show()\r\n\t}\r\n\r\n\thideModal(action) {\r\n\t\tthis.refs[action].hide()\r\n\t}\r\n\r\n\tselectIsTestChk(e) {\r\n\t\tthis.setState({ test: !this.state.test }, () => {\r\n\t\t\tthis.props.userData.Test = this.state.test;\r\n\t\t});\r\n\t}\r\n\tfetchUserSharedValueStories() {\r\n\t\tthis.props.fetchValueStoriesLoading(true)\r\n\t\tthis.setState({ isError: false, message: '', })\r\n\t\tthis.props.fetchUserSharedValueStories(this.props.user.user.Id)\r\n\t\t\t.then((result) => {\r\n\t\t\t\tthis.props.fetchValueStoriesSuccess(result)\r\n\t\t\t\tvar obj = [];\r\n\t\t\t\tfor (var i = 0; i < result.data.Result.length; i++) {\r\n\r\n\t\t\t\t\tobj.push(result.data.Result[i])\r\n\t\t\t\t}\r\n\t\t\t\tlet temp = obj;\r\n\t\t\t\ttemp.forEach((element, i) => {\r\n\t\t\t\t\telement.content = false;\r\n\t\t\t\t\telement.index = i;\r\n\t\t\t\t});\r\n\t\t\t\tthis.setState({ valueStoriesShared: temp })\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tthis.props.fetchValueStoriesFailure(error.response.data.Message)\r\n\t\t\t\tthis.setState({\r\n\t\t\t\t\tmessage: error.response.data.Message, isLoading: false, isError: true\r\n\t\t\t\t})\r\n\t\t\t})\r\n\t}\r\n\tfetchValueStories() {\r\n\t\tlet searchText = this.state.organization;\r\n\t\tlet prevText = this.state.searchText;\r\n\t\tlet sharedVs = this.state.valueStoriesShared;\r\n\t\tif (searchText != prevText) {\r\n\t\t\tthis.props.fetchValueStoriesLoading(true)\r\n\t\t\tthis.setState({ isError: false, message: '', vsLoad: 'true' })\r\n\t\t\tthis.props.fetchValueStories(searchText)\r\n\t\t\t\t.then((result) => {\r\n\t\t\t\t\tthis.props.fetchValueStoriesSuccess(result)\r\n\t\t\t\t\tvar obj = [];\r\n\t\t\t\t\tfor (var i = 0; i < result.data.Result.length; i++) {\r\n\r\n\t\t\t\t\t\tobj.push(result.data.Result[i])\r\n\t\t\t\t\t}\r\n\t\t\t\t\tlet temp = obj;\r\n\t\t\t\t\tlet vsList;\r\n\t\t\t\t\ttemp.forEach((element, i) => {\r\n\t\t\t\t\t\telement.content = false;\r\n\t\t\t\t\t\telement.index = i;\r\n\t\t\t\t\t});\r\n\t\t\t\t\tif (sharedVs.length > 0) {\r\n\t\t\t\t\t\tvsList = temp.filter(obj => !sharedVs.filter(xobj => obj.VSID == xobj.VSId).length)\r\n\t\t\t\t\t}\r\n\t\t\t\t\tthis.setState({ valueStories: vsList, searchText: searchText, vsLoad: '' })\r\n\r\n\t\t\t\t}).catch((error) => {\r\n\t\t\t\t\tthis.props.fetchValueStoriesFailure(error.response.data.Message)\r\n\t\t\t\t\tthis.setState({\r\n\t\t\t\t\t\tmessage: error.response.data.Message, isLoading: false, isError: true\r\n\t\t\t\t\t})\r\n\t\t\t\t})\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n
\r\n \r\n
\r\n {this.props.content.capIqSearchTitle}
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {this.props.content.searchBy}*
\r\n \r\n option.label === this.state.selectedOption)}\r\n noOptionsMessage={() => null}\r\n onChange={(value) => this.handleSelectionChange(value.label)}\r\n options={this.state.searchOption}\r\n isSearchable={false}\r\n validateOn=\"change\" styles={dropdownColourStyles}\r\n />\r\n
\r\n \r\n
\r\n {'Filter By'}*
\r\n \r\n
\r\n \r\n {/*
\r\n {this.props.content.capCompanyNameSearchText}
*/}\r\n \r\n this._handleKeyDown(e)} onChange={this.onSearchTextChangeEvent} value={this.state.searchText} />\r\n \r\n {/* ![]()
this.search()} src={this.state.searchFlag ? \"/images/search_big_active.svg\":\"/images/search_big_inactive.svg\"} /> */}\r\n
\r\n\r\n \r\n
\r\n \r\n\r\n\r\n
\r\n \r\n option.label === this.state.selectedCountry)}\r\n noOptionsMessage={() => null}\r\n onChange={(value) => this.handleCountryChange(value.label)}\r\n options={this.state.countryArray}\r\n isSearchable={false}\r\n validateOn=\"change\" styles={dropdownColourStyles}\r\n />\r\n
\r\n {this.state.searchMessage}
\r\n \r\n
\r\n {this.state.errorMsg}
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.ultimateParentCheckbox}\r\n
\r\n \r\n
\r\n \r\n {this.props.content.publicCheckbox}\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n {this.props.search.isLoading ?\r\n \r\n
\r\n Loading...
:\r\n this.state.peArray\r\n }\r\n {this.props.search.error}
\r\n \r\n \r\n {this.state.isLoading ?\r\n \r\n
\r\n Loading...
:\r\n this.state.companyDetails\r\n }\r\n {this.props.search.error}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\tthis.props.userData.VSId !== undefined ? this.props.content.vsId + \": \" + this.props.userData.VSId : null\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{this.state.organization}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t this.selectIsTestChk(e)} />\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t{this.props.content.testValueStory}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\r\n\t\t\t\t\r\n\r\n\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tuser: state.default,\r\n\t\tcurrency: decodeURIComponent('$'),\r\n\t\tvalidation: state.content.validation,\r\n\t\tcompanyData: state.companyProfileData,\r\n\t\tselectedValueStory: state.selectedValueStory,\r\n\t\tcurrencySymbols: state.content.CurrencySymbols,\r\n\t\tuserData: state.valueStory,\r\n\t\torganization: state.valueStory.Organization,\r\n\t\tcapIQData: state.capIQData,\r\n\t\tnewValueStory: state.isNewValueStory,\r\n\t\tcompany: state.content.capitalDetails,\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tuserDetailsLoading: (bool) => dispatch(userDetailsLoading(bool)),\r\n\t\tuserDetailsSuccess: (bool) => dispatch(userDetailsSuccess(bool)),\r\n\t\tuserDetailsFailure: (error) => dispatch(userDetailsFailure(error)),\r\n\t\tgetSPCapitalIQSuccess: message => dispatch(getSPCapitalIQSuccess(message)),\r\n\t\tgetSPCapitalIQFailure: error => dispatch(getSPCapitalIQFailure(error)),\r\n\t\tgetSPCapitalIQLoading: bool => dispatch(getSPCapitalIQLoading(bool)),\r\n\t\tgetSPCapitalIQData: (CapIQID) => dispatch(getSPCapitalIQData(CapIQID)),\r\n\t\tcapIQFetchData: (capIQData) => dispatch(capIQFetchData(capIQData))\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DiscoveryCompanyForm)\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\n// UI\r\nimport FaAngleRight from 'react-icons/lib/fa/angle-right'\r\n\r\n// Utils\r\nimport classnames from 'classnames'\r\nimport { BreakLine } from 'utils/Utils'\r\n\r\nconst DiscoveryButton = (props) =>\r\n\t { props.click !== undefined && props.click() } }>\r\n\t\t{ BreakLine(props.content) }\r\n\t\t
\r\n\r\nexport default DiscoveryButton\r\n\r\nDiscoveryButton.defaultProps = {\r\n\tdropdown: false\r\n}\r\n\r\nDiscoveryButton.propTypes = {\r\n\tclick: PropTypes.func,\r\n\tcontent: PropTypes.string.isRequired,\r\n\tdropdown: PropTypes.bool,\r\n\tactive: PropTypes.bool\r\n}\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\n//UI\r\nimport Button from 'UI/Button'\r\n\r\n// Utils\r\nimport classnames from 'classnames'\r\n\r\nconst DiscoveryNextButton = (props) =>\r\n\t\r\n\t\t\r\n\t
\r\n\r\nexport default DiscoveryNextButton\r\n\r\nDiscoveryNextButton.propTypes = {\r\n\tvisible: PropTypes.bool.isRequired,\r\n\tclick: PropTypes.func.isRequired,\r\n\tcontent: PropTypes.string.isRequired\r\n}","import React, { PureComponent } from 'react'\r\nimport { Link } from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\nimport { Form, actions } from 'react-redux-form'\r\nimport { getSourceValue } from '../SubLeverCalculation/SubLeverFormula'\r\nimport ScrollArea from 'react-scrollbar'\r\n// Actions\r\n\r\nimport {\r\n\tupdateOrganization,\r\n\tchangeIndustry,\r\n\tchangeLocation,\r\n\tupdateTotalSpend,\r\n\tgoToChoosePath\r\n} from 'actions/discoveryActions'\r\n\r\nimport {\r\n\ttoggleValueDriver,\r\n\ttoggleSubLever\r\n} from 'actions/valueDriverActions'\r\n\r\nimport {\r\n\taddValueStory,\r\n\taddValueStorySuccess,\r\n\taddValueStoryFailure,\r\n\topenValueStory,\r\n\topenValueStorySuccess,\r\n\topenValueStoryFailure,\r\n\tvalueStoryCurrentMenu,\r\n\tshowValueStoryMenu,\r\n\tsyncMenuAndButton\r\n}\r\n\tfrom 'actions/userActions'\r\n\r\nimport {\r\n\tisNewValueStory\r\n}\r\n\tfrom 'actions/searchActions'\r\n\r\nimport {\r\n\tinitPrioritiesItems\r\n}\r\n\tfrom 'actions/prioritiesActions'\r\n\r\nimport { valueStoryFetchDataSuccess } from 'actions/fetchValueStory'\r\n\r\n// Common Functions\r\nimport { subLeverChange } from 'components/BusinessValue/SubLeverChange'\r\n\r\n// Components\r\nimport DiscoveryForm from './DiscoveryForm'\r\nimport DiscoveryCompanyForm from './DiscoveryCompanyForm'\r\nimport DiscoveryButton from './DiscoveryButton'\r\nimport DiscoveryNextButton from './DiscoveryNextButton'\r\n\r\n// UI\r\nimport Button from 'UI/Button'\r\n\r\n// Utils\r\nimport classnames from 'classnames'\r\n// Utils\r\nimport { removeMask, getSubLeverIdObject, subLeverHasTotalSpend, round } from 'utils/Utils'\r\nimport { updateUserInput } from 'actions/subLeverCalculationActions'\r\n\r\n// Settings\r\nimport { routes, LAC } from 'Constants'\r\n\r\n\r\n\r\nexport class DiscoveryContainer extends PureComponent {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = {\r\n\t\t\tinterests: false,\r\n\t\t\tcount: 0,\r\n\t\t\tregions: [],\r\n\t\t\tdefault: '',\r\n\t\t\tAnnualRevenue: null,\r\n\t\t\tTotalSpend: 0,\r\n\t\t\tCurrency: '$',\r\n\t\t\tCurrencyCode: 'USD',\r\n\t\t\tOrganization: '',\r\n\t\t\tIndustry: '',\r\n\t\t\tLocation: '',\r\n\t\t\tCapIQId: '',\r\n\t\t\tCapIQCompany: '',\r\n\t\t\tPEId: '',\r\n\t\t\tPECompany: '',\r\n\t\t\tGlobalUltimateId: '',\r\n\t\t\tGlobalUltimateCompany: '',\r\n\t\t\tBPId: '',\r\n\t\t\tBPCompany: '',\r\n\t\t\tuserData: undefined,\r\n\t\t\tbtnDisabled: !this.props.form.valid || Number.parseFloat(this.props.userData.AnnualRevenue) === 0\r\n\t\t}\r\n\t\tthis.dispatchCapIQChange = this.dispatchCapIQChange.bind(this)\r\n\t\tthis.dispatchUpdateOrganization = this.dispatchUpdateOrganization.bind(this)\r\n\t\tthis.dispatchLocationChange = this.dispatchLocationChange.bind(this)\r\n\t\tthis.dispatchIndustryChange = this.dispatchIndustryChange.bind(this)\r\n\t\tthis.dispatchTotalSpendChange = this.dispatchTotalSpendChange.bind(this)\r\n\t\tthis.slideToInterests = this.slideToInterests.bind(this)\r\n\t\tthis.toggleInterestsVisibility = this.toggleInterestsVisibility.bind(this)\r\n\t\tthis.initialFieldValues = this.initialFieldValues.bind(this)\r\n\t\tthis.addValueStory = this.addValueStory.bind(this)\r\n\t\tthis.openValueStory = this.openValueStory.bind(this)\r\n\t\tthis.dispatchOpenValueStory = this.dispatchOpenValueStory.bind(this)\r\n\t\tthis.redirect = this.redirect.bind(this)\r\n\t\tthis.goToRoute = this.goToRoute.bind(this);\r\n\r\n\t\tthis.actions = this.getApplicationFeatureActions();\r\n\t}\r\n\r\n\t\r\n\r\n\tgetApplicationFeatureActions() {\r\n\t\tlet actions = [];\r\n\t\tlet applicationFeatures = this.props.user && this.props.user.user && this.props.user.user.applicationFeatures ? this.props.user.user.applicationFeatures : [];\r\n\t\tapplicationFeatures.map(applicationFeat => {\r\n\t\t\tactions.push(applicationFeat.Action);\r\n\t\t})\r\n\t\treturn actions;\r\n\t}\r\n\r\n\tslideToInterests() {\r\n\t\tif (this.props.form.valid) {\r\n\t\t\tthis.props.goToChoosePath(true)\r\n\t\t}\r\n\t}\r\n\r\n\ttoggleInterestsVisibility() {\r\n\t\tconst that = this\r\n\t\tthat.setState({\r\n\t\t\tinterests: !that.state.interests\r\n\t\t})\r\n\t}\r\n\r\n\tdispatchUpdateOrganization(organization) {\r\n\t\tthis.props.updateOrganization(organization)\r\n\t}\r\n\r\n\tdispatchCapIQChange(id) {\r\n\t\tthis.setState({ capIQId: id })\r\n\t}\r\n\r\n\tdispatchLocationChange(location, region) {\r\n\t\t//New Logic to play with json values\r\n\t\tvar industry = this.props.content.form.industries[this.props.userData.Industry]\r\n\t\tvar country = this.props.content.form.locations[location]\r\n\t\tvar spend = this.props.subLeverCalculationContent.subLeverCalculation[0].rows[0][0].content\r\n\t\tvar spendSourceValue = getSourceValue(3, country, region, industry, spend)\r\n\t\tthis.props.changeLocation(location, spendSourceValue)\r\n\t\t// Turn off Reduce Cost of Processing Payments sub lever\r\n\t\t// if selected country is Latin American Country (LAC)\r\n\t\tif (LAC.indexOf(this.props.content.form.locations[this.props.userData.Location]) > -1) {\r\n\t\t\tconst subLeverIdObject = {\r\n\t\t\t\tBVUIdIndex: 2,\r\n\t\t\t\tBVUSVDIdIndex: 2\r\n\t\t\t}\r\n\t\t\t// Dispatch to Redux\r\n\t\t\tthis.props.toggleSubLever(subLeverIdObject, false)\r\n\t\t}\r\n\t}\r\n\r\n\tdispatchIndustryChange(index) {\r\n\t\tvar industry = this.props.content.form.industries[index]\r\n\t\tvar country = this.props.content.form.locations[this.props.userData.Location]\r\n\t\tvar result = this.props.content.form.regions.find(region => region.Country.toLowerCase() == country.toLowerCase())\r\n\t\tvar region = result.Region;\r\n\t\tvar spend = this.props.subLeverCalculationContent.subLeverCalculation[0].rows[0][0].content\r\n\t\tvar spendSourceValue = getSourceValue(3, country, region, industry, spend)\r\n\t\tthis.props.changeIndustry(index, spendSourceValue)\r\n\t}\r\n\r\n\tdispatchTotalSpendChange(value) {\r\n\t\tthis.formDispatch(actions.change('discovery.TotalSpend', value))\r\n\t}\r\n\r\n\tcomponentWillReceiveProps(nextProps) {\r\n\t\t// Update controlled inputs on language, industry or total spend change\r\n\t\tif (this.props.content !== nextProps.content) {\r\n\t\t\tthis.formDispatch(actions.change('discovery.Industry', nextProps.content.form.industries[this.props.userData.Industry]))\r\n\r\n\t\t\tthis.formDispatch(actions.change('discovery.Location', nextProps.content.form.locations[this.props.userData.Location]))\r\n\t\t\tthis.formDispatch(actions.change('discovery.Organization', this.props.userData.Organization));\r\n\t\t}\r\n\t\tif (this.props.form.valid !== nextProps.form.valid || this.props.userData.AnnualRevenue !== nextProps.userData.AnnualRevenue) {\r\n\t\t\tthis.setState({ btnDisabled: !nextProps.form.valid || Number.parseFloat(nextProps.userData.AnnualRevenue) === 0 || nextProps.userData.Industry === \"\" })\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentWillMount() {\r\n\t\tthis.props.valueStoryCurrentMenu('Company');\r\n\t\tthis.props.showValueStoryMenu(true);\r\n\t\tthis.initialFieldValues();\r\n\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\r\n\t\t// Update Industry and spendAsPercentage\r\n\t\t//this.props.changeIndustry(this.props.userData.Industry, industryBusinessMatrix[this.props.userData.Industry].spendPercentage)\r\n\t\tvar industry = this.props.content.form.industries[this.props.userData.Industry]\r\n\t\tvar country = this.props.content.form.locations[this.props.userData.Location]\r\n\t\tif (industry && country) {\r\n\t\t\tvar result = this.props.content.form.regions.find(region => region.Country.toLowerCase() == country.toLowerCase())\r\n\t\t\tvar region = result.Region;\r\n\t\t\tvar spend = this.props.subLeverCalculationContent.subLeverCalculation[0].rows[0][0].content\r\n\t\t\tvar spendSourceValue = getSourceValue(3, country, region, industry, spend)\r\n\t\t\tthis.props.changeIndustry(this.props.userData.Industry, spendSourceValue)\r\n\t\t}\r\n\t\t// Navigation\r\n\t\tthis.props.goToChoosePath(false)\r\n\t\t//Pass organization value to reducer forms\r\n\t\tthis.formDispatch(actions.change('discovery.Organization', this.props.userData.Organization));\r\n\t\tthis.formDispatch(actions.change('discovery.Industry', industry));\r\n\t}\r\n\r\n\tinitialFieldValues() {\r\n\t\t/*const companyData = this.props.companyData ? this.props.companyData[0] : undefined;\r\n\t\tif(companyData) {\r\n\t\t\tconst industryIdx = this.props.content.form.industries.indexOf(companyData.Industry);\r\n\t\t\tconst locationIdx = this.props.content.form.locations.indexOf(companyData.Location);\r\n\t\t\tcompanyData.Industry = industryIdx;\r\n\t\t\tcompanyData.Location = locationIdx;\r\n\t\t}*/\r\n\t}\r\n\r\n\tredirect(routeName) {\r\n\t\tthis.props.history.push(routeName);\r\n\t}\r\n\r\n\topenValueStory(routeName) {\r\n\t\tthis.dispatchOpenValueStory(routeName)\r\n\t}\r\n\r\n\tdispatchOpenValueStory(routeName) {\r\n\t\tvar content = this.props.content;\r\n\t\tthis.state.selectedValueStory &&\r\n\t\t\tthis.props.openValueStory(this.state.selectedValueStory, this.props.user.user.Id)\r\n\t\t\t\t.then((response) => {\r\n\t\t\t\t\tif (response.status === 200) {\r\n\t\t\t\t\t\t// Push value story data to store\r\n\t\t\t\t\t\tthis.props.valueStoryFetchDataSuccess(response.data.Result)\r\n\r\n\t\t\t\t\t\t// Add indexes of selected priorities to priorities array in store\r\n\t\t\t\t\t\tlet items = response.data.Result.AreaOfInterest.map((item, i) => item.Selected && i)\r\n\t\t\t\t\t\titems = items.filter((item) => item !== false)\r\n\t\t\t\t\t\tthis.props.initPrioritiesItems(items)\r\n\t\t\t\t\t\tthis.props.isNewValueStory(false)\r\n\t\t\t\t\t\t// Reset form\r\n\t\t\t\t\t\tthis.formDispatch(actions.reset('addValueStory'))\r\n\r\n\t\t\t\t\t\tvar self = this;\r\n\t\t\t\t\t\tconst calculatedTotalSpend = round(self.props.spendAsPercentageOfRevenue * response.data.Result[\"AnnualRevenue\"], 2)\r\n\t\t\t\t\t\tif (response.data.Result[\"TotalSpend\"] != calculatedTotalSpend) {\r\n\t\t\t\t\t\t\tconst handleChange = this.props.handleChange\r\n\t\t\t\t\t\t\tthis.props.subLeverCalculationContent.subLeverCalculation.forEach(function (obj) {\r\n\r\n\t\t\t\t\t\t\t\tconst subLever = getSubLeverIdObject(obj.id)\r\n\r\n\t\t\t\t\t\t\t\tif (subLeverHasTotalSpend(obj.id)) {\r\n\t\t\t\t\t\t\t\t\thandleChange(response.data.Result[\"TotalSpend\"], subLever, 0)\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t// Update Total Spend in state\r\n\t\t\t\t\t\tthis.props.updateTotalSpend(response.data.Result[\"TotalSpend\"])\r\n\r\n\t\t\t\t\t\t// Update controlled input\r\n\t\t\t\t\t\tthis.dispatchTotalSpendChange(response.data.Result[\"TotalSpend\"])\r\n\r\n\r\n\t\t\t\t\t\t// Redirect to Discovery page\r\n\t\t\t\t\t\tthis.redirect(routeName)\r\n\r\n\t\t\t\t\t\t// update store status message\r\n\t\t\t\t\t\t// this.props.openValueStorySuccess()\r\n\r\n\t\t\t\t\t\t// reset store status message\r\n\t\t\t\t\t\t//setTimeout(() => {this.props.resetMessage()}, 100)\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse {\r\n\t\t\t\t\t\tvar httpStattus = response.response.data.Message\r\n\t\t\t\t\t\tvar failMsg = content[httpStattus]\r\n\t\t\t\t\t\tif (failMsg !== undefined) {\r\n\t\t\t\t\t\t\tfailMsg = failMsg.toString().replace(\"%userName%\", response.response.data.Result)\r\n\t\t\t\t\t\t\tthis.props.openValueStoryFailure(failMsg)\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}).catch((error) => {\r\n\t\t\t\t\t//this.props.openValueStoryFailure(error.response.data.Message)\r\n\t\t\t\t})\r\n\t}\r\n\r\n\taddValueStory(routeName) {\r\n\t\tvar content = this.props.content;\r\n\t\t//let values = Object.assign({}, formValues)\r\n\t\tthis.props.userData.Language = this.props.language.toUpperCase()\r\n\t\tthis.props.userData.Id = this.props.user.user.Id\r\n\r\n\t\t//values.TotalSpend = removeMask(values.TotalSpend, values.Currency)\r\n\t\t//values.AnnualRevenue = removeMask(values.AnnualRevenue, values.Currency)\r\n\r\n\t\t//Organization have taken from state\r\n\t\t//values.Organization = this.state.selectedPEName\r\n\t\t//values.PEId = this.state.selectedPEId\r\n\t\tthis.props.addValueStory(this.props.userData)\r\n\t\t\t.then((result) => {\r\n\t\t\t\tif (result.status === 200) {\r\n\t\t\t\t\t// Open Value Story\r\n\t\t\t\t\tthis.setState({\r\n\t\t\t\t\t\tselectedValueStory: result.data.Result.VSId\r\n\t\t\t\t\t}, () => {\r\n\t\t\t\t\t\tthis.openValueStory(routeName);\r\n\t\t\t\t\t})\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tvar httpStattus = result.response.status;\r\n\t\t\t\t\tvar failMsg = content[httpStattus]\r\n\t\t\t\t\tif (failMsg !== undefined) {\r\n\t\t\t\t\t\tfailMsg = failMsg.toString().replace(\"%ValueStoryName%\", this.props.userData.ValueStoryName)\r\n\t\t\t\t\t\tfailMsg = failMsg.toString().replace(\"%Organization%\", this.props.userData.Organization)\r\n\t\t\t\t\t\t//formValues.valueStoryName\r\n\t\t\t\t\t\tthis.props.addValueStoryFailure(failMsg)\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse {\r\n\t\t\t\t\t\tthis.props.addValueStoryFailure(result.response.data.Message)\r\n\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tvar httpStattus = error.response.status;\r\n\t\t\t\tvar failMsg = content[httpStattus]\r\n\t\t\t\tif (failMsg !== undefined) {\r\n\t\t\t\t\tfailMsg = failMsg.toString().replace(\"%ValueStoryName%\", this.props.userData.ValueStoryName)\r\n\t\t\t\t\tfailMsg = failMsg.toString().replace(\"%Organization%\", this.props.userData.Organization)\r\n\t\t\t\t\t//formValues.valueStoryName\r\n\t\t\t\t\tthis.props.addValueStoryFailure(failMsg)\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.props.addValueStoryFailure(error.response.data.Message)\r\n\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t}\r\n\r\n\tgoToRoute(routeName) {\r\n\t\tif (this.props.newValueStory) {\r\n\t\t\tthis.addValueStory(routeName);\r\n\t\t} else {\r\n\t\t\tif (this.props.form.valid && Number.parseFloat(this.props.userData.AnnualRevenue) !== 0) {\r\n\t\t\t\tthis.props.history.push(routeName);\r\n\t\t\t\twindow.scrollTo({\r\n\t\t\t\t\ttop: 0,\r\n\t\t\t\t\tbehavior: \"smooth\"\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\thandleMouseEnter(e){\r\n\t\tconst selectedButton = e.target.innerText;\r\n\t\tthis.props.syncMenuAndButton(selectedButton)\t\t\r\n\t}\r\n\r\n\thandleMouseLeave=()=>{\r\n\t\tthis.props.syncMenuAndButton('')\t\t\r\n\t}\r\n\r\n\trender() {\r\n\t\tlet slideClasses = classnames('discovery__slide')\r\n\r\n\t\tif (this.props.valueStoryIsLoading) {\r\n\t\t\treturn Loading...
\r\n\t\t} else {\r\n\t\t\treturn (\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t)\r\n\t\t}\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tui: state.content.ui,\r\n\t\tcontent: state.content.discovery,\r\n\t\tsubLeverCalculationContent: state.content.subLeverCalculations,\r\n\t\tuser: state.default,\r\n\t\tuserData: state.valueStory,\r\n\t\tspendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n\t\tform: state.discoveryForm.$form,\r\n\t\tslide: state.goToChoosePath,\r\n\t\tpriorities: state.priorities,\r\n\t\tvalueStoryHasErrored: state.valueStoryHasErrored,\r\n\t\tvalueStoryIsLoading: state.valueStoryIsLoading,\r\n\t\tbenchMarksData: state.benchMarksData,\r\n\t\tregions: state.regions,\r\n\t\tcompanyData: state.companyProfileData,\r\n\t\tselectedValueStory: state.selectedValueStory,\r\n\t\tnewValueStory: state.isNewValueStory,\r\n\t\thoverButton: state.syncMenuAndButton\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tupdateOrganization: (organization) => dispatch(updateOrganization(organization)),\r\n\t\tchangeLocation: (location, spendAsPercentageOfRevenue) => dispatch(changeLocation(location, spendAsPercentageOfRevenue)),\r\n\t\tchangeIndustry: (industry, spendAsPercentageOfRevenue) => dispatch(changeIndustry(industry, spendAsPercentageOfRevenue)),\r\n\t\tupdateTotalSpend: (spend) => dispatch(updateTotalSpend(spend)),\r\n\t\tgoToChoosePath: (bool) => dispatch(goToChoosePath(bool)),\r\n\t\ttoggleValueDriver: (id, bool) => dispatch(toggleValueDriver(id, bool)),\r\n\t\ttoggleSubLever: (id, bool) => dispatch(toggleSubLever(id, bool)),\r\n\t\thandleChange: (value, subLeverId, rowNumber) => dispatch(updateUserInput(value, subLeverId, rowNumber)),\r\n\t\taddValueStory: (formValues) => dispatch(addValueStory(formValues)),\r\n\t\taddValueStorySuccess: (valueStory) => dispatch(addValueStorySuccess(valueStory)),\r\n\t\taddValueStoryFailure: (error) => dispatch(addValueStoryFailure(error)),\r\n\t\topenValueStory: (VSId, Id) => dispatch(openValueStory(VSId, Id)),\r\n\t\topenValueStorySuccess: () => dispatch(openValueStorySuccess()),\r\n\t\topenValueStoryFailure: (error) => dispatch(openValueStoryFailure(error)),\r\n\t\tvalueStoryFetchDataSuccess: (valueStory) => dispatch(valueStoryFetchDataSuccess(valueStory)),\r\n\t\tinitPrioritiesItems: (items) => dispatch(initPrioritiesItems(items)),\r\n\t\tisNewValueStory: (data) => dispatch(isNewValueStory(data)),\r\n\t\tvalueStoryCurrentMenu: (menuItem) => dispatch(valueStoryCurrentMenu(menuItem)),\r\n\t\tshowValueStoryMenu: (menuItem) => dispatch(showValueStoryMenu(menuItem)),\r\n\t\tsyncMenuAndButton:(selectedButton)=>dispatch(syncMenuAndButton(selectedButton))\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DiscoveryContainer)\r\n","import React from 'react'\r\nimport classnames from 'classnames'\r\n\r\nconst InterestButton = (props) => {\r\n\tlet classes = classnames('interest-button', 'interest-button-' + props.id)\r\n\tlet parentClasses = classnames('interest-button-container', { 'active': props.state });\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\t\t\t this.formDispatch = dispatch}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{this.actions.indexOf(routes.areaOfInterest) > -1 ?\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
: null\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t{this.actions.indexOf(routes.skus) > -1 ?\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
: null\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{this.actions.indexOf(routes.yourSpend) > -1 ?\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t
: null\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t{this.actions.indexOf(routes.businessValue) > -1 ?\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t
: null\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\r\n\t\t\t{props.content.text}\r\n\t\t
\r\n\t)\r\n}\r\n\r\nexport default InterestButton\r\n","import React from 'react'\r\nimport InterestButton from './InterestButton'\r\nimport classnames from 'classnames'\r\n\r\n// Images\r\nimport supplyChainIcon from '../../images/plan-forecast.svg'\r\nimport sourcingIcon from '../../images/source-contract.svg'\r\nimport procurementIcon from '../../images/buy-deliver.svg'\r\nimport accountsPayableIcon from '../../images/invoice-pay.svg'\r\nimport workingCapitalIcon from '../../images/working-capital.svg'\r\nimport riskComplianceIcon from '../../images/supplier.svg'\r\n\r\nconst icons = [\r\n\tsupplyChainIcon,\r\n\tsourcingIcon,\r\n\tprocurementIcon,\r\n\taccountsPayableIcon,\r\n\tworkingCapitalIcon,\r\n\triskComplianceIcon\r\n]\r\n\r\nconst DiscoveryInterests = (props) => {\r\n\tlet classes = classnames('grid-container', 'discovery-interests', { active: props.active })\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t
\r\n\t)\r\n}\r\n\r\nexport default DiscoveryInterests\r\n","import React, { PureComponent } from 'react'\r\nimport { Link } from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\n\r\n// Actions\r\nimport { toggleAreaOfInterest, addPrioritiesItem, deletePrioritiesItem, initPrioritiesItems } from 'actions/prioritiesActions'\r\nimport {\r\n\tvalueStoryCurrentMenu,\r\n\tshowValueStoryMenu\r\n}\r\n\tfrom 'actions/userActions'\r\n\r\n// UI\r\nimport Button from 'UI/Button'\r\n\r\nimport { routes } from 'Constants'\r\n\r\nimport DiscoveryInterests from '../Discovery/DiscoveryInterests'\r\n\r\nclass AreaOfInterestContainer extends PureComponent {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n pathname: routes.priorities,\r\n priorityId: 0,\r\n vlmAlertDiv: false\r\n }\r\n\r\n this.dispatchToggleAreaOfInterest = this.dispatchToggleAreaOfInterest.bind(this)\r\n this.vlmAlertToggle = this.vlmAlertToggle.bind(this)\r\n \r\n }\r\n\r\n dispatchToggleAreaOfInterest(id, bool) {\r\n this.props.toggleAreaOfInterest(id, bool)\r\n\r\n // iPad doesn't like multiple dispatches to store in quick succession\r\n // and will not re-render the component\r\n // setTimeout to fix the bug\r\n setTimeout(() => {\r\n if (bool) {\r\n this.props.addPrioritiesItem(id)\r\n } else {\r\n this.props.deletePrioritiesItem(id)\r\n }\r\n\r\n }, 500)\r\n }\r\n\r\n componentWillMount() {\r\n this.props.valueStoryCurrentMenu('Priorities');\t\r\n\t\tthis.props.showValueStoryMenu(true);\t\t \t\r\n window.scrollTo(0, 0)\r\n }\r\n\r\n vlmAlertToggle() {\r\n this.setState(prevState => {return {vlmAlertDiv: !prevState.vlmAlertDiv}})\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n\t\t\t\t{props.content.map((data, i) =>\r\n\t\t\t\t\t
\r\n\t\t\r\n {/*
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n ui: state.content.ui,\r\n content: state.content.priorities,\r\n discoveryContent: state.content.discovery,\r\n userData: state.valueStory,\r\n priorities: state.priorities\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n toggleAreaOfInterest: (id, bool) => dispatch(toggleAreaOfInterest(id, bool)),\r\n addPrioritiesItem: (id) => dispatch(addPrioritiesItem(id)),\r\n deletePrioritiesItem: (id) => dispatch(deletePrioritiesItem(id)),\r\n initPrioritiesItems: (items) => dispatch(initPrioritiesItems(items)),\r\n valueStoryCurrentMenu: (menuItem) => dispatch(valueStoryCurrentMenu(menuItem)),\r\n showValueStoryMenu: (menuItem) => dispatch(showValueStoryMenu(menuItem)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(AreaOfInterestContainer)","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\n// UI\r\nimport Radio from 'react-mdl/lib/Radio'\r\nimport RadioGroup from 'react-mdl/lib/RadioGroup'\r\n\r\nconst Priority = (props) => {\r\n\tconst MyChildContainer = props => (\r\n
*/}\r\n \r\n {this.props.content.title}/ {this.props.content.areaOfInterestTitle}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.props.content.title}
\r\n {this.props.discoveryContent.vlmAlertHeader}
\r\n {\r\n {this.state.vlmAlertDiv ? {this.props.discoveryContent.vlmAlertDesc1}
{this.props.discoveryContent.vlmAlertDesc2}{this.props.discoveryContent.vlmAlertDesc3}. : ''}\r\n
}\r\n {this.props.discoveryContent.vlmAlertDesc2}{this.props.discoveryContent.vlmAlertDesc3}. : ''}\r\n
{this.props.content.subhead}
\r\n \r\n
\r\n \r\n
\r\n {this.props.content.areaOfInterestTitle}
\r\n {this.props.content.areaOfInterestTitleSubhead}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n \r\n \r\n \r\n }\r\n
\r\n {props.children}
)\r\n\r\n\treturn (\r\n\t\t// \r\n\t\t// \t props.dispatchRadioButtonChange(props.subIndex, e.target.value) }\r\n\t\t// \t\tname={props.id + '.' + props.subIndex} \r\n\t\t// \t\tvalue={\r\n\t\t// \t\t\tprops.userData[parseInt(props.subIndex)].Value ? (props.userData[parseInt(props.subIndex)].Value).toString() : 0\r\n\t\t// \t\t}\r\n\t\t// \t\tchildContainer={MyChildContainer}>\r\n\t\t// \t\t\t \r\n\t\t//
\r\n\t\t\r\n\t\t\t props.dispatchRadioButtonChange(props.userData[parseInt(props.subIndex)].Item, props.userData[parseInt(props.subIndex)].SubItem, props.subIndex, e.target.value, props.jsonSubIndex)}\r\n\t\t\t\tname={props.id + '.' + props.subIndex}\r\n\t\t\t\tvalue={\r\n\t\t\t\t\tprops.userData[parseInt(props.subIndex)].Value ? (props.userData[parseInt(props.subIndex)].Value).toString() : 0\r\n\t\t\t\t}\r\n\t\t\t\tchildContainer={MyChildContainer}>\r\n\t\t\t\t \r\n\t\t
\r\n\t)\r\n}\r\n\r\nexport default Priority\r\n\r\nPriority.propTypes = {\r\n\tdispatchRadioButtonChange: PropTypes.func.isRequired,\r\n\tid: PropTypes.number.isRequired,\r\n\tsubIndex: PropTypes.string.isRequired,\r\n\tuserData: PropTypes.array.isRequired\r\n}\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\n// Components\r\nimport Priority from './Priority'\r\n\r\n// Utils\r\nimport classnames from 'classnames'\r\nimport {\r\n\tgetCurrentLanguage\r\n} from 'utils/Utils'\r\n\r\nconst PrioritiesGroup = (props) => {\r\n\r\n\tvar subIndex = (subQuesdata) => {\r\n\t\tconst language = getCurrentLanguage()\r\n\t\tvar sIndex = 0\r\n\t\tvar obj = props.userData.map((data, i) => {\r\n\t\t\tvar itemName = language === \"en\" ? \"SubItem\" : \"SubItem\" + language.toUpperCase()\r\n\t\t\tif (props.userData[i][itemName].trim() === subQuesdata.subQuestion.trim()) {\r\n\t\t\t\tsIndex = i\r\n\t\t\t};\r\n\t\t})\r\n\t\treturn sIndex;\r\n\t}\r\n\r\n\tvar subQuestionLength = (subQuesdata) => {\r\n\t\tvar lenSubQtn = 0\r\n\t\t//var obj = props.userData.map((data, i) => {\r\n\t\t//if (props.userData[i].SubItem.trim() === subQuesdata.subQuestion.trim()) {\r\n\t\tlenSubQtn = subQuesdata.subQuestion.length//props.userData[i].SubItem.length\r\n\t\t//};\r\n\t\t//})\r\n\t\treturn lenSubQtn;\r\n\t}\r\n\r\n\tlet counter = props.rowIdx;\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t
\r\n\t)\r\n}\r\n\r\nexport default PrioritiesGroup\r\n\r\nPrioritiesGroup.propTypes = {\r\n\tid: PropTypes.number.isRequired,\r\n\tcontent: PropTypes.shape({\r\n\t\tquestion: PropTypes.string.isRequired,\r\n\t\tsubQuestions: PropTypes.array.isRequired\r\n\t}),\r\n\tuserData: PropTypes.array.isRequired,\r\n\tdispatchRadioButtonChange: PropTypes.func.isRequired\r\n}\r\n","import React from 'react'\r\nimport PrioritiesGroup from './PrioritiesGroup'\r\nimport PropTypes from 'prop-types'\r\nimport { connect } from 'react-redux'\r\n// Utils\r\nimport { getCurrentPriorityId } from 'utils/Utils'\r\n\r\nclass Priorities extends React.Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t}\r\n\r\n\tcomponentWillMount() {\r\n\t\twindow.scrollTo({top: 0, behavior: 'smooth'})\r\n\t}\r\n\t\r\n\trender() {\r\n\t\tlet questions = this.props.content.prioritySections[this.props.priorityId].questions;\r\n\t\tlet ctr;\r\n\t\treturn (\r\n\t\t\t{props.content.question}
\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t{props.content.subQuestions.map((data, i) => {\r\n\t\t\t\t\t\t\tcounter++;\r\n\t\t\t\t\t\t\treturn
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t {data.subQuestion}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n\t\r\n\r\n}\r\n\r\n\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tcontent: state.content.priorities,\r\n\t\tuserData: state.valueStory\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps)(Priorities)\r\n\r\nPriorities.propTypes = {\r\n\tcontent: PropTypes.array.isRequired,\r\n\tuserData: PropTypes.array.isRequired,\r\n\tdispatchRadioButtonChange: PropTypes.func.isRequired\r\n}","import { mappingSKUsPriorityAndSubLever } from 'Constants'\r\n\r\nimport {\r\n updateIncomeStatementAndBalanceSheet\r\n} from 'BusinessValue/BusinessValueCalculations'\r\nimport {\r\n toggleValueDriver,\r\n toggleSubLever,\r\n toggleSKU\r\n} from 'actions/valueDriverActions'\r\nimport { store } from 'index'\r\nimport {\r\n getSubLeverIdObject\r\n} from 'utils/Utils'\r\nimport {\r\n LanguageTranslationLoading\r\n} from \"actions/userActions\";\r\n\r\n\r\n\r\nexport const EnableSKUsFromSublevers = (BVUIdIndex, BVUSVDIdIndex) => {\r\n var subLeverId = (BVUIdIndex + 1) + '.' + (BVUSVDIdIndex + 1);\r\n var allSKUid = mappingSKUsPriorityAndSubLever.forEach(sku => {\r\n if(sku.autoOn === undefined){\r\n for (let index_subLever = 0; index_subLever < sku.mappedSubLever.length; index_subLever++) \r\n {\r\n const element = sku.mappedSubLever[index_subLever];\r\n if (element.subLeverId.toString() === subLeverId) {\r\n dispatchToggleSKU(sku.id, true, BVUIdIndex, BVUSVDIdIndex);\r\n break;\r\n }\r\n }\r\n }\r\n });\r\n return allSKUid;\r\n}\r\n\r\nexport const dispatchToggleSKU = (id, bool, BVUIdIndex, BVUSVDIdIndex) => {\r\n\r\n //debugger;\r\n // Dispatch to Redux Need to update \r\n let state = store.getState(),\r\n userData = state.valueStory;\r\n var _priorities = state.content.priorities === undefined ? state.content : state.content.priorities;\r\n \r\n var _PrioritiesForSKU = [];\r\n _PrioritiesForSKU = mappingSKUsPriorityAndSubLever[id - 1].mappedPriorities;\r\n \r\n for (let index_Priority = 0; index_Priority < _PrioritiesForSKU.length; index_Priority++) {\r\n var priorityElement = _PrioritiesForSKU[index_Priority];\r\n var _prioritySections = _priorities.prioritySections[priorityElement.prioritiesId];\r\n var QuestionInJson = _prioritySections.questions\r\n for (let index_Que = 0; index_Que < QuestionInJson.length; index_Que++) {\r\n const subQuestionsJSON = QuestionInJson[index_Que].subQuestions;\r\n var needToBreak = false;\r\n for (let index_SubQue = 0; index_SubQue < subQuestionsJSON.length; index_SubQue++) {\r\n const element_subQue = subQuestionsJSON[index_SubQue];\r\n if (priorityElement.priorityIndex.toString() === element_subQue.id) {\r\n var AOIValueDrivers = userData.AreaOfInterest[priorityElement.prioritiesId].AOIValueDrivers;\r\n for (let index_AOI = 0; index_AOI < AOIValueDrivers.length; index_AOI++) {\r\n const aoiValuDriver_userDate = AOIValueDrivers[index_AOI];\r\n if (aoiValuDriver_userDate.SubItem === element_subQue.subQuestion) {\r\n\r\n if ((aoiValuDriver_userDate.SKUId == null || aoiValuDriver_userDate.SKUId == '') && bool) {\r\n aoiValuDriver_userDate.SKUId = id \r\n }\r\n else if (bool) {\r\n var existingSkuId = aoiValuDriver_userDate.SKUId;\r\n if (existingSkuId.split(',').indexOf(id) < 0) {\r\n aoiValuDriver_userDate.SKUId = existingSkuId + ',' + id\r\n }\r\n \r\n }\r\n\r\n if (!bool) {\r\n var existingSkuId = aoiValuDriver_userDate.SKUId;\r\n if (existingSkuId !== null && existingSkuId.split(',').indexOf(id) > -1) {\r\n var sepratedSkuID = existingSkuId.split(',');\r\n var newSkuIDs = null;\r\n for (let index = 0; index < sepratedSkuID.length; index++) {\r\n const elementSKU = sepratedSkuID[index];\r\n if (elementSKU !== id) {\r\n if (newSkuIDs === null) {\r\n newSkuIDs = elementSKU;\r\n }\r\n else {\r\n newSkuIDs = newSkuIDs + ',' + elementSKU\r\n }\r\n }\r\n }\r\n aoiValuDriver_userDate.SKUId = newSkuIDs;\r\n \r\n }\r\n\r\n }\r\n userData.AreaOfInterest[priorityElement.prioritiesId].AOIValueDrivers[index_AOI] = aoiValuDriver_userDate;\r\n }\r\n };\r\n \r\n }\r\n }\r\n \r\n\r\n }\r\n };\r\n \r\n\r\n enableCorrospondingSublever(id, bool, BVUIdIndex, BVUSVDIdIndex);\r\n\r\n updateIncomeStatementAndBalanceSheet()\r\n\r\n}\r\n\r\nexport const enableCorrospondingSublever = (id, bool, BVUIdIndex, BVUSVDIdIndex) => {\r\n if (BVUIdIndex === undefined && BVUSVDIdIndex === undefined) {\r\n\r\n if (!bool) {\r\n\r\n var _subLeversForSKU = mappingSKUsPriorityAndSubLever[id - 1].mappedSubLever;\r\n var ValueDriversId = [];\r\n //SKU to Sublever \r\n\r\n\r\n var existingSelectedSKUs = getExistingSelectedSKU();\r\n var subLeverForExistingSKU = [];\r\n for (let index = 0; index < existingSelectedSKUs.length; index++) {\r\n const skuId = existingSelectedSKUs[index];\r\n if (subLeverForExistingSKU.indexOf(skuId - 1) < 0) {\r\n var mappedSubLevers = mappingSKUsPriorityAndSubLever[skuId - 1].mappedSubLever.forEach(element_sub =>{\r\n if(subLeverForExistingSKU.indexOf(element_sub.subLeverId) <0){\r\n subLeverForExistingSKU.push(element_sub.subLeverId);\r\n }\r\n })\r\n \r\n }\r\n }\r\n\r\n var innerIndex = 0;\r\n _subLeversForSKU.forEach(element => {\r\n if (element !== null) {\r\n var ids = getSubLeverIdObject(element.subLeverId.toString()); \r\n var isSubLeverExist = subLeverForExistingSKU.indexOf(element.subLeverId) < 0 ? store.dispatch(toggleSubLever(ids, bool)) : null;\r\n\r\n if (isSubLeverExist != null && ValueDriversId.indexOf(ids.BVUIdIndex) < 0) {\r\n ValueDriversId.push(ids.BVUIdIndex)\r\n }\r\n }\r\n innerIndex++;\r\n });\r\n\r\n }\r\n else {\r\n var _subLeversForSKU = mappingSKUsPriorityAndSubLever[id - 1].mappedSubLever;\r\n var ValueDriversId = [];\r\n //SKU to Sublever \r\n _subLeversForSKU.forEach(element => {\r\n if (element !== null) {\r\n var ids = getSubLeverIdObject(element.subLeverId.toString());\r\n store.dispatch(toggleSubLever(ids, bool));\r\n if (ValueDriversId.indexOf(ids.BVUIdIndex) < 0) {\r\n ValueDriversId.push(ids.BVUIdIndex)\r\n }\r\n\r\n }\r\n });\r\n }\r\n\r\n\r\n let state = store.getState();\r\n let userData = state.valueStory;\r\n ValueDriversId.forEach(element => {\r\n if (bool) {\r\n store.dispatch(toggleValueDriver(element, bool));\r\n }\r\n else {\r\n var checkdValuDriver = false;\r\n var test = userData.BusinessValueToYou[0].ValueDriver[element].\r\n SubLever.forEach(function loop(subelement) {\r\n if (subelement.Selected) {\r\n checkdValuDriver = subelement.Selected;\r\n loop.stop = true;\r\n }\r\n });\r\n store.dispatch(toggleValueDriver(element, checkdValuDriver));\r\n }\r\n })\r\n }\r\n else {\r\n store.dispatch(toggleSubLever({ BVUIdIndex, BVUSVDIdIndex }, bool));\r\n }\r\n\r\n}\r\n\r\nexport const getExistingSelectedSKU = () => {\r\n var existingSelectedSKUs = [];\r\n let _instance = this;\r\n let state = store.getState();\r\n let userData = state.valueStory;\r\n userData.AreaOfInterest.forEach(element => {\r\n element.AOIValueDrivers.forEach(element_ValueDriver => {\r\n\r\n if (element_ValueDriver.SKUId !== null && element_ValueDriver.SKUId !== undefined) {\r\n var splittedSKUList = element_ValueDriver.SKUId.toString().split(',');\r\n for (let index = 0; index < splittedSKUList.length; index++) {\r\n const element = splittedSKUList[index];\r\n if (element != null && existingSelectedSKUs.indexOf(element.toString()) === -1) {\r\n existingSelectedSKUs.push(element.toString());\r\n }\r\n }\r\n }\r\n });\r\n });\r\n return existingSelectedSKUs;\r\n}","import React, { PureComponent } from 'react'\r\nimport { Link } from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\n\r\n// Actions\r\nimport { priorityLevelChange } from 'actions/prioritiesActions'\r\nimport {\r\n\ttoggleValueDriver,\r\n\ttoggleSubLever\r\n} from 'actions/valueDriverActions'\r\n\r\nimport {\r\n\tvalueStoryCurrentMenu,\r\n\tshowValueStoryMenu\r\n}\r\n\tfrom 'actions/userActions'\r\n\r\n// Components\r\nimport Priorities from './Priorities'\r\nimport TabPanel from '../Tabs/TabPanel'\r\n\r\nimport GoArrowLeft from 'react-icons/lib/go/arrow-left'\r\n\r\n// Common Functions\r\nimport { dispatchToggleSKU } from 'components/SKU/SolutionChange'\r\n\r\nimport { routes, mappingSKUsPriorityAndSubLever } from 'Constants'\r\n\r\nclass PrioritiesContainer extends PureComponent {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = {\r\n\t\t\trender: false,\r\n\t\t\tpathname: routes.priorities,\r\n\t\t\tnextPageId: 0,\r\n\t\t\tpriorityId: 0,\r\n\t\t\tcount: 0,\r\n\t\t\tnextButtonLabel: props.ui.next\r\n\t\t}\r\n\r\n\t\tthis.dispatchRadioButtonChange = this.dispatchRadioButtonChange.bind(this)\r\n\t\tthis.intializePrioritiesTabs = this.intializePrioritiesTabs.bind(this)\r\n\t\tthis.dispatchTabChange = this.dispatchTabChange.bind(this)\r\n\t\tthis.getPriorityTabComponent = this.getPriorityTabComponent.bind(this)\r\n\t\tthis.dispatchLastButtonClick = this.dispatchLastButtonClick.bind(this)\r\n\t\tthis.vlmAlertToggle = this.vlmAlertToggle.bind(this)\r\n\t}\r\n\r\n\tintializePrioritiesTabs() {\r\n\t\tconst tabs = [];\r\n\t\tthis.props.priorities.map(priority => (\r\n\t\t\ttabs.push({\r\n\t\t\t\tid: priority,\r\n\t\t\t\tlabel: this.props.content.prioritySections[priority].name,\r\n\t\t\t\tcomponent: this.getPriorityTabComponent(priority)\r\n\t\t\t})\r\n\t\t))\r\n\r\n\t\tthis.setState({\r\n\t\t\ttabs: tabs,\r\n\t\t\tpriorityId: this.props.priorities[0]\r\n\t\t})\r\n\r\n\t\tif (this.props.priorities.length === 1) {\r\n\t\t\tthis.setState({\r\n\t\t\t\tnextButtonLabel: this.props.ui.next//this.props.content.goToSpendButton,\r\n\t\t\t\t//\trender: true\r\n\t\t\t})\r\n\t\t}\r\n\t}\r\n\r\n\tdispatchTabChange(priorityId) {\r\n\t\tthis.setState({\r\n\t\t\tpriorityId: priorityId,\r\n\t\t\tnextButtonLabel: this.props.ui.next\r\n\t\t})\r\n\r\n\t\t// if(this.props.priorities[this.props.priorities.length - 1] === priorityId) {\r\n\t\t// \tthis.setState({\r\n\t\t// \t\tnextButtonLabel: this.props.ui.next//this.props.content.goToSpendButton,\r\n\t\t// \t\t//\trender: true\r\n\t\t// \t})\r\n\t\t// }\r\n\t}\r\n\r\n\tdispatchLastButtonClick(tabId) {\r\n\t\tif (this.props.user !== undefined && this.props.user.user.applicationFeatures !== undefined && this.props.user.user.applicationFeatures.findIndex((a) => a.Action === '/yourSpend') > -1) {\r\n\t\t\tthis.props.history.push(`/yourSpend`)\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.props.history.push(`/skus`)\r\n\t\t}\r\n\r\n\t}\r\n\r\n\tdispatchRadioButtonChange(item, subQuestion, subIndex, value, jsonSubIndex) {\r\n\t\t//AreaOfInterest\r\n\t\tvar listSKU = null;\r\n\t\tvar _instance = this;\r\n\t\tvar existingSKUIds = this.props.userData.AreaOfInterest[this.state.priorityId].AOIValueDrivers[subIndex].SKUId\r\n\r\n\t\tfor (let index_SKUs = 0; index_SKUs < mappingSKUsPriorityAndSubLever.length; index_SKUs++) {\r\n\t\t\tif (mappingSKUsPriorityAndSubLever[index_SKUs].autoOn === undefined) {\r\n\t\t\t\tconst mappedPriorities = mappingSKUsPriorityAndSubLever[index_SKUs].mappedPriorities;\r\n\t\t\t\tfor (let index_prior = 0; index_prior < mappedPriorities.length; index_prior++) {\r\n\t\t\t\t\tconst priority = mappedPriorities[index_prior];\r\n\t\t\t\t\tif (priority.prioritiesId === this.state.priorityId && priority.priorityIndex.toString() === jsonSubIndex) {\r\n\t\t\t\t\t\tif (value >= 4) {\r\n\t\t\t\t\t\t\tif (listSKU === null) {\r\n\t\t\t\t\t\t\t\tlistSKU = mappingSKUsPriorityAndSubLever[index_SKUs].id;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\tlistSKU = listSKU + ',' + mappingSKUsPriorityAndSubLever[index_SKUs].id;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\tdispatchToggleSKU(mappingSKUsPriorityAndSubLever[index_SKUs].id, true);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\telse if (existingSKUIds !== undefined && existingSKUIds !== null) {\r\n\t\t\t\t\t\t\tvar splittedSKUList = existingSKUIds.split(',');\r\n\t\t\t\t\t\t\tfor (let index = 0; index < splittedSKUList.length; index++) {\r\n\t\t\t\t\t\t\t\tconst element = splittedSKUList[index];\r\n\t\t\t\t\t\t\t\tif (existingSKUIds.split(',').indexOf(mappingSKUsPriorityAndSubLever[index_SKUs].id) < 0) {\r\n\t\t\t\t\t\t\t\t\tif (listSKU === null) {\r\n\t\t\t\t\t\t\t\t\t\tlistSKU = element;\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\t\t\tlistSKU = listSKU + ',' + element;\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\tbreak;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\t\tdispatchToggleSKU(element, false);\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tthis.props.userData.AreaOfInterest[this.state.priorityId].AOIValueDrivers[subIndex].SKUId = listSKU;\r\n\t\t// Dispatch to Redux\r\n\t\tthis.props.priorityLevelChange(this.state.priorityId, subIndex, Number(value))\r\n\r\n\t}\r\n\r\n\tcomponentWillMount() {\r\n\t\twindow.scrollTo(0, 0)\r\n\t\tthis.props.valueStoryCurrentMenu('Priorities');\r\n\t\tthis.props.showValueStoryMenu(true);\r\n\t\t//\tthis.getNextPage()\r\n\t\tthis.intializePrioritiesTabs()\r\n\t}\r\n\r\n\tgetPriorityTabComponent(priorityId) {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t{questions.map((data, i) => {\r\n\t\t\t\t\t\tctr = i > 0 ? ctr + questions[i - 1].subQuestions.length : 0;\r\n\t\t\t\t\t\treturn ()\r\n\t\t\t\t\t})\r\n\t\t\t\t\t}\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n\r\n\tvlmAlertToggle() {\r\n this.setState(prevState => {return {vlmAlertDiv: !prevState.vlmAlertDiv}})\r\n }\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t{this.props.content.prioritySections[priorityId].title}
\r\n\t\t\t\t\t{this.props.content.prioritySections[priorityId].description}
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t{this.props.content.priorityLevels[0]}
\r\n\t\t\t\t\t\t\t{this.props.content.priorityLevels[1]}
\r\n\t\t\t\t\t\t\t{this.props.content.priorityLevels[2]}
\r\n\t\t\t\t\t\t\t{this.props.content.priorityLevels[3]}
\r\n\t\t\t\t\t\t\t{this.props.content.priorityLevels[4]}
\r\n\t\t\t\t\t\t\r\n\t\t\t\t{\r\n\t\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tuser: state.default,\r\n\t\tui: state.content.ui,\r\n\t\tcontent: state.content.priorities,\r\n\t\tuserData: state.valueStory,\r\n\t\tpriorities: state.priorities,\r\n\t\tdiscoveryContent: state.content.discovery\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tpriorityLevelChange: (priorityId, subIndex, value) => dispatch(priorityLevelChange(priorityId, subIndex, value)),\r\n\t\ttoggleValueDriver: (id, bool) => dispatch(toggleValueDriver(id, bool)),\r\n\t\ttoggleSubLever: (id, bool) => dispatch(toggleSubLever(id, bool)),\r\n\t\tvalueStoryCurrentMenu: (menuItem) => dispatch(valueStoryCurrentMenu(menuItem)),\r\n\t\tshowValueStoryMenu: (menuItem) => dispatch(showValueStoryMenu(menuItem)),\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(PrioritiesContainer)","import React from 'react'\r\n\r\n// Utils\r\nimport classnames from 'classnames'\r\n\r\n// UI\r\nimport GoCheck from 'react-icons/lib/go/check'\r\nimport GoPlus from 'react-icons/lib/go/plus'\r\n\r\nconst ValueDriver = (props) =>\r\n\t\r\n\t\t\t\t\t\t
}\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t{this.props.content.title}/ {this.props.content.areaOfInterestTitle}/ {this.props.content.prioritySections[this.state.priorityId].name}\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t{this.props.content.title}\r\n\t\t\t\t\t
\r\n\t\t\t\t\t{this.props.discoveryContent.vlmAlertHeader}
\r\n\t\t\t\t\t{\r\n {this.state.vlmAlertDiv ? {this.props.discoveryContent.vlmAlertDesc1}
{this.props.discoveryContent.vlmAlertDesc2}{this.props.discoveryContent.vlmAlertDesc3}. : ''}\r\n
}\r\n\t\t\t\t{this.props.discoveryContent.vlmAlertDesc2}{this.props.discoveryContent.vlmAlertDesc3}. : ''}\r\n
\r\n\t\t\t\t\t{/*
\r\n\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t![](\"images/back_inactive.svg\")
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
*/}\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t {\r\n\t\t\t\te.stopPropagation()\r\n\t\t\t\tprops.dispatchToggleValueDriver(props.id, !props.state)\r\n\t\t\t}\r\n\t\t\t}>\r\n\t\t
\r\n\t\t\r\n\t- \r\n\t\t\t\t{this.props.content.map((data, i) =>\r\n\t\t\t\t\t
\r\n\t\t
\r\n\r\nexport default Value\r\n\r\nValue.propTypes = {\r\n\tcurrency: PropTypes.string.isRequired,\r\n\ttext: PropTypes.string.isRequired\r\n}\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\n// Utils\r\nimport { roundFix, formatThousands } from 'utils/Utils'\r\n\r\nconst SubLeverValue = (props) => {\r\n\tlet value = props.estimatedValueAmount\r\n\tvalue = (isNaN(value) || value === null) ? 1 : value\r\n\r\n\treturn (\r\n\t\t{props.text}
\r\n\t\t\r\n\t\t\t{props.currency}\r\n\t\t\t{props.amount}\r\n\t\t\tM\r\n\t\t
\r\n\t\r\n\t\t\t
\r\n\t)\r\n}\r\n\r\nexport default SubLeverValue\r\n\r\nSubLeverValue.propTypes = {\r\n\tcurrency: PropTypes.string.isRequired,\r\n\ttext: PropTypes.string.isRequired\r\n}\r\n","import React from 'react'\r\n\r\n// UI\r\nimport GoCheck from 'react-icons/lib/go/check'\r\nimport GoPlus from 'react-icons/lib/go/plus'\r\n\r\nconst AddIcon = (props) =>\r\n\t\r\n\t{props.text}
\r\n\t\t\t\r\n\t\t\t\t{props.currency}\r\n\t\t\t\t{formatThousands(roundFix(value, 2))}\r\n\t\t\t\tM\r\n\t\t\t
\r\n\t\t\r\n\t\t\t\t\r\n\t\t\t
\r\n\r\n\t\t)\r\n\t}\r\n\r\n\tif (props.active) {\r\n\t\treturn (\r\n\t\t\t{BreakLine(props.data)}
\r\n\t\t\t\t \r\n\t\t{props.content.map((data, i) =>\r\n\t\t\t\r\n\t\t)}\r\n\t
\r\n\r\nexport default SubLevers\r\n\r\nSubLevers.propTypes = {\r\n\tid: PropTypes.number.isRequired,\r\n\tcurrency: PropTypes.string.isRequired,\r\n\testimatedValue: PropTypes.string.isRequired,\r\n\tdispatchToggleSubLever: PropTypes.func.isRequired\r\n}\r\n","import React, { PureComponent } from 'react'\r\nimport { Link } from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\n\r\n// Actions\r\nimport {\r\n\ttoggleValueDriver,\r\n\ttoggleSubLever\r\n} from 'actions/valueDriverActions'\r\n\r\nimport {\r\n\tsetEstimatedAnnualValue,\r\n\tupdateSubLeverRowValue\r\n}\r\n\tfrom 'actions/subLeverCalculationActions'\r\n\r\nimport { selectedValueDriver } from 'actions/valueDriverActions'\r\n\r\n// Components\r\nimport ValueDrivers from './ValueDrivers'\r\nimport Value from './Value'\r\nimport SubLevers from './SubLevers'\r\n\r\n// Functions\r\nimport { updateIncomeStatementAndBalanceSheet } from './BusinessValueCalculations'\r\n\r\n// Utils\r\nimport { getSubLeverIdObject, formatThousands, round } from 'utils/Utils'\r\n\r\n// UI\r\nimport Button from 'UI/Button'\r\n\r\n// Settings\r\nimport { routes } from 'Constants'\r\nimport { EnableSKUsFromSublevers } from 'components/SKU/SolutionChange'\r\nexport class BusinessValueContainer extends PureComponent {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = {\r\n\t\t\trender: false\r\n\t\t}\r\n\r\n\t\tthis.selectValueDriver = this.selectValueDriver.bind(this)\r\n\t\tthis.dispatchToggleValueDriver = this.dispatchToggleValueDriver.bind(this)\r\n\t\tthis.dispatchToggleSubLever = this.dispatchToggleSubLever.bind(this)\r\n\t}\r\n\r\n\tselectValueDriver(id) {\r\n\t\tthis.props.selectedValueDriver(id)\r\n\t}\r\n\r\n\tdispatchToggleValueDriver(id, bool) {\r\n\t\t// Dispatch to Redux\r\n\t\tthis.props.toggleValueDriver(id, bool)\r\n\r\n\t\t// Toggle selected state of all child Sub Levers to true if\r\n\t\t// parent Value Driver is toggled\r\n\t\tthis.props.userData.BusinessValueToYou[0].ValueDriver[id].SubLever.forEach((e, i) => {\r\n\t\t\t// Dispatch to store\r\n\t\t\tthis.props.toggleSubLever({ BVUIdIndex: id, BVUSVDIdIndex: i }, bool)\r\n\t\t\tif (bool) {\r\n\t\t\t\tEnableSKUsFromSublevers(id, i);\r\n\t\t\t}\r\n\t\t})\r\n\r\n\t\tupdateIncomeStatementAndBalanceSheet()\r\n\t}\r\n\r\n\tdispatchToggleSubLever(id, bool) {\r\n\t\tconst subLeverIdObject = getSubLeverIdObject(id)\r\n\t\tlet valueDriverSwitch\r\n\r\n\t\t// Dispatch to Redux\r\n\t\tthis.props.toggleSubLever(subLeverIdObject, bool)\r\n\t\tif (bool) {\r\n\t\t\tEnableSKUsFromSublevers(subLeverIdObject.BVUIdIndex, subLeverIdObject.BVUSVDIdIndex);\r\n\t\t}\r\n\r\n\t\t// Check selected state of sibling Sub Levers and toggled Sub Lever\r\n\t\t// If none are selected, set selected state of parent Value Driver to false\r\n\t\tvalueDriverSwitch = this.props.userData.BusinessValueToYou[0].ValueDriver[subLeverIdObject.BVUIdIndex].SubLever.some((e, i) => {\r\n\t\t\t// Return sibling Sub Lever selected state and not currently toggled Sub Lever's state\r\n\t\t\treturn (e.Selected === true && i !== subLeverIdObject.BVUSVDIdIndex) || bool\r\n\t\t})\r\n\r\n\t\t// Dispatch to Redux\r\n\t\t// Toggle associated Value Driver to selected if any child Sub Lever is selected\r\n\t\t// Toggle associated Value Driver to unselected if no child Sub Lever is selected\r\n\t\tthis.props.toggleValueDriver(subLeverIdObject.BVUIdIndex, valueDriverSwitch)\r\n\r\n\t\tupdateIncomeStatementAndBalanceSheet()\r\n\t}\r\n\r\n\tshouldComponentUpdate(nextProps, nextState) {\r\n\t\treturn nextState.render ? true : false\r\n\t}\r\n\r\n\tcomponentWillMount() {\r\n\t\twindow.scrollTo(0, 0)\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tupdateIncomeStatementAndBalanceSheet()\r\n\t\tthis.setState({\r\n\t\t\trender: true\r\n\t\t})\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tcontent: state.content.businessValue,\r\n\t\tsubLeverCalculationContent: state.content.subLeverCalculations.subLeverCalculation,\r\n\t\tuserData: state.valueStory,\r\n\t\tcurrency: decodeURIComponent(state.valueStory.Currency),\r\n\t\tspendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n\t\tactiveValueDriver: state.selectedValueDriver\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tselectedValueDriver: (id) => dispatch(selectedValueDriver(id)),\r\n\t\ttoggleValueDriver: (id, bool) => dispatch(toggleValueDriver(id, bool)),\r\n\t\ttoggleSubLever: (id, bool) => dispatch(toggleSubLever(id, bool)),\r\n\t\tupdateSubLeverRowValue: (value, subLeverId, rowNumber, valueType) => dispatch(updateSubLeverRowValue(value, subLeverId, rowNumber, valueType)),\r\n\t\tsetEstimatedAnnualValue: (value, subLeverId) => dispatch(setEstimatedAnnualValue(value, subLeverId))\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(BusinessValueContainer)\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { round, formatThousands } from 'utils/Utils'\r\n\r\n// UI\r\nimport MaskedInput from 'react-text-mask'\r\nimport createNumberMask from 'text-mask-addons/dist/createNumberMask'\r\n\r\n// Utils\r\nimport { onChangeRemoveMask } from 'utils/Utils'\r\n\r\nconst BenefitRealizationFactor = (props) => {\r\n\tconst count = 5\r\n\tlet inputs = []\r\n\r\n\tconst numberMask = createNumberMask({\r\n\t\tprefix: '',\r\n\t\tsuffix: ' %',\r\n\t\tallowDecimal: true,\r\n\t\tdecimalLimit: 2\r\n\t})\r\n\r\n\tconst handleInputChange = (e, i) => {\r\n\t\tprops.handleInputChange(onChangeRemoveMask(e, props.currency), i)\r\n\t}\r\n\r\n\tfor (let i = 0; i < count; i++) {\r\n\t\tinputs.push(\r\n\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t{this.props.content.title}
\r\n\t\t\t\t\t{this.props.content.description}
\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t{this.props.content.valueDriversTitle}
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t{props.currency} {val ? formatThousands(Number(val)) : 0} M
)\r\n\t})\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t
\r\n\t)\r\n}\r\n\r\nexport default BenefitRealizationFactor\r\n\r\nBenefitRealizationFactor.propTypes = {\r\n\thandleInputChange: PropTypes.func.isRequired,\r\n\tcurrency: PropTypes.string,\r\n\tbenefitRealizationFactors: PropTypes.arrayOf(PropTypes.number).isRequired,\r\n\tcontent: PropTypes.shape({\r\n\t\ttableHeaders: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n\t\tbenefitRealizationFactor: PropTypes.string.isRequired\r\n\t})\r\n}\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\n// Utils\r\nimport { round, formatThousands } from 'utils/Utils'\r\n\r\nconst RowHeader = (props) => {\r\n\tif (props.index > 0) {\r\n\t\treturn \r\n\t\t\t\t{props.content.benefitRealizationFactor}\r\n\t\t\t
\r\n\t\t\t\r\n\t\t\t\t{props.content.tableHeaders.map((data, i) =>\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t handleInputChange(e, i)}\r\n\t\t\t\t\t\t\tpattern=\"[0-9]*\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t
\r\n\t\t\t\t)}\r\n\t\t\t{data}
\r\n\t\t\t\t\t\t\r\n\t\t\t\t{props.content.totalAnnualBenefits}\r\n\t\t\t
\r\n\t\t\t\r\n\t\t\t\t{totalAnnualBenefits}\r\n\t\t\t
\r\n\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{rows.map((data, i) =>\r\n\t\t\t\t\t\t\tdata.map((content, j) =>\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t
\r\n\t\t)\r\n\t}\r\n\r\n\treturn | {props.content.totalAnnualBenefits} | \r\n\t\t\t\t\t\t\t{totalAnnualBenefits}\r\n\t\t\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tcontent: state.content.businessValueFromSAPAriba,\r\n\t\tbusinessValueFromSAPAribaData: state.valueStory.BusinessValueFromSap[0],\r\n\t\tuserData: state.valueStory.BusinessValueToYou[0],\r\n\t\tbusinessValueContent: state.content.businessValue,\r\n\t\tcurrency: decodeURIComponent(state.valueStory.Currency)\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tupdateTotalBenefit: (value, year) => dispatch(updateTotalBenefit(value, year)),\r\n\t\tupdateBenefitRealizationFactor: (value, year) => dispatch(updateBenefitRealizationFactor(value, year))\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(BusinessValueFromSAPAribaContainer)\r\n","import React from 'react'\r\n\r\nconst SubLeverCalculationTableHeaders = (props) =>\r\n\t\r\n\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t{this.props.content.title}
\r\n\t\t\t\t\t\t{this.props.content.description}
\r\n\r\n\t\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tui: state.content.ui,\r\n\t\tcontent: state.content.calculateROI,\r\n\t\tuserData: state.valueStory.BusinessValueFromSap[0].ROI,\r\n\t\tWACC: state.valueStory.BusinessValueToYou[0].ValueDriver[3].SubLever[1].UserInput[4].UserInput,\r\n\t\tNPV: state.valueStory.BusinessValueFromSap[0].NPV,\r\n\t\tROI: state.valueStory.BusinessValueFromSap[0].ROIValue,\r\n\t\tvalueOfDelayedInvestment: state.valueStory.BusinessValueFromSap[0].ValueOfDelayedInvestment,\r\n\t\tpaybackPeriod: state.valueStory.BusinessValueFromSap[0].Payback,\r\n\t\tcurrency: decodeURIComponent(state.valueStory.Currency),\r\n\t\tbusinessValueFromSAPAribaData: state.valueStory.BusinessValueFromSap[0],\r\n\t\tvalueStory: state.valueStory\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tupdateTotalBenefit: (value, year) => dispatch(updateTotalBenefit(value, year)), \r\n\t\tupdateUserInput: (value, row, year) => dispatch(updateUserInput(value, row, year)) \r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CalculateROIContainer)\r\n","import React, { PureComponent } from 'react'\r\nimport { Link } from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\n\r\n// Components\r\nimport TabPanel from '../Tabs/TabPanel'\r\n\r\nimport { routes } from 'Constants'\r\nimport BusinessValueContainer from '../BusinessValue/BusinessValueContainer';\r\nimport BusinessValueFromSAPAribaContainer from '../BusinessValueFromSAPAriba/BusinessValueFromSAPAribaContainer';\r\nimport CalculateROIContainer from '../CalculateROI/CalculateROIContainer';\r\n\r\nimport {\r\n\tvalueStoryCurrentMenu,\r\n\tshowValueStoryMenu\r\n}\r\n\tfrom 'actions/userActions'\r\n\r\nclass BusinessCaseContainer extends PureComponent {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = {\r\n\t\t\ttabId: 1,\r\n\t\t\tnextButtonLabel: props.ui.next,\r\n vlmAlertDiv: false\r\n\t\t}\r\n\r\n\t\tthis.dispatchTabChange = this.dispatchTabChange.bind(this)\r\n\t\tthis.intializePrioritiesTabs = this.intializePrioritiesTabs.bind(this)\r\n\t\tthis.dispatchLastButtonClick = this.dispatchLastButtonClick.bind(this)\r\n\t\tthis.vlmAlertToggle = this.vlmAlertToggle.bind(this)\r\n\t}\r\n\r\n\tintializePrioritiesTabs() {\r\n\t\tconst tabs = [\r\n\t\t\t{\r\n\t\t\t\tid: 1,\r\n\t\t\t\tlabel: this.props.content.businessValue.title,\r\n\t\t\t\tcomponent: ( this.hideModal()}>
\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t{this.props.content.title}
\r\n\t\t\t\t\t\t{this.props.content.description}
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t{this.props.content.ROIResults.title}
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{this.props.content.ROIResults.npv}\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{this.props.currency} {formatThousands(round(this.props.NPV, 2))} M\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{this.props.content.ROIResults.ROI}\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{formatThousands(round(this.props.ROI, 2))} %\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{BreakLine(this.props.content.ROIResults.value)}\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{this.props.currency} {formatThousands(round(this.props.valueOfDelayedInvestment, 2))} M\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{this.props.content.ROIResults.payback}\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{this.props.paybackPeriod} {this.props.content.ROIResults.months}\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t{/*
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tui: state.content.ui,\r\n\t\tcontent: state.content,\r\n\t\tdiscoveryContent: state.content.discovery\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tvalueStoryCurrentMenu: (menuItem) => dispatch(valueStoryCurrentMenu(menuItem)),\r\n\t\tshowValueStoryMenu: (menuItem) => dispatch(showValueStoryMenu(menuItem)),\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(BusinessCaseContainer)","import React from 'react'\r\n\r\nconst SubLeverCalculationTableHeaders = (props) =>\r\n\t\r\n\t\t\t\t\t
*/}\r\n\t\t\t\t\r\n\t\t\t\t\t\t{this.props.content.businessCase.title}/ {this.state.tabs[this.state.tabId - 1].label}\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t{this.props.content.businessCase.title}\r\n\t\t\t\t\t
\r\n\t\t\t\t\t{this.props.discoveryContent.vlmAlertHeader}
\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t{this.state.vlmAlertDiv ? {this.props.discoveryContent.vlmAlertDesc1}
{this.props.discoveryContent.vlmAlertDesc2}{this.props.discoveryContent.vlmAlertDesc3}. : ''}\r\n\t\t\t\t\t
}\r\n\t\t\t\t{this.props.discoveryContent.vlmAlertDesc2}{this.props.discoveryContent.vlmAlertDesc3}. : ''}\r\n\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t this.hideModal()}\r\n\t\t\t\t\t\tclassName='suggestedValueClose'\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t
\r\n\t\t\t)\r\n\t\t}\r\n\r\n\t\treturn (\r\n\t\t\t{props.content[0].content}
\r\n\t\t\t\t\t- \r\n\t\t\t\t\t\t{Object.keys(listParametersToShow).map(function (element) {\r\n\t\t\t\t\t\t\tvar valueRow = (\r\n\t\t\t\t\t\t\t\t
- \r\n\t\t\t\t\t\t\t\t\t {listParametersToShow[element]}{\":\"} \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\t\t\tisNaN(benchMarkSuggestedValueDetails[element]) ? benchMarkSuggestedValueDetails[element]\r\n\t\t\t\t\t\t\t\t\t\t\t\t: (benchMarkSuggestedValueDetails[\"UOM\"] === \"Percentage\") ? round(benchMarkSuggestedValueDetails[element] * 100, 2) + \" %\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t: round(benchMarkSuggestedValueDetails[element], 2)\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\treturn valueRow\r\n\t\t\t\t\t\t})}\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t{prefix}\r\n\t\t\t\t\t\t\t\t \r\n \t\t\t\t {this.props.suggestedValue\r\n\t\t\t\t\t\t\t\t\t? formatThousands(round(this.props.suggestedValue, 2))\r\n\t\t\t\t\t\t\t\t\t: 0}\r\n\t\t\t\t\t\t\t\t \r\n \t\t\t {this.props.content[1] ? this.props.content[1].suffix : ''}\r\n\t\t\t\t\t\t\t\t this.showModal()} />\r\n\t\t\t\t\t\t\t\t this.callback()}\r\n\t\t\t\t\t\t\t\t\tmodalStyle={suggestedValueModalStyle}\r\n\t\t\t\t\t\t\t\t\tcontentStyle={suggestedValueContentStyle}>\r\n\t\t\t\t\t\t\t\t\t{suggestedValueDetails(this.props, this.state.benchMarkSuggestedValueDetails)}\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{prefix}\r\n\r\n\t\t\t\t\t\t\t\t{this.props.suggestedValue\r\n\t\t\t\t\t\t\t\t\t? formatThousands(round(this.props.suggestedValue, 2))\r\n\t\t\t\t\t\t\t\t\t: 0}\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t{this.props.content[1] ? this.props.content[1].suffix : ''}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\t\t
:\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{userInput ? calculatedValuesFormulae\r\n\t\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\tthis.state.benchMarkSuggestedValueDetails.Show_Popup !== undefined && this.state.benchMarkSuggestedValueDetails.Show_Popup === true || this.state.benchMarkSuggestedValueDetails.Suggested_Value_Description == 'Spend' ?\r\n\t\t\t\t\t\t\t\tcalculatedValuesFormulae + ' (' + this.state.benchMarkSuggestedValueDetails.Source + ')' : calculatedValuesFormulae}\r\n\r\n\t\t\t\t\t\t \r\n\t\t\t\t\t
\r\n\r\n\t\t\t\t}\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n\treturn {\r\n\t\tcontent: state.content.subLeverCalculations,\r\n\t\tui: state.content.ui,\r\n\t\tcurrency: decodeURIComponent(state.valueStory.Currency),\r\n\t\tuserData: state.valueStory,\r\n\t\tspendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n\t\tbenchMarkCalculations: state.benchMarksData,\r\n\t\tallContent: state.content,\r\n\t\tlanguage: state.language\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n\treturn {\r\n\t\thandleChange: (value, subLeverId, rowNumber) =>\r\n\t\t\tdispatch(updateUserInput(value, subLeverId, rowNumber)),\r\n\t\tupdateSubLeverRowValue: (value, subLeverId, rowNumber, valueType) =>\r\n\t\t\tdispatch(updateSubLeverRowValue(value, subLeverId, rowNumber, valueType)),\r\n\t\tupdateTotalSpend: spend => dispatch(updateTotalSpend(spend)),\r\n\t\tsetEstimatedAnnualValue: (value, subLeverId) => dispatch(setEstimatedAnnualValue(value, subLeverId)),\r\n\t\tchangeLocation: (location, spendAsPercentageOfRevenue) => dispatch(changeLocation(location, spendAsPercentageOfRevenue)),\r\n\t}\r\n}\r\n\r\nexport default connect(\r\n\tmapStateToProps,\r\n\tmapDispatchToProps\r\n)(SubLeverCalculation)\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport classnames from 'classnames'\r\n\r\n// UI\r\nimport Button from 'UI/Button'\r\n\r\nconst NextStep = (props) =>\r\n\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t{BreakLine(this.state.content.title)}
\r\n\t\t\t\t\t\t{this.state.responseMsg !== '' ?\r\n\t\t\t\t\t\t\t{this.state.responseMsg}\r\n\t\t\t\t\t\t\t: null}\r\n\t\t\t\t\t\t| {this.state.content.estimatedBenefit} | \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{this.props.currency}\r\n\t\t\t\t\t\t\t\t\t\t\t{formatThousands(roundFix(this.state.estimatedBenefit, 2))} M\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t | \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t | \r\n\t\t\t\t\t\t\t\t\t\t{this.props.currency}\r\n\t\t\t\t\t\t\t\t\t\t{formatThousands(roundFix(this.state.calculatedEstimatedBenefit, 2))} M\r\n\t\t\t\t\t\t\t\t\t | \r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t
\r\n\r\nexport default NextStep\r\n\r\nNextStep.propTypes = {\r\n\ticon: PropTypes.string.isRequired,\r\n\tcontent: PropTypes.shape({\r\n\t\ttitle: PropTypes.string.isRequired,\r\n\t\tdescription: PropTypes.string.isRequired,\r\n\t\tcta: PropTypes.string.isRequired,\r\n\t\tctaURL: PropTypes.string,\r\n\t\taction: PropTypes.string\r\n\t}),\r\n\tcolor: PropTypes.bool.isRequired,\r\n\tindex: PropTypes.number.isRequired\r\n}","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Form, Control, Errors, actions } from 'react-redux-form'\r\n\r\n// Actions\r\nimport {\r\n\treportSubmit,\r\n\treportSubmitSuccess,\r\n\treportSubmitFailure,\r\n\treplacePlaceholders,\r\n\tdownloadReport,\r\n\tresetError,\r\n\tresetMessage\r\n} from 'actions/userActions'\r\n\r\nimport {\r\n\tsetMutualActionPlan\r\n} from 'actions/nextStepsActions'\r\n\r\nimport {\r\n\tvalueStoryCurrentMenu,\r\n\tshowValueStoryMenu\r\n}\r\n\tfrom 'actions/userActions'\r\n\r\n// Components\r\nimport NextStep from './NextStep'\r\nimport Report from 'Menu/Report'\r\nimport VideoHelp from 'components/UI/VideoHelp'\r\n\r\n// UI\r\nimport Button from 'UI/Button'\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\n// Images\r\nimport actionPlanIcon from '../../images/create.svg'\r\nimport procurementIcon from '../../images/email.svg'\r\nimport sellerValueIcon from '../../images/explore.svg'\r\nimport benchmarkingIcon from '../../images/register.svg'\r\n\r\n// Settings\r\nimport { modalStyle, modalContentStyle, validators } from 'Constants'\r\n\r\nconst icons = [\r\n\tactionPlanIcon,\r\n\tprocurementIcon,\r\n\tsellerValueIcon,\r\n\tbenchmarkingIcon\r\n]\r\n\r\nconst autoHeightModalStyle = Object.assign({}, modalStyle)\r\nautoHeightModalStyle.height = 'auto';\r\nautoHeightModalStyle.width = '1675px';\r\nautoHeightModalStyle.maxWidth = '1675px';\r\n\r\n\r\nconst customModalContentStyle = Object.assign({}, modalContentStyle)\r\ncustomModalContentStyle.padding = '0'\r\n\r\n\r\nclass NextStepsContainer extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = {\r\n\t\t\treportType: '1',\r\n\t\t\tmutualActionPlanValue: this.props.userData.MutualActionPlan\r\n\t\t}\r\n\r\n\t\tthis.showModal = this.showModal.bind(this)\r\n\t\tthis.hideModal = this.hideModal.bind(this)\r\n\t\tthis.handleChange = this.handleChange.bind(this)\r\n\t\tthis.handleMutualActionPlanSubmit = this.handleMutualActionPlanSubmit.bind(this)\r\n\t\tthis.handleRadioButtonClick = this.handleRadioButtonClick.bind(this)\r\n\t\tthis.handleReportSubmit = this.handleReportSubmit.bind(this)\r\n\t\tthis.downloadFile = this.downloadFile.bind(this)\r\n\r\n\t}\r\n\r\n\tshowModal(action) {\r\n\t\tthis.refs[action].show()\r\n\t\tthis.props.resetError()\r\n\t\tthis.props.resetMessage()\r\n\t\tthis.setState({\r\n\t\t\treportType: this.state.reportType\r\n\t\t})\r\n\t}\r\n\r\n\thideModal(action) {\r\n\t\tthis.formDispatch(actions.reset(action))\r\n\t\tthis.props.resetError()\r\n\t\tthis.props.resetMessage()\r\n\t\tthis.refs[action].hide()\r\n\t}\r\n\r\n\thandleChange(e) {\r\n\t\tthis.setState({ mutualActionPlanValue: e.target.value });\r\n\t}\r\n\r\n\thandleMutualActionPlanSubmit(formValues) {\r\n\t\tthis.props.setMutualActionPlan(formValues.MutualActionPlan)\r\n\t\tthis.refs['plan'].hide()\r\n\t}\r\n\r\n\thandleRadioButtonClick(value) {\r\n\t\tthis.setState({\r\n\t\t\treportType: value\r\n\t\t})\r\n\r\n\t\tthis.props.resetMessage()\r\n\t}\r\n\r\n\thandleReportSubmit(formValues) {\r\n\t\tthis.props.reportSubmitSuccess(this.props.reportContent.waitMessage)\r\n\t\tthis.props.resetError()\r\n\t\tlet values = Object.assign({}, formValues)\r\n\t\tvalues.Type = this.state.reportType\r\n\t\tvar content = this.props.reportContent\r\n\t\tthis.props.reportSubmit(values) //Build Report Using Template files\r\n\t\t\t.then((response) => {\r\n\t\t\t\tif (response.status !== undefined && response.status === 200) {\r\n\t\t\t\t\t//this.props.reportSubmitSuccess('Still generating report. Please be patient.')\r\n\t\t\t\t\tthis.props.replacePlaceholders(values, response.data.Result) //Replace placeholders after generating Report Using Template files\r\n\t\t\t\t\t\t.then((response) => {\r\n\t\t\t\t\t\t\tif (response.status !== undefined && response.status === 200) {\r\n\t\t\t\t\t\t\t\tthis.props.downloadReport(values, response.data.Result) //Download Report\r\n\t\t\t\t\t\t\t\t\t.then((response) => {\r\n\t\t\t\t\t\t\t\t\t\tif (response.status !== undefined && response.status === 200) {\r\n\t\t\t\t\t\t\t\t\t\t\tthis.downloadFile(response)\r\n\t\t\t\t\t\t\t\t\t\t\tthis.props.reportSubmitSuccess(content['200'])\r\n\t\t\t\t\t\t\t\t\t\t\t//document.getElementById('report.Email').blur()\r\n\t\t\t\t\t\t\t\t\t\t\t//this.formDispatch(actions.reset('report.Email'))\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\t\t\t\tthis.props.reportSubmitFailure(response.response.data.Message)\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t}).catch((error) => {\r\n\t\t\t\t\t\t\t\t\t\tthis.props.reportSubmitFailure(error.response.data.Message)\r\n\t\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\tthis.props.reportSubmitFailure(response.response.data.Message)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}).catch((error) => {\r\n\t\t\t\t\t\t\tthis.props.reportSubmitFailure(error.response.data.Message)\r\n\t\t\t\t\t\t})\r\n\t\t\t\t}\r\n\t\t\t\telse if (response.response.status == 400 && response.response.data.Message == 'requestfileNotPresent') {\r\n\t\t\t\t\tthis.props.reportSubmitFailure(this.props.reportContent.requestfileNotPresent)\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.props.reportSubmitFailure(response.response.data.Message)\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tthis.props.reportSubmitFailure(error.response.data.Message)\r\n\t\t\t})\r\n\t}\r\n\r\n\tdownloadFile(response) {\r\n\t\tconst byteArrays = [];\r\n\t\tconst byteCharacters = atob(response.data);\r\n\r\n\t\tfor (let offset = 0; offset < byteCharacters.length; offset += 512) {\r\n\t\t\tconst slice = byteCharacters.slice(offset, offset + 512);\r\n\t\t\tconst byteNumbers = new Array(slice.length);\r\n\t\t\tfor (let i = 0; i < slice.length; i++) {\r\n\t\t\t\tbyteNumbers[i] = slice.charCodeAt(i);\r\n\t\t\t}\r\n\r\n\t\t\tconst byteArray = new Uint8Array(byteNumbers);\r\n\t\t\tbyteArrays.push(byteArray);\r\n\t\t}\r\n\r\n\t\tvar blob = new Blob(byteArrays);\r\n\r\n\t\tvar [, filename] = response.headers['content-disposition'].split('filename=');\r\n\t\tfilename = filename.replace(/ /g, \"_\").replace(/\"/g, \"\")\r\n\r\n\t\tif (navigator.msSaveBlob) {\r\n\t\t\tnavigator.msSaveBlob(blob, filename);\r\n\t\t}\r\n\t\telse {\r\n\t\t\tvar link = document.createElement(\"a\");\r\n\t\t\tlink.href = URL.createObjectURL(blob);\r\n\t\t\tlink.setAttribute('visibility', 'hidden');\r\n\t\t\tlink.download = filename\r\n\t\t\tdocument.body.appendChild(link);\r\n\t\t\tlink.click();\r\n\t\t\tdocument.body.removeChild(link);\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentWillMount() {\r\n\t\tvar reportTypeArray = [];\r\n\t\tvar _applicationFeatures = this.props.user.user.applicationFeatures\r\n\t\tvar item = this.props.allReports.reportTypes\r\n\t\t//if (item.reportAction != undefined && item.reportAction != null) {\t\t\t\r\n\t\tvar obj = Object.keys(item).map(function (childitem) {\r\n\t\t\tif (_applicationFeatures.findIndex(a => a.Action === (item[childitem].reportAction)) > -1) {\r\n\t\t\t\treportTypeArray.push(item[childitem].reportId)\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\tlet flag = localStorage.getItem('enablementInsightFlag')\r\n\t\tif (flag == \"true\") {\r\n\t\t\tthis.setState({ reportType: 5 })\r\n\t\t}\r\n\t\telse if (reportTypeArray.length > 0) {\r\n\t\t\tthis.setState({ reportType: reportTypeArray[0] })\r\n\t\t}\r\n\r\n\t\tthis.props.valueStoryCurrentMenu('Next Steps');\r\n\t\tthis.props.showValueStoryMenu(true);\r\n\t\twindow.scrollTo(0, 0)\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t
\r\n\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t\r\n\t\t\t\t\t{props.content.title}\r\n\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t{props.content.description}\r\n\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t{(props.index === 0 || props.index === 1) ? (\r\n\t\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tcontent: state.content.nextSteps,\r\n\t\treportContent: state.content.menu.getReport,\r\n\t\tvalidation: state.content.validation,\r\n\t\tuserData: state.valueStory,\r\n\t\tuser: state.default,\r\n\t\tallReports: state.content.reports\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tsetMutualActionPlan: (mutualActionPlan) => dispatch(setMutualActionPlan(mutualActionPlan)),\r\n\t\treportSubmit: (formValues) => dispatch(reportSubmit(formValues)),\r\n\t\treportSubmitSuccess: (user) => dispatch(reportSubmitSuccess(user)),\r\n\t\treportSubmitFailure: (error) => dispatch(reportSubmitFailure(error)),\r\n\t\treplacePlaceholders: (formValues, fileName) => dispatch(replacePlaceholders(formValues, fileName)),\r\n\t\tdownloadReport: (formValues, fileName) => dispatch(downloadReport(formValues, fileName)),\r\n\t\tresetError: () => dispatch(resetError()),\r\n\t\tresetMessage: () => dispatch(resetMessage()),\r\n\t\tvalueStoryCurrentMenu: (menuItem) => dispatch(valueStoryCurrentMenu(menuItem)),\r\n\t\tshowValueStoryMenu: (menuItem) => dispatch(showValueStoryMenu(menuItem)),\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(NextStepsContainer)","export const SET_MUTUAL_ACTION_PLAN = 'SET_MUTUAL_ACTION_PLAN'\r\n\r\nexport const setMutualActionPlan = (MutualActionPlan) => {\r\n\treturn {\r\n\t\ttype: 'SET_MUTUAL_ACTION_PLAN',\r\n\t\tMutualActionPlan\r\n\t}\r\n}","import React from 'react'\r\n\r\n// Utils\r\nimport classnames from 'classnames'\r\n\r\n// Settings\r\nimport { routes } from '../../Constants'\r\n\r\nconst Loading = (props) =>\r\n\t\r\n\t\t\t\t\t{this.props.content.title}\r\n\t\t\t\t\t{
\r\n\t\t\t\t\r\n\t\t\t\t\t{this.props.content.steps.map((data, i) =>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t)}\r\n\t\t\t\t
\r\n\t\t\t\t{this.props.content.steps[0].modal.title}
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\r\n\t\t{ props.valueStoryListLoading ? props.ui.loading : props.ui.loadingValueStory }\r\n\t
\r\n\r\nexport default Loading\r\n","import React from 'react'\r\n\r\n// Utils\r\nimport classnames from 'classnames'\r\n\r\nconst AutoSave = (props) =>\r\n\t\r\n\t\t{ props.user.status === 'auto_save_error' ? props.user.error : props.ui.autosave.saving }\r\n\t
\r\n\r\nexport default AutoSave\r\n\r\n\r\n","import React from 'react'\r\n\r\n// Utils\r\nimport classnames from 'classnames'\r\nimport { BreakLine } from 'utils/Utils'\r\n\r\nconst OnlineStatus = (props) =>\r\n\t\r\n\t\t{ props.user.online === false ? BreakLine(props.ui.offline) : BreakLine(props.ui.online) }\r\n\t
\r\n\r\nexport default OnlineStatus\r\n","import React from 'react'\r\n\r\n// UI\r\nimport MdTabletMac from 'react-icons/lib/md/tablet-mac'\r\n\r\nconst Orientation = (props) =>\r\n\t\r\n\t\t
\r\n\r\nexport default Orientation\r\n","import React from 'react'\r\nimport FaAngleRight from 'react-icons/lib/fa/angle-right'\r\nimport FaAngleLeft from 'react-icons/lib/fa/angle-left'\r\nimport MdClear from 'react-icons/lib/md/clear'\r\nimport classnames from 'classnames'\r\nimport Select from 'react-select'\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n\r\nconst CustomDropdown = (props) =>{\r\n return(\t\r\n {\r\n (props.value.length === 0) ? \r\n :\r\n \r\n\t }\r\n\t \t\t\r\n\t\t\t{/*
\r\n )};\r\n\r\nexport default CustomDropdown\r\n\r\nCustomDropdown.defaultProps = {\r\n\ttype: 'select',\r\n\tonChange: () => {},\r\n\tdisabled: false,\r\n\tfloat: true\r\n}","import axios from 'axios'\r\n\r\nconst url = '/NodeApiCall/api/'\r\n//const url = 'http://localhost/NodeApiCall/api/'\r\n//const url = 'https://avtuatapp1.phl.sap.corp/NodeApiCall/api/'\r\nexport const LANGUAGE_MANAGER_FAILURE = 'LANGUAGE_MANAGER_FAILURE';\r\n//const url = 'http://localhost:5000/NodeApiCall/api/'\r\nexport function LanguageManagerFailure(error) {\r\n return {\r\n type: LANGUAGE_MANAGER_FAILURE,\r\n payload: error\r\n };\r\n}\r\n\r\nexport function getAlllanguageList() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n url: url + 'AlllanguageList',\r\n method: 'get',\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`,\r\n 'Content-Type': 'application/x-www-form-urlencoded'\r\n },\r\n\r\n }).then((response) => {\r\n return response.data.languagelist;\r\n }).catch((err) => {\r\n dispatch(LanguageManagerFailure('API service is down. Please contact administrator.'))\r\n })\r\n }\r\n}\r\n\r\n\r\nexport function getlanguageLists() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n url: url + 'languageList',\r\n method: 'get',\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`,\r\n 'Content-Type': 'application/x-www-form-urlencoded',\r\n },\r\n\r\n }).then((response) => {\r\n return response.data.languagelist;\r\n }).catch((err) => {\r\n dispatch(LanguageManagerFailure('API service is down. Please contact administrator.'))\r\n })\r\n }\r\n}\r\n\r\nexport function callApi(formValue, userId) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n var newJson = {\r\n LanguageName: formValue.LanguageName,\r\n LanguageShortName: formValue.LanguageShortName,\r\n userId : userId\r\n }\r\n\r\n return axios({\r\n url: url + 'AddNewLanguage',\r\n method: 'post',\r\n headers: {\r\n 'Content-Type': 'application/x-www-form-urlencoded',\r\n 'Authorization': `AribaBearer ${token}`\r\n },\r\n data: (newJson),\r\n }).then((response) => {\r\n return response.data;\r\n }).catch((err) => {\r\n dispatch(LanguageManagerFailure('API service is down. Please contact administrator.'))\r\n });\r\n }\r\n}\r\n\r\nexport function callApiget() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n url: url + 'getScreens',\r\n method: 'get',\r\n headers: {\r\n 'Content-Type': 'application/x-www-form-urlencoded',\r\n 'Authorization': `AribaBearer ${token}`\r\n },\r\n\r\n }).then((response) => {\r\n return response.data.screen;\r\n }).catch((err) => {\r\n dispatch(LanguageManagerFailure('API service is down. Please contact administrator.'))\r\n }) // if (response.status !== 200) throw Error(body.message);\r\n }\r\n}\r\n\r\nexport function translateENtoLanguage(NewData) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n url: url + 'updateLangFile',\r\n method: 'post',\r\n headers: {\r\n 'Content-Type': 'application/x-www-form-urlencoded',\r\n 'Authorization': `AribaBearer ${token}`\r\n },\r\n data: (NewData),\r\n }).then((response) => {\r\n console.log('useraction', response)\r\n return response.data;\r\n }).catch((err) => {\r\n dispatch(LanguageManagerFailure('API service is down. Please contact administrator.'))\r\n })\r\n }\r\n}\r\n\r\nexport function movetoapplication(formValue, userId) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n var newJson = {\r\n LanguageName: formValue.LanguageName,\r\n LanguageShortName: formValue.ShortLanguageName,\r\n userId: userId\r\n }\r\n return axios({\r\n url: url + 'movetoapplication',\r\n method: 'post',\r\n headers: {\r\n 'Content-Type': 'application/x-www-form-urlencoded',\r\n 'Authorization': `AribaBearer ${token}`\r\n },\r\n data: (newJson),\r\n }).then((response) => {\r\n\r\n return response;\r\n }).catch((err) => {\r\n console.log(err);\r\n dispatch(LanguageManagerFailure('API service is down. Please contact administrator.'))\r\n })\r\n }\r\n}\r\n\r\nexport function GetDataOfLanguage(languageshortName, fromPublish) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n var lngJson = {\r\n LanguageShortName: languageshortName,\r\n fromPublish: fromPublish\r\n }\r\n\r\n return axios({\r\n url: url + 'GetDataOfLanguage',\r\n method: 'post',\r\n headers: {\r\n 'Content-Type': 'application/x-www-form-urlencoded',\r\n 'Authorization': `AribaBearer ${token}`\r\n },\r\n data: (lngJson),\r\n }).then((response) => {\r\n return response;\r\n }).catch((err) => {\r\n console.log(err);\r\n dispatch(LanguageManagerFailure('API service is down. Please contact administrator.'))\r\n })\r\n }\r\n}\r\n\r\nexport function DeleteLanguage(_data, userId) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n var deleteLanguage = {\r\n LanguageName: _data.LanguageName,\r\n LanguageShortName: _data.ShortLanguageName,\r\n userId : userId\r\n }\r\n return axios({\r\n url: url + 'DeleteExistingLanguage',\r\n method: 'post',\r\n headers: {\r\n 'Content-Type': 'application/x-www-form-urlencoded',\r\n 'Authorization': `AribaBearer ${token}`\r\n },\r\n data: (deleteLanguage),\r\n }).then((response) => {\r\n return response;\r\n }).catch((err) => {\r\n console.log(err);\r\n dispatch(LanguageManagerFailure('API service is down. Please contact administrator.'))\r\n })\r\n }\r\n}\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport Button from 'UI/Button'\r\nimport CustomDropdown from 'UI/CustomDropDown'\r\nimport { validators } from 'Constants'\r\nimport { SelectField, Option } from 'react-mdl-extra'\r\nimport {\r\n callApiget,\r\n translateENtoLanguage,\r\n getlanguageLists,\r\n movetoapplication,\r\n GetDataOfLanguage\r\n} from 'actions/nodeActions'\r\n\r\nimport {\r\n updateTableData_AOI,\r\n UpdateTableData_UserInputs,\r\n UpdateTableData_Industries,\r\n UpdatePublishDBChange_AOIValueDrivers,\r\n UpdatePublishDBChange_AOIValueDrivers_subItem,\r\n UpdateTableData_valueDrivers,\r\n UpdateTableData_SubvalueDrivers,\r\n UpdateTableData_BVSROIs,\r\n UpdateTableData_Countries\r\n} from \"actions/LanguageTranslationsApiCall\";\r\n\r\nimport {\r\n LanguageTranslationLoading\r\n} from \"actions/userActions\";\r\n\r\nimport Select from 'react-select'\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport { translateScreen_DropdownStyle } from 'react-select-css'\r\n\r\nclass TranslateScreen extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n SelectedLangData: '',\r\n allEnglishData: '',\r\n targetLanguagePublishedContent: '',\r\n register: '',\r\n currentData: '',\r\n publishedNestedValue: '',\r\n screenNames: [],\r\n language: [],\r\n selectedLanvalue: null,\r\n global: {},\r\n messages: '',\r\n isProcessing: false,\r\n languageOption: [],\r\n selectedLanguage: '',\r\n screenNamesOption: [],\r\n selectedScreenName: '',\r\n innerObject: ''\r\n }\r\n this.callApi = this.callApi.bind(this)\r\n this.handleScreenChange = this.handleScreenChange.bind(this)\r\n this.handleUpdateDraftClick = this.handleUpdateDraftClick.bind(this)\r\n this.handleClickPublishDraft = this.handleClickPublishDraft.bind(this)\r\n this.handleClickRsetContent = this.handleClickRsetContent.bind(this);\r\n this.translateENtoLanguage = this.translateENtoLanguage.bind(this)\r\n this.handlelangChange = this.handlelangChange.bind(this)\r\n this.getformItemData = this.getformItemData.bind(this)\r\n this.getLanguageListFromAPI = this.getLanguageListFromAPI.bind(this)\r\n this.getEnglishData('en', true);\r\n this.duplicateRecords = [];\r\n this.duplicateValueId = [];\r\n }\r\n\r\n\r\n\r\n componentWillMount() {\r\n this.callApi()\r\n this.getLanguageListFromAPI();\r\n\r\n }\r\n componentWillUnmount() {\r\n this.formDispatch(actions.reset('lanMgr'));\r\n }\r\n\r\n componentDidMount() {\r\n this.formDispatch(actions.setErrors('lanMgr.LanguageName', true));\r\n this.formDispatch(actions.change('lanMgr.LanguageName', ''));\r\n\r\n }\r\n\r\n getEnglishData(languageName, fromPublish) {\r\n this.props.getDataOfLanguage(languageName, fromPublish)\r\n .then((response) => {\r\n if (response !== undefined)\r\n this.setState({ allEnglishData: response.data })\r\n });\r\n }\r\n\r\n // most updated file will be here so read language from here\r\n getLanguageListFromAPI() {\r\n var list = this.props.getLanguageListFromAPI().then((response) => {\r\n this.setState({ language: response })\r\n\r\n //bind language\r\n\r\n if (response !== undefined) {\r\n var array = [];\r\n this.state.language.forEach((element) => {\r\n var obj = {};\r\n obj.label = element.LanguageName;\r\n obj.value = element.ShortLanguageName;\r\n array.push(obj);\r\n });\r\n this.setState({ languageOption: array });\r\n }\r\n });\r\n }\r\n\r\n handleScreenChange(value) {\r\n this.duplicateRecords = [];\r\n var lable = value.label;\r\n value = value.value;\r\n if (this.state.SelectedLangData === '') {\r\n return false;\r\n }\r\n else {\r\n\r\n //This is for the Column 1 English value\r\n var data = this.state.allEnglishData;\r\n var nestedElement = data[value];\r\n if (nestedElement === undefined) {\r\n Object.values(data).map((type) => {\r\n\r\n if (type.hasOwnProperty(value)) {\r\n nestedElement = type[value]\r\n }\r\n })\r\n }\r\n\r\n //This is for the Column 2 Selected Language Draft value\r\n var languageData = this.state.SelectedLangData;\r\n var selectedLanNestedElements = languageData[value];\r\n if (selectedLanNestedElements === undefined) {\r\n Object.values(languageData).map((type) => {\r\n\r\n if (type.hasOwnProperty(value)) {\r\n selectedLanNestedElements = type[value]\r\n }\r\n })\r\n }\r\n\r\n //This is for the Column 3 Selected Language Published value\r\n var PublishedLanguageData = this.state.targetLanguagePublishedContent;\r\n var selectedLanPublishedNestedElements = PublishedLanguageData[value];\r\n if (selectedLanPublishedNestedElements === undefined) {\r\n Object.values(PublishedLanguageData).map((type) => {\r\n\r\n if (type.hasOwnProperty(value)) {\r\n selectedLanPublishedNestedElements = type[value]\r\n }\r\n })\r\n }\r\n\r\n this.setState({ messages: '' })\r\n this.setState({ currentData: selectedLanNestedElements });\r\n this.setState({ innerObject: selectedLanNestedElements });\r\n\r\n this.setState({ register: nestedElement, publishedNestedValue: selectedLanPublishedNestedElements });\r\n this.setState({ selectedScreenName: lable });\r\n }\r\n\r\n this.formDispatch(actions.change('lanMgr.LanguageShortName', value));\r\n this.formDispatch(actions.setErrors('lanMgr.LanguageShortName', false))\r\n }\r\n\r\n UpdatePublishDBChange_AOI(LanguageShortName) {\r\n var PublishedLanguageData = this.state.targetLanguagePublishedContent;\r\n var languageData = this.state.SelectedLangData;\r\n\r\n // First for discovery for all langauges \r\n var published_DiscoveryData = PublishedLanguageData[\"discovery\"]\r\n var updated_DiscoveryData = languageData[\"discovery\"]\r\n\r\n // for AOI changes \r\n var interests_published_DiscoveryData = published_DiscoveryData[\"interests\"]\r\n var interests_updated_DiscoveryData = updated_DiscoveryData[\"interests\"]\r\n if (interests_published_DiscoveryData !== interests_updated_DiscoveryData) {\r\n var allDetail = { LanguageShortName: LanguageShortName, CurrentValueJson: interests_published_DiscoveryData, UpdatedValueJson: interests_updated_DiscoveryData }\r\n this.props.updateTableData_AOI(allDetail)\r\n }\r\n\r\n\r\n }\r\n\r\n UpdatePublishDBChange_UserInputs(LanguageShortName) {\r\n var PublishedLanguageData = this.state.targetLanguagePublishedContent;\r\n var languageData = this.state.SelectedLangData;\r\n\r\n // First for subLeverCalculations for all langauges \r\n var published_DiscoveryData = PublishedLanguageData[\"subLeverCalculations\"]\r\n var updated_DiscoveryData = languageData[\"subLeverCalculations\"]\r\n\r\n var subLeverCalculation_published_DiscoveryData = published_DiscoveryData[\"subLeverCalculation\"]\r\n var subLeverCalculation_updated_DiscoveryData = updated_DiscoveryData[\"subLeverCalculation\"]\r\n var currentValue = [];\r\n var updatedValue = [];\r\n\r\n if (subLeverCalculation_published_DiscoveryData !== undefined && subLeverCalculation_updated_DiscoveryData !== undefined) {\r\n for (let index = 0; index < subLeverCalculation_published_DiscoveryData.length; index++) {\r\n var subleverRows_published = subLeverCalculation_published_DiscoveryData[index].rows\r\n var subleverRows_updated = subLeverCalculation_updated_DiscoveryData[index].rows;\r\n\r\n if (subLeverCalculation_updated_DiscoveryData[index]['estimatedBenefit'].toLowerCase() !== subLeverCalculation_published_DiscoveryData[index]['estimatedBenefit'].toLowerCase()\r\n && currentValue.indexOf(subLeverCalculation_published_DiscoveryData[index]['estimatedBenefit']) < 0\r\n ) {\r\n currentValue.push(subLeverCalculation_published_DiscoveryData[index]['estimatedBenefit']);\r\n updatedValue.push(subLeverCalculation_updated_DiscoveryData[index]['estimatedBenefit'])\r\n }\r\n\r\n for (let index = 0; index < subleverRows_published.length; index++) {\r\n var published_content = subleverRows_published[index][0].content\r\n var updated_content = subleverRows_updated[index][0].content\r\n if (published_content !== updated_content) {\r\n currentValue.push(published_content);\r\n updatedValue.push(updated_content)\r\n }\r\n }\r\n }\r\n if (currentValue.length > 0 && updatedValue.length > 0) {\r\n var allDetail = { LanguageShortName: LanguageShortName, CurrentValueJson: currentValue, UpdatedValueJson: updatedValue }\r\n this.props.UpdateTableData_UserInputs(allDetail)\r\n }\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n UpdatePublishDBChange_Industries(LanguageShortName) {\r\n var PublishedLanguageData = this.state.targetLanguagePublishedContent;\r\n var languageData = this.state.SelectedLangData;\r\n\r\n // First for discovery for all langauges \r\n var published_DiscoveryData = PublishedLanguageData[\"discovery\"]\r\n var updated_DiscoveryData = languageData[\"discovery\"]\r\n\r\n // for Industries changes \r\n var form_published_DiscoveryData = published_DiscoveryData[\"form\"]\r\n var form_updated_DiscoveryData = updated_DiscoveryData[\"form\"]\r\n\r\n var industries_form_published_DiscoveryData = form_published_DiscoveryData[\"industries\"];\r\n var industries_form_updated_DiscoveryData = form_updated_DiscoveryData[\"industries\"];\r\n var currentValue = [];\r\n var updatedValue = [];\r\n\r\n for (let index = 0; index < industries_form_published_DiscoveryData.length; index++) {\r\n var published_industries = industries_form_published_DiscoveryData[index];\r\n var updated_industries = industries_form_updated_DiscoveryData[index];\r\n if (published_industries !== updated_industries) {\r\n currentValue.push(published_industries);\r\n updatedValue.push(updated_industries);\r\n }\r\n }\r\n if (updatedValue.length > 0 && currentValue.length > 0) {\r\n var allDetail = { LanguageShortName: LanguageShortName, CurrentValueJson: currentValue, UpdatedValueJson: updatedValue }\r\n this.props.UpdateTableData_Industries(allDetail)\r\n }\r\n }\r\n\r\n // prioritySections\r\n UpdatePublishDBChange_AOIValueDrivers(LanguageShortName) {\r\n var PublishedLanguageData = this.state.targetLanguagePublishedContent;\r\n var languageData = this.state.SelectedLangData;\r\n\r\n var priorities_Published = PublishedLanguageData[\"priorities\"]\r\n var updated_priorities = languageData[\"priorities\"]\r\n\r\n var prioritySections_Published = priorities_Published[\"prioritySections\"];\r\n var prioritySections_Updated = updated_priorities[\"prioritySections\"];\r\n var que_Published = [];\r\n var que_updated = [];\r\n var subQue_Published = [];\r\n var subQue_updated = [];\r\n\r\n for (let index_priority = 0; index_priority < prioritySections_Published.length; index_priority++) {\r\n var questions_published = prioritySections_Published[index_priority].questions;\r\n var questions_updated = prioritySections_Updated[index_priority].questions;\r\n\r\n for (let index_que = 0; index_que < questions_published.length; index_que++) {\r\n //// question for both as item in table \r\n if (que_Published.indexOf(questions_published[index_que].question) < 0) {\r\n que_Published.push(questions_published[index_que].question);\r\n que_updated.push(questions_updated[index_que].question);\r\n }\r\n\r\n var sub_questions_published = questions_published[index_que].subQuestions;\r\n var sub_questions_updated = questions_updated[index_que].subQuestions;\r\n\r\n for (let index = 0; index < sub_questions_published.length; index++) {\r\n var sub_que_published = sub_questions_published[index].subQuestion;\r\n var sub_que_updated = sub_questions_updated[index].subQuestion;\r\n\r\n //if(sub_que_published !== sub_que_updated){\r\n subQue_Published.push(sub_que_published);\r\n subQue_updated.push(sub_que_updated);\r\n //}\r\n }\r\n }\r\n }\r\n\r\n if (subQue_Published.length > 0 && subQue_updated.length > 0) {\r\n var itemAllDetail = { LanguageShortName: LanguageShortName, CurrentValueJson: que_Published, UpdatedValueJson: que_updated }\r\n var subItemAllDetail = { LanguageShortName: LanguageShortName, CurrentValueJson: subQue_Published, UpdatedValueJson: subQue_updated }\r\n this.props.UpdatePublishDBChange_AOIValueDrivers(itemAllDetail).\r\n then((response) => {\r\n if (response !== undefined) {\r\n this.props.UpdatePublishDBChange_AOIValueDrivers_subItem(subItemAllDetail)\r\n }\r\n });\r\n }\r\n\r\n }\r\n\r\n UpdatePublishDBChange_valueDrivers(LanguageShortName) {\r\n //businessValue --> valueDrivers\r\n var PublishedLanguageData = this.state.targetLanguagePublishedContent;\r\n var languageData = this.state.SelectedLangData;\r\n\r\n // First for businessValue for EN only \r\n var published_businessValue = PublishedLanguageData[\"businessValue\"]\r\n var updated_businessValue = languageData[\"businessValue\"]\r\n\r\n // for valueDrivers changes \r\n var valueDrivers_published_businessValue = published_businessValue[\"valueDrivers\"]\r\n var valueDrivers_updated_businessValue = updated_businessValue[\"valueDrivers\"]\r\n\r\n\r\n var currentValue = [];\r\n var updatedValue = [];\r\n\r\n for (let index = 0; index < valueDrivers_published_businessValue.length; index++) {\r\n var published_valueDrivers = valueDrivers_published_businessValue[index].valueDriver;\r\n var updated_valueDrivers = valueDrivers_updated_businessValue[index].valueDriver;\r\n if (published_valueDrivers !== updated_valueDrivers) {\r\n currentValue.push(published_valueDrivers);\r\n updatedValue.push(updated_valueDrivers);\r\n }\r\n }\r\n if (updatedValue.length > 0 && currentValue.length > 0) {\r\n var allDetail = { LanguageShortName: LanguageShortName, CurrentValueJson: currentValue, UpdatedValueJson: updatedValue }\r\n this.props.UpdateTableData_valueDrivers(allDetail)\r\n }\r\n }\r\n\r\n UpdatePublishDBChange_SubvalueDrivers(LanguageShortName) {\r\n var PublishedLanguageData = this.state.targetLanguagePublishedContent;\r\n var languageData = this.state.SelectedLangData;\r\n\r\n // First for businessValue for EN only \r\n var published_businessValue = PublishedLanguageData[\"businessValue\"]\r\n var updated_businessValue = languageData[\"businessValue\"]\r\n\r\n // for valueDrivers changes 9\r\n var subLevers_published_businessValue = published_businessValue[\"subLevers\"]\r\n var subLevers_updated_businessValue = updated_businessValue[\"subLevers\"]\r\n\r\n var currentValue = [];\r\n var updatedValue = [];\r\n\r\n for (let index = 0; index < subLevers_published_businessValue.length; index++) {\r\n\r\n var published_SubvalueDrivers = subLevers_published_businessValue[index];\r\n var updated_SubvalueDrivers = subLevers_updated_businessValue[index];\r\n\r\n for (let index_sub = 0; index_sub < published_SubvalueDrivers.length; index_sub++) {\r\n if (published_SubvalueDrivers[index_sub] !== updated_SubvalueDrivers[index_sub]) {\r\n currentValue.push(published_SubvalueDrivers[index_sub]);\r\n updatedValue.push(updated_SubvalueDrivers[index_sub]);\r\n }\r\n }\r\n }\r\n if (updatedValue.length > 0 && currentValue.length > 0) {\r\n var allDetail = { LanguageShortName: LanguageShortName, CurrentValueJson: currentValue, UpdatedValueJson: updatedValue }\r\n this.props.UpdateTableData_SubvalueDrivers(allDetail)\r\n }\r\n }\r\n\r\n UpdatePublishDBChange_BVSROIs(LanguageShortName) {\r\n var PublishedLanguageData = this.state.targetLanguagePublishedContent;\r\n var languageData = this.state.SelectedLangData;\r\n\r\n // First for businessValue for EN only \r\n var published_calculateROI = PublishedLanguageData[\"calculateROI\"]\r\n var updated_calculateROI = languageData[\"calculateROI\"]\r\n\r\n\r\n var table_published_calculateROI = published_calculateROI[\"table\"]\r\n var table_updated_calculateROI = updated_calculateROI[\"table\"]\r\n\r\n var rowHeader_table_published_calculateROI = table_published_calculateROI[\"rowHeaders\"]\r\n var rowHeader_table_updated_calculateROI = table_updated_calculateROI[\"rowHeaders\"]\r\n\r\n var currentValue = [];\r\n var updatedValue = [];\r\n\r\n for (let index = 0; index < rowHeader_table_published_calculateROI.length; index++) {\r\n var published_BVSROIs = rowHeader_table_published_calculateROI[index];\r\n var updated_BVSROIs = rowHeader_table_updated_calculateROI[index];\r\n if (published_BVSROIs !== updated_BVSROIs) {\r\n currentValue.push(published_BVSROIs);\r\n updatedValue.push(updated_BVSROIs);\r\n }\r\n }\r\n\r\n var rowFooter_table_published_calculateROI = table_published_calculateROI[\"rowFooters\"]\r\n var rowFooter_table_updated_calculateROI = table_updated_calculateROI[\"rowFooters\"]\r\n for (let index = 0; index < rowFooter_table_updated_calculateROI.length; index++) {\r\n\r\n var published_BVSROIs = rowFooter_table_published_calculateROI[index];\r\n var updated_BVSROIs = rowFooter_table_updated_calculateROI[index];\r\n if (published_BVSROIs !== updated_BVSROIs) {\r\n currentValue.push(published_BVSROIs);\r\n updatedValue.push(updated_BVSROIs);\r\n }\r\n }\r\n\r\n if (updatedValue.length > 0 && currentValue.length > 0) {\r\n var allDetail = { LanguageShortName: LanguageShortName, CurrentValueJson: currentValue, UpdatedValueJson: updatedValue }\r\n this.props.UpdateTableData_BVSROIs(allDetail)\r\n }\r\n }\r\n\r\n UpdatePublishDBChange_Countries(LanguageShortName) {\r\n var PublishedLanguageData = this.state.targetLanguagePublishedContent;\r\n var languageData = this.state.SelectedLangData;\r\n\r\n // First for discovery for all langauges \r\n var published_DiscoveryData = PublishedLanguageData[\"discovery\"]\r\n var updated_DiscoveryData = languageData[\"discovery\"]\r\n\r\n // for locations changes \r\n var form_published_DiscoveryData = published_DiscoveryData[\"form\"]\r\n var form_updated_DiscoveryData = updated_DiscoveryData[\"form\"]\r\n\r\n var locations_form_published_DiscoveryData = form_published_DiscoveryData[\"locations\"];\r\n var locations_form_updated_DiscoveryData = form_updated_DiscoveryData[\"locations\"];\r\n var currentValue = [];\r\n var updatedValue = [];\r\n\r\n for (let index = 0; index < locations_form_published_DiscoveryData.length; index++) {\r\n var published_locations = locations_form_published_DiscoveryData[index];\r\n var updated_locations = locations_form_updated_DiscoveryData[index];\r\n if (published_locations !== updated_locations) {\r\n currentValue.push(published_locations);\r\n updatedValue.push(updated_locations);\r\n }\r\n }\r\n if (updatedValue.length > 0 && currentValue.length > 0) {\r\n var allDetail = { LanguageShortName: LanguageShortName, CurrentValueJson: currentValue, UpdatedValueJson: updatedValue }\r\n this.props.UpdateTableData_Countries(allDetail)\r\n }\r\n }\r\n\r\n handleUpdateDraftClick(event, isReset) {\r\n\r\n if (this.state.selectedLanvalue !== null && this.state.selectedScreenName !== null) {\r\n setTimeout(() => {\r\n this.props.LanguageTranslationLoading(true)\r\n }, 20);\r\n\r\n var item = {};\r\n this.state.global = {}\r\n this.setState(\r\n this.state\r\n )\r\n var _selectedScreenName = this.state.selectedScreenName\r\n var selectedScreen = this.state.screenNames.filter(function (item) {\r\n if (item.DisplayName === _selectedScreenName) {\r\n return item.NameinJson;\r\n }\r\n });\r\n selectedScreen = selectedScreen[0].NameinJson;\r\n var registerData = this.state.register\r\n this.getformItemData(this, registerData, \"\");\r\n item = this.state.global;\r\n var sendDetails = {};\r\n var OperationName = '';\r\n if (typeof (isReset) === \"object\" || isReset === undefined) {\r\n OperationName = 'UpdateDraft'\r\n }\r\n else {\r\n OperationName = 'ResetToPublishDraft'\r\n }\r\n sendDetails = { scree: selectedScreen, \"language\": this.state.selectedLanvalue, data: item, userId: this.props.user.user.Id, OperationName: OperationName }\r\n this.translateENtoLanguage(sendDetails, OperationName);\r\n\r\n }\r\n }\r\n\r\n handleClickPublishDraft() {\r\n this.duplicateRecords = [];\r\n if (this.state.selectedLanvalue !== null) {\r\n this.props.LanguageTranslationLoading(true);\r\n var LanguageShortName = this.state.selectedLanvalue\r\n var value = this.state.language.filter(function (item) {\r\n if (item.ShortLanguageName == LanguageShortName) {\r\n\r\n return item.LanguageName;\r\n }\r\n })\r\n this.props.handleClickMovetoApplication(value[0], this.props.user.user.Id).\r\n then((response) => {\r\n if (response !== undefined) {\r\n this.formDispatch(actions.reset('lanMgr'));\r\n this.setState({ register: '' });\r\n\r\n this.UpdatePublishDBChange_AOI(LanguageShortName);\r\n this.UpdatePublishDBChange_UserInputs(LanguageShortName);\r\n this.UpdatePublishDBChange_AOIValueDrivers(LanguageShortName);\r\n this.UpdatePublishDBChange_Industries(LanguageShortName);\r\n this.UpdatePublishDBChange_Countries(LanguageShortName);\r\n if (LanguageShortName === 'en') {\r\n this.UpdatePublishDBChange_valueDrivers(LanguageShortName);\r\n this.UpdatePublishDBChange_SubvalueDrivers(LanguageShortName);\r\n this.UpdatePublishDBChange_BVSROIs(LanguageShortName);\r\n }\r\n\r\n setTimeout(() => {\r\n this.setState({ messages: (response.data + \" To review changes do relogin.\") })\r\n this.props.LanguageTranslationLoading(false)\r\n //this.setState({:'Published '})\r\n }, 4000);\r\n\r\n setTimeout(() => {\r\n this.props.location.logout()\r\n }, 10000)\r\n }\r\n });\r\n\r\n }\r\n else {\r\n this.props.user.error = \"Language name required!\"\r\n // this.formDispatch(actions.setErrors('lanMgr.LanguageName', true))\r\n }\r\n }\r\n\r\n handleClickRsetContent(event) {\r\n this.duplicateRecords = [];\r\n if (this.state.selectedScreenName !== null && this.state.selectedScreenName !== '') { //This is for the Column 2 Selected Language Published value \r\n this.props.LanguageTranslationLoading(true)\r\n var _selectedScreenName = this.state.selectedScreenName\r\n var selectedScreen = this.state.screenNames.filter(function (item) {\r\n if (item.DisplayName === _selectedScreenName) {\r\n return item.NameinJson;\r\n }\r\n });\r\n selectedScreen = selectedScreen[0].NameinJson;\r\n\r\n var PublishedLanguageData = this.state.targetLanguagePublishedContent;\r\n var selectedLanPublishedNestedElements = PublishedLanguageData[selectedScreen];\r\n if (selectedLanPublishedNestedElements === undefined) {\r\n Object.values(PublishedLanguageData).map((type) => {\r\n if (type.hasOwnProperty(selectedScreen)) {\r\n selectedLanPublishedNestedElements = type[selectedScreen]\r\n }\r\n })\r\n }\r\n\r\n this.setState({ messages: '' })\r\n this.setState({ currentData: selectedLanPublishedNestedElements });\r\n this.setState({ innerObject: selectedLanPublishedNestedElements })\r\n setTimeout(() => {\r\n this.handleUpdateDraftClick(event, true);\r\n this.props.LanguageTranslationLoading(false)\r\n this.setState({ messages: 'Language content reset successfully!' })\r\n }, 2000);\r\n\r\n }\r\n }\r\n\r\n\r\n getformItemData(e, datakey, name) {\r\n Object.keys(datakey).map(function (childitem) {\r\n if ((typeof datakey[childitem]) === \"string\") {\r\n var id = '';\r\n id = name !== '' ? name + '|' + childitem : childitem;\r\n\r\n if (document.getElementById(id) !== null) {\r\n var item = {};\r\n var nodeId = id.split(\"|\").join(\"\");\r\n item[nodeId] = document.getElementById(id).value\r\n\r\n e.state.global[nodeId] = document.getElementById(id).value\r\n e.setState(e.state)\r\n }\r\n }\r\n else {\r\n e.getformItemData(e, datakey[childitem], name !== '' ? name + '|' + childitem : childitem)\r\n }\r\n }.bind(this));\r\n }\r\n\r\n translateENtoLanguage(data, OperationName) {\r\n //console.log('translateENtoLanguage callled..............')\r\n this.props.translateENtoLanguage(data)\r\n .then((response) => {\r\n setTimeout(() => {\r\n this.props.LanguageTranslationLoading(false)\r\n }, 2000);\r\n if (response !== undefined && OperationName === 'UpdateDraft') {\r\n this.setState({ messages: 'Transalation has been update successfully for your selected language!' })\r\n this.formDispatch(actions.reset('lanMgr'));\r\n this.setState({ register: '' });\r\n //if (data.language === \"en\") { this.getEnglishData(\"en\",true); }\r\n\r\n return response;\r\n }\r\n\r\n })\r\n .catch((err) => {\r\n //console.log(err)\r\n });\r\n }\r\n\r\n\r\n callApi() {\r\n this.props.callApi()\r\n .then((response) => {\r\n if (response !== undefined) {\r\n var screen = []\r\n for (var i = 0; i < response.length; i++) {\r\n\r\n screen.push(response[i]);\r\n }\r\n this.setState({ screenNames: screen })\r\n\r\n //bind screenNames\r\n var array = [];\r\n this.state.screenNames.forEach((element) => {\r\n var obj = {};\r\n obj.label = element.DisplayName;\r\n obj.value = element.NameinJson;\r\n array.push(obj);\r\n });\r\n this.setState({ screenNamesOption: array });\r\n }\r\n })\r\n .catch((err) => {\r\n });\r\n }\r\n\r\n handlelangChange(value) {\r\n // Will get Published data for column 3 \r\n this.props.getDataOfLanguage(value.value, true)\r\n .then((response) => {\r\n if (response !== undefined) {\r\n this.formDispatch(actions.reset('lanMgr.LanguageName'));\r\n this.setState({ targetLanguagePublishedContent: response.data })\r\n this.setState({ selectedLanvalue: value.value, messages: '' });\r\n this.setState({ selectedLanguage: value.label });\r\n\r\n // Will get draft data for column 2 \r\n this.props.getDataOfLanguage(value.value, false)\r\n .then((response) => {\r\n this.setState({ SelectedLangData: response.data });\r\n //this.formDispatch(actions.reset('lanMgr.LanguageShortName'));\r\n this.setState({ currentData: '' });\r\n this.setState({ register: '' });\r\n this.setState({ innerObject: '' })\r\n });\r\n }\r\n });\r\n // // validation \r\n // if (value.label == '') {\r\n // this.formDispatch(actions.setErrors('lanMgr.LanguageName', true))\r\n // this.formDispatch(actions.change('lanMgr.LanguageName', ''));\r\n // } else {\r\n // this.formDispatch(actions.change('lanMgr.LanguageName', value.label));\r\n // this.formDispatch(actions.setErrors('lanMgr.LanguageName', false))\r\n // }\r\n\r\n }\r\n\r\n onTextChange(event) {\r\n this.duplicateRecords = [];\r\n var duplicateValIds = this.duplicateValueId;\r\n var id = event.target.id;\r\n var textArea = document.getElementById(id);\r\n var stateElement = this.state.currentData;\r\n var registerElement = this.state.register;\r\n var getElementsPosition = id.split(\"|\");\r\n var i = 1;\r\n var inst = this;\r\n getElementsPosition.forEach(element => {\r\n if (element !== '' && stateElement !== undefined) {\r\n\r\n if (getElementsPosition.length === i) {\r\n stateElement[element] = textArea.value;\r\n this.setState(currentData => ({\r\n element: textArea.value\r\n }));\r\n\r\n } else {\r\n stateElement = stateElement[element];\r\n }\r\n i++;\r\n }\r\n });\r\n\r\n var _instance = this;\r\n //subLeverCalculation|0|rows|0|0|content\r\n if (this.state.selectedScreenName === 'SubLever Calculations Screen' &&\r\n id.indexOf(\"subLeverCalculation\") > -1 && id.indexOf(\"rows\") > -1\r\n && id.indexOf(\"content\") > -1) {\r\n var id_eng = document.getElementById(\"lbl\" + event.target.id).innerText;\r\n var engTxt = this.state.register['subLeverCalculation'];\r\n var oldValue = textArea.defaultValue;\r\n var _NewStateObj = this.state.currentData['subLeverCalculation'];\r\n Object.keys(_NewStateObj).map(function (sublever) {\r\n var rows = _NewStateObj[sublever]['rows']\r\n var rows_en = engTxt[sublever]['rows']\r\n Object.keys(rows).map(function (row) {\r\n var _change = rows[row][0]['content'];\r\n var _engtxt = rows_en[row][0]['content'];\r\n if (id_eng.toLowerCase() === _engtxt.toLowerCase()) {\r\n _instance.setState(currentData => ({\r\n _change: textArea.value\r\n }));\r\n\r\n rows[row][0]['content'] = textArea.value;\r\n }\r\n });\r\n });\r\n }\r\n\r\n if (this.state.selectedScreenName === 'SubLever Calculations Screen' &&\r\n id.indexOf(\"subLeverCalculation\") > -1 && id.indexOf(\"estimatedBenefit\") > -1) {\r\n var id_eng = document.getElementById(\"lbl\" + event.target.id).innerText;\r\n var engTxt = this.state.register['subLeverCalculation'];\r\n\r\n var oldValue = textArea.defaultValue;\r\n var _NewStateObj = this.state.currentData['subLeverCalculation'];\r\n Object.keys(_NewStateObj).map(function (sublever) {\r\n var estimatedBenefit = _NewStateObj[sublever]['estimatedBenefit']\r\n var eng_estimatedB = engTxt[sublever]['estimatedBenefit']\r\n if (eng_estimatedB.toLowerCase() === id_eng.toLowerCase()) {\r\n _NewStateObj[sublever]['estimatedBenefit'] = textArea.value;\r\n }\r\n });\r\n }\r\n\r\n }\r\n\r\n showPublishLangauge() {\r\n if (this.props.user.user !== null && this.props.user.user.applicationFeatures !== undefined && this.props.user.user.applicationFeatures !== null) {\r\n var resp = Object.values(this.props.user.user.applicationFeatures).map(feature => {\r\n if (this.props.content.LanguageManager[0].subItems[1][feature.Action] !== undefined) {\r\n return true;\r\n }\r\n })\r\n if (resp.indexOf(true) > 0) {\r\n return true;\r\n }\r\n }\r\n\r\n return false;\r\n\r\n\r\n\r\n }\r\n\r\n render() {\r\n\r\n var changeevent = this.onTextChange.bind(this);// this.onTextChange()\r\n var devActions = ['reportAction', 'kpi', 'topValues', 'detailedFileFields', 'caseStudy', 'collapseChild', 'contentId', 'calculatedUOM', 'userInputUOM', 'active', 'isActiveReport', 'action', 'link', 'aribaLogo', 'sapLogo', 'id', 'ctaURL', 'languageSelector', 'roles', 'noInput', 'suffix', 'reportId', 'skuList', 'regions']\r\n var dynamicid = \"\";\r\n var registerData = this.state.register;\r\n var currentDraftData = this.state.currentData;\r\n var publishedData = this.state.publishedNestedValue;\r\n var draftData_innerObject = this.state.currentData;\r\n var instance = this;\r\n\r\n var getComponent = (item, name, id, currentDraftDataitem, publishedDataItem) => {\r\n dynamicid = name;\r\n switch (typeof (item)) {\r\n case 'object':\r\n var i = 1;\r\n var k = Object.keys(item).map(function (childitem) {\r\n if (item[childitem] !== \"\" && (typeof item[childitem]) === \"string\" && (devActions.find(a => a == childitem)) === undefined) {\r\n return (\r\n (item[childitem] !== \"\" && (typeof item[childitem]) === \"string\" && (devActions.find(a => a == childitem)) === undefined) ?\r\n\r\n {item[childitem]}
\r\n{publishedDataItem[childitem]}
\r\n\r\n {\r\n (Object.keys(item).length === i)\r\n ?\r\n dynamicid = dynamicid.toString().replace(name, '')\r\n :\r\n i++\r\n }
\r\n{registerData[languagerow]}
\r\n{publishedData[languagerow]}
\r\n\r\n
\r\n )\r\n };\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n register: state.register,\r\n user: state.default,\r\n currentData: state.currentData,\r\n innerObject: state.innerObject,\r\n SelectedLangData: state.SelectedLangData,\r\n validation: state.content.validation,\r\n content: state.content.menu\r\n }\r\n}\r\n\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n callApi: () => dispatch(callApiget()),\r\n translateENtoLanguage: (data) => dispatch(translateENtoLanguage(data)),\r\n getLanguageListFromAPI: () => dispatch(getlanguageLists()),\r\n handleClickMovetoApplication: (data, userID) => dispatch(movetoapplication(data, userID)),\r\n getDataOfLanguage: (language, fromPublish) => dispatch(GetDataOfLanguage(language, fromPublish)),\r\n updateTableData_AOI: (allDetails) => dispatch(updateTableData_AOI(allDetails)),\r\n UpdateTableData_UserInputs: (allDetail) => dispatch(UpdateTableData_UserInputs(allDetail)),\r\n UpdateTableData_Industries: (allDetail) => dispatch(UpdateTableData_Industries(allDetail)),\r\n UpdatePublishDBChange_AOIValueDrivers: (itemAllDetail) => dispatch(UpdatePublishDBChange_AOIValueDrivers(itemAllDetail)),\r\n UpdatePublishDBChange_AOIValueDrivers_subItem: (itemAllDetail) => dispatch(UpdatePublishDBChange_AOIValueDrivers_subItem(itemAllDetail)),\r\n UpdateTableData_valueDrivers: (itemAllDetail) => dispatch(UpdateTableData_valueDrivers(itemAllDetail)),\r\n UpdateTableData_SubvalueDrivers: (itemAllDetail) => dispatch(UpdateTableData_SubvalueDrivers(itemAllDetail)),\r\n UpdateTableData_BVSROIs: (itemAllDetail) => dispatch(UpdateTableData_BVSROIs(itemAllDetail)),\r\n\r\n LanguageTranslationLoading: (data) => dispatch(LanguageTranslationLoading(data)),\r\n UpdateTableData_Countries: (allDetail) => dispatch(UpdateTableData_Countries(allDetail)),\r\n }\r\n}\r\n//LanguageTranslationSuccess: () => dispatch(LanguageTranslationSuccess()),\r\nexport default connect(mapStateToProps, mapDispatchToProps)(TranslateScreen)","\r\nimport axios from 'axios'\r\nimport {\r\n ROOT_URL\r\n} from 'Constants'\r\n\r\n \r\nexport function updateTableData_AOI(allDetail) {\r\n return (dispatch) => {\r\n \r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/LangugaeTranslation/UpdateTableData_AOI`,\r\n data: { \"LanguageShortName\": allDetail.LanguageShortName, \"CurrentValueJson\": allDetail.CurrentValueJson, \"UpdatedValueJson\": allDetail.UpdatedValueJson },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => { \r\n return response\r\n })\r\n }\r\n}\r\n\r\n\r\nexport function UpdateTableData_UserInputs(allDetail) {\r\n return (dispatch) => { \r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/LangugaeTranslation/UpdateTableData_UserInputs`,\r\n data: { \"LanguageShortName\": allDetail.LanguageShortName, \"CurrentValueJson\": allDetail.CurrentValueJson, \"UpdatedValueJson\": allDetail.UpdatedValueJson },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => { \r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function UpdateTableData_Industries(allDetail) {\r\n return (dispatch) => { \r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/LangugaeTranslation/UpdateTableData_Industries`,\r\n data: { \"LanguageShortName\": allDetail.LanguageShortName, \"CurrentValueJson\": allDetail.CurrentValueJson, \"UpdatedValueJson\": allDetail.UpdatedValueJson },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => { \r\n return response\r\n })\r\n }\r\n}\r\n\r\nexport function UpdatePublishDBChange_AOIValueDrivers(itemAllDetail) {\r\n let token = localStorage.getItem('jwtToken')\r\n return (dispatch) => {\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/LangugaeTranslation/UpdateTableData_AOIValueDrivers_Item`,\r\n data: { \"LanguageShortName\": itemAllDetail.LanguageShortName, \"CurrentValueJson\": itemAllDetail.CurrentValueJson, \"UpdatedValueJson\": itemAllDetail.UpdatedValueJson },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response;\r\n })\r\n };\r\n}\r\n\r\nexport function UpdatePublishDBChange_AOIValueDrivers_subItem(subItemAllDetail) {\r\n let token = localStorage.getItem('jwtToken')\r\n return (dispatch) => {\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/LangugaeTranslation/UpdateTableData_AOIValueDrivers_SubItem`,\r\n data: { \"LanguageShortName\": subItemAllDetail.LanguageShortName, \"CurrentValueJson\": subItemAllDetail.CurrentValueJson, \"UpdatedValueJson\": subItemAllDetail.UpdatedValueJson },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n });\r\n };\r\n\r\n}\r\n\r\nexport function UpdateTableData_valueDrivers(valueDriversAllDetail) {\r\n let token = localStorage.getItem('jwtToken')\r\n return (dispatch) => {\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/LangugaeTranslation/UpdateTableData_ValueDrivers`,\r\n data: { \"LanguageShortName\": valueDriversAllDetail.LanguageShortName, \"CurrentValueJson\": valueDriversAllDetail.CurrentValueJson, \"UpdatedValueJson\": valueDriversAllDetail.UpdatedValueJson },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n });\r\n };\r\n\r\n}\r\n\r\nexport function UpdateTableData_SubvalueDrivers(valueDriversAllDetail) {\r\n let token = localStorage.getItem('jwtToken')\r\n return (dispatch) => {\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/LangugaeTranslation/UpdateTableData_SubValueDrivers`,\r\n data: { \"LanguageShortName\": valueDriversAllDetail.LanguageShortName, \"CurrentValueJson\": valueDriversAllDetail.CurrentValueJson, \"UpdatedValueJson\": valueDriversAllDetail.UpdatedValueJson },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n });\r\n };\r\n\r\n}\r\n\r\nexport function UpdateTableData_BVSROIs(valueDriversAllDetail) {\r\n let token = localStorage.getItem('jwtToken')\r\n return (dispatch) => {\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/LangugaeTranslation/UpdateTableData_BVSROIs`,\r\n data: { \"LanguageShortName\": valueDriversAllDetail.LanguageShortName, \"CurrentValueJson\": valueDriversAllDetail.CurrentValueJson, \"UpdatedValueJson\": valueDriversAllDetail.UpdatedValueJson },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n });\r\n };\r\n\r\n}\r\n\r\n \r\nexport function UpdateTableData_Countries(allDetail) {\r\n return (dispatch) => { \r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: `${ROOT_URL}/LangugaeTranslation/UpdateTableData_Countries`,\r\n data: { \"LanguageShortName\": allDetail.LanguageShortName, \"CurrentValueJson\": allDetail.CurrentValueJson, \"UpdatedValueJson\": allDetail.UpdatedValueJson },\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => { \r\n return response\r\n })\r\n }\r\n}\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport PropTypes from 'prop-types';\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\n// UI\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\nimport Button from 'UI/Button'\r\nimport {\r\n getAlllanguageList, callApi, DeleteLanguage\r\n} from 'actions/nodeActions'\r\nimport { validators } from 'Constants'\r\nimport {\r\n getCurrentLanguage\r\n} from 'utils/Utils'\r\n\r\nclass LanguageContainer extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { languageList: [], response: '' }\r\n this.writefile = this.writefile.bind(this)\r\n this.getLanguageListFromAPI = this.getLanguageListFromAPI.bind(this)\r\n this.getLanguageListFromAPI();\r\n this.handleRowDel = this.handleRowDel.bind(this);\r\n this.resetAllMessages()\r\n }\r\n\r\n componentWillUnmount() {\r\n this.resetAllMessages()\r\n this.formDispatch(actions.reset('lanMgr'));\r\n }\r\n\r\n writefile(formValues) {\r\n if (formValues.LanguageName.length > 0 && formValues.LanguageShortName.length > 0) {\r\n\r\n this.props.writefile(formValues, this.props.user.user.Id)\r\n .then((res) => {\r\n this.formDispatch(actions.reset('lanMgr'))\r\n this.setState({ response: res });\r\n this.getLanguageListFromAPI();\r\n })\r\n .catch(err => {\r\n if (err.stack.includes('Network Error')) {\r\n this.props.domainDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n this.resetAllMessages();\r\n });\r\n\r\n setTimeout(() => {\r\n this.resetAllMessages()\r\n }, 50000);\r\n }\r\n }\r\n\r\n // most updated file will be here so read language from here\r\n getLanguageListFromAPI() {\r\n this.props.getLanguageListFromAPI().\r\n then((response) => {\r\n this.setState({ languageList: response })\r\n }).\r\n catch(err => {\r\n if (err.stack.includes('Network Error')) {\r\n this.props.domainDetailsFailure('API service is down. Please contact administrator.')\r\n }\r\n this.resetAllMessages();\r\n });\r\n }\r\n\r\n isValidString(vals) {\r\n return isNaN(vals);\r\n }\r\n\r\n isDuplicate(vals) {\r\n var result = true\r\n\r\n if (this.state.languageList !== undefined) {\r\n for (var item = 0; item < this.state.languageList.length; item++) {\r\n if (this.state.languageList[item].ShortLanguageName === vals.trim() || this.state.languageList[item].LanguageName === vals.trim()) {\r\n result = false;\r\n break;\r\n }\r\n }\r\n }\r\n return result;\r\n }\r\n\r\n handleRowDel(data) {\r\n var currentBrowserLanguage = getCurrentLanguage();\r\n\r\n if (currentBrowserLanguage !== data.ShortLanguageName) {\r\n const result = window.confirm('Do you want to delete the Language ' + data.LanguageName + ' ? ');\r\n if (result) {\r\n this.props.handleRowDel(data, this.props.user.user.Id).\r\n then((res) => {\r\n this.setState({ response: res.data })\r\n this.getLanguageListFromAPI()\r\n });\r\n setTimeout(() => {\r\n this.resetAllMessages()\r\n }, 50000);\r\n }\r\n }\r\n else {\r\n const result = window.alert('Application language should not be same as deleted languge ' + data.LanguageName + ' Please chnage application language.');\r\n }\r\n }\r\n\r\n resetAllMessages() {\r\n this.setState({ response: '' })\r\n this.props.user.error = '';\r\n }\r\n\r\n PropTypes = {\r\n inputType: PropTypes.string.isRequired\r\n };\r\n \r\n render() {\r\n var rowDel = this.handleRowDel\r\n var languagerow = (this.state.languageList !== undefined) ?\r\n this.state.languageList.map(function (itemLanguage) {\r\n return ({this.props.content.LanguageManager[0].subItems[1].text}
\r\n \r\n \r\n {this.showPublishLangauge() ?\r\n
\r\n \r\n
\r\n : null\r\n }\r\n \r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\nclass AddLanguageRow extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n }\r\n onDelEvent() {\r\n this.props.onDelEvent(this.props.itemLanguage);\r\n }\r\n\r\n render() {\r\n\r\n return (\r\n {this.props.content.LanguageManager[0].subItems[0].text}
\r\n\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nSubTabsPanel.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n tabs: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n label: PropTypes.string.isRequired,\r\n id: PropTypes.number.isRequired,\r\n component: PropTypes.object.isRequired,\r\n }).isRequired)\r\n .isRequired,\r\n};\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n supplierDrilldownPendingChanges: state.spendDetails.supplierDrilldownPendingChanges,\r\n tabMessage: state.content.spendAnalysis.detailedFile,\r\n spendDetails: state.spendDetails,\r\n change: state.detailedFileChanges.changes,\r\n valueStory : state.valueStory,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n pendingChanges: changes => dispatch(pendingChanges(changes)),\r\n //defineScopeLoading: bool => dispatch(defineScopeLoading(bool)),\r\n saveKPIOnRedirect: changes => dispatch(saveKPIOnRedirect(changes)),\r\n saveValueStoryOnRedirect: changes => dispatch(saveValueStoryOnRedirect(changes)),\r\n deleteIntermediateKPIOnRedirect: changes => dispatch(deleteIntermediateKPIOnRedirect(changes)),\r\n isEnablementStrategyContainerPage: obj => dispatch(isEnablementStrategyContainerPage(obj)),\r\n isValueStoryPage:(obj)=>dispatch(isValueStoryPage(obj)),\r\n isSpendParameterPage: obj => dispatch(isSpendParameterPage(obj)),\r\n saveSpendParametersOnRedirect: changes => dispatch(saveSpendParametersOnRedirect(changes)),\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(SubTabsPanel));","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport MaterialTable from 'material-table'\r\nimport moment from 'moment'\r\nimport { path } from 'Constants'\r\n\r\n// Actions\r\nimport {\r\n benchMarkSuccess,\r\n benchMarkFailure,\r\n getBenchMarkDetails,\r\n addBenchMark,\r\n updateBenchMark,\r\n deActiveBenchMark,\r\n generateBenchMarkJSON\r\n} from 'actions/userActions'\r\n\r\nclass BusinessCaseBenchmark extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n responseMsg: '',\r\n isError: 'No',\r\n isLoading: true,\r\n data: [],\r\n columns: [\r\n { title: 'Suggested Value Description', field: 'Suggested_Value_Description', editable: 'onAdd' },\r\n {\r\n title: 'Region/Country', field: 'Region_Country', editable: 'onAdd', lookup: {\r\n 'X-Region': 'X-Region',\r\n 'NAMER': 'NAMER',\r\n 'APJ': 'APJ',\r\n 'LAC': 'LAC',\r\n 'EMEA': 'EMEA',\r\n 'United States': 'United States',\r\n 'Afghanistan': 'Afghanistan',\r\n 'Aland Islands': 'Aland Islands',\r\n 'Albania': 'Albania',\r\n 'Algeria': 'Algeria',\r\n 'American Samoa': 'American Samoa',\r\n 'Andorra': 'Andorra',\r\n 'Angola': 'Angola',\r\n 'Anguilla': 'Anguilla',\r\n 'Antigua & Barbuda': 'Antigua & Barbuda',\r\n 'Argentina': 'Argentina',\r\n 'Armenia': 'Armenia',\r\n 'Aruba': 'Aruba',\r\n 'Australia': 'Australia',\r\n 'Austria': 'Austria',\r\n 'Azerbaijan': 'Azerbaijan',\r\n 'Bahamas': 'Bahamas',\r\n 'Bahrain': 'Bahrain',\r\n 'Bangladesh': 'Bangladesh',\r\n 'Barbados': 'Barbados',\r\n 'Belarus': 'Belarus',\r\n 'Belgium': 'Belgium',\r\n 'Belize': 'Belize',\r\n 'Benin': 'Benin',\r\n 'Bhutan': 'Bhutan',\r\n 'Bolivia': 'Bolivia',\r\n 'Bosnia and Herzegovina': 'Bosnia and Herzegovina',\r\n 'Botswana': 'Botswana',\r\n 'Brazil': 'Brazil',\r\n 'British Indian Ocean Territory': 'British Indian Ocean Territory',\r\n 'British Virgin Islands': 'British Virgin Islands',\r\n 'Brunei': 'Brunei',\r\n 'Bulgaria': 'Bulgaria',\r\n 'Burkina Faso': 'Burkina Faso',\r\n 'Burundi': 'Burundi',\r\n 'Cambodia': 'Cambodia',\r\n 'Cameroon': 'Cameroon',\r\n 'Canada': 'Canada',\r\n 'Cape Verde Island': 'Cape Verde Island',\r\n 'Cayman Islands': 'Cayman Islands',\r\n 'Central African Republic': 'Central African Republic',\r\n 'Chad': 'Chad',\r\n 'Chile': 'Chile',\r\n 'China': 'China',\r\n 'Christmas Island': 'Christmas Island',\r\n 'Cocos (Keeling) Islands': 'Cocos (Keeling) Islands',\r\n 'Colombia': 'Colombia',\r\n 'Comoros': 'Comoros',\r\n 'Congo': 'Congo',\r\n 'Congo (DRC)': 'Congo (DRC)',\r\n 'Cook Islands': 'Cook Islands',\r\n 'Costa Rica': 'Costa Rica',\r\n 'Cote dIvoire': 'Cote dIvoire',\r\n 'Croatia': 'Croatia',\r\n 'Cuba': 'Cuba',\r\n 'Cyprus': 'Cyprus',\r\n 'Czech Republic': 'Czech Republic',\r\n 'Denmark': 'Denmark',\r\n 'Djibouti': 'Djibouti',\r\n 'Dominica': 'Dominica',\r\n 'Dominican Republic': 'Dominican Republic',\r\n 'Ecuador': 'Ecuador',\r\n 'Egypt': 'Egypt',\r\n 'El Salvador': 'El Salvador',\r\n 'Equatorial Guinea': 'Equatorial Guinea',\r\n 'Eritrea': 'Eritrea',\r\n 'Estonia': 'Estonia',\r\n 'Ethiopia': 'Ethiopia',\r\n 'Falkland Islands': 'Falkland Islands',\r\n 'Faroe Islands': 'Faroe Islands',\r\n 'Fiji Islands': 'Fiji Islands',\r\n 'Finland': 'Finland',\r\n 'France': 'France',\r\n 'French Guiana': 'French Guiana',\r\n 'French Polynesia': 'French Polynesia',\r\n 'Gabon': 'Gabon',\r\n 'Gambia': 'Gambia',\r\n 'Gaza Strip': 'Gaza Strip',\r\n 'Georgia': 'Georgia',\r\n 'Germany': 'Germany',\r\n 'Ghana': 'Ghana',\r\n 'Gibraltar': 'Gibraltar',\r\n 'Greece': 'Greece',\r\n 'Greenland': 'Greenland',\r\n 'Grenada': 'Grenada',\r\n 'Guadeloupe': 'Guadeloupe',\r\n 'Guam': 'Guam',\r\n 'Guatemala': 'Guatemala',\r\n 'Guinea': 'Guinea',\r\n 'Guinea-Bissau': 'Guinea-Bissau',\r\n 'Guyana': 'Guyana',\r\n 'Haiti': 'Haiti',\r\n 'Heard Is & McDonald Is': 'Heard Is & McDonald Is',\r\n 'Honduras': 'Honduras',\r\n 'Hong Kong': 'Hong Kong',\r\n 'Hungary': 'Hungary',\r\n 'Iceland': 'Iceland',\r\n 'India': 'India',\r\n 'Indonesia': 'Indonesia',\r\n 'Iran': 'Iran',\r\n 'Iraq': 'Iraq',\r\n 'Ireland': 'Ireland',\r\n 'Israel': 'Israel',\r\n 'Italy': 'Italy',\r\n 'Jamaica': 'Jamaica',\r\n 'Japan': 'Japan',\r\n 'Jordan': 'Jordan',\r\n 'Kazakhstan': 'Kazakhstan',\r\n 'Kenya': 'Kenya',\r\n 'Kiribati': 'Kiribati',\r\n 'Korea': 'Korea',\r\n 'Kuwait': 'Kuwait',\r\n 'Kyrgyzstan': 'Kyrgyzstan',\r\n 'Laos': 'Laos',\r\n 'Latvia': 'Latvia',\r\n 'Lebanon': 'Lebanon',\r\n 'Lesotho': 'Lesotho',\r\n 'Liberia': 'Liberia',\r\n 'Libya': 'Libya',\r\n 'Liechtenstein': 'Liechtenstein',\r\n 'Lithuania': 'Lithuania',\r\n 'Luxembourg': 'Luxembourg',\r\n 'Macao SAR': 'Macao SAR',\r\n 'Macedonia (FYROM)': 'Macedonia (FYROM)',\r\n 'Madagascar': 'Madagascar',\r\n 'Malawi': 'Malawi',\r\n 'Malaysia': 'Malaysia',\r\n 'Maldives': 'Maldives',\r\n 'Mali': 'Mali',\r\n 'Malta': 'Malta',\r\n 'Marshall Islands': 'Marshall Islands',\r\n 'Martinique': 'Martinique',\r\n 'Mauritania': 'Mauritania',\r\n 'Mauritius': 'Mauritius',\r\n 'Mayotte': 'Mayotte',\r\n 'Mexico': 'Mexico',\r\n 'Micronesia': 'Micronesia',\r\n 'Moldova': 'Moldova',\r\n 'Monaco': 'Monaco',\r\n 'Mongolia': 'Mongolia',\r\n 'Montenegro': 'Montenegro',\r\n 'Montserrat': 'Montserrat',\r\n 'Morocco': 'Morocco',\r\n 'Mozambique': 'Mozambique',\r\n 'Myanmar': 'Myanmar',\r\n 'Namibia': 'Namibia',\r\n 'Nauru': 'Nauru',\r\n 'Nepal': 'Nepal',\r\n 'Netherlands': 'Netherlands',\r\n 'Netherlands Antilles': 'Netherlands Antilles',\r\n 'New Caledonia': 'New Caledonia',\r\n 'New Zealand': 'New Zealand',\r\n 'Nicaragua': 'Nicaragua',\r\n 'Niger': 'Niger',\r\n 'Nigeria': 'Nigeria',\r\n 'Niue': 'Niue',\r\n 'Norfolk Island': 'Norfolk Island',\r\n 'North Korea': 'North Korea',\r\n 'Northern Mariana Islands': 'Northern Mariana Islands',\r\n 'Norway': 'Norway',\r\n 'Oman': 'Oman',\r\n 'Pakistan': 'Pakistan',\r\n 'Palau': 'Palau',\r\n 'Palestinian Authority': 'Palestinian Authority',\r\n 'Panama': 'Panama',\r\n 'Papua New Guinea': 'Papua New Guinea',\r\n 'Paraguay': 'Paraguay',\r\n 'Peru': 'Peru',\r\n 'Philippines': 'Philippines',\r\n 'Pitcairn Island': 'Pitcairn Island',\r\n 'Poland': 'Poland',\r\n 'Portugal': 'Portugal',\r\n 'Puerto Rico': 'Puerto Rico',\r\n 'Qatar': 'Qatar',\r\n 'Reunion': 'Reunion',\r\n 'Romania': 'Romania',\r\n 'Russia': 'Russia',\r\n 'Rwanda': 'Rwanda',\r\n 'Samoa': 'Samoa',\r\n 'San Marino': 'San Marino',\r\n 'Sao Tome & Principe': 'Sao Tome & Principe',\r\n 'Saudi Arabia': 'Saudi Arabia',\r\n 'Senegal': 'Senegal',\r\n 'Serbia': 'Serbia',\r\n 'Seychelles': 'Seychelles',\r\n 'Sierra Leone': 'Sierra Leone',\r\n 'Singapore': 'Singapore',\r\n 'Slovakia': 'Slovakia',\r\n 'Slovenia': 'Slovenia',\r\n 'Solomon Island': 'Solomon Island',\r\n 'Somalia': 'Somalia',\r\n 'South Africa': 'South Africa',\r\n 'Spain': 'Spain',\r\n 'Sri Lanka': 'Sri Lanka',\r\n 'St. Kitts & Nevis': 'St. Kitts & Nevis',\r\n 'St. Lucia': 'St. Lucia',\r\n 'Saint-Pierre Et Miquelon': 'Saint-Pierre Et Miquelon',\r\n 'St. Vincent & the Grenadines': 'St. Vincent & the Grenadines',\r\n 'Sth Georgia & Sandwich Isles': 'Sth Georgia & Sandwich Isles',\r\n 'Sudan': 'Sudan',\r\n 'Suriname': 'Suriname',\r\n 'Svalbard & Jan Mayen Islands': 'Svalbard & Jan Mayen Islands',\r\n 'Swaziland': 'Swaziland',\r\n 'Sweden': 'Sweden',\r\n 'Switzerland': 'Switzerland',\r\n 'Syria': 'Syria',\r\n 'Taiwan': 'Taiwan',\r\n 'Tajikistan': 'Tajikistan',\r\n 'Tanzania': 'Tanzania',\r\n 'Thailand': 'Thailand',\r\n 'Timor-Leste': 'Timor-Leste',\r\n 'Togo': 'Togo',\r\n 'Tokelau': 'Tokelau',\r\n 'Tonga': 'Tonga',\r\n 'Trinidad & Tobago': 'Trinidad & Tobago',\r\n 'Tunisia': 'Tunisia',\r\n 'Turkey': 'Turkey',\r\n 'Turkmenistan': 'Turkmenistan',\r\n 'Turks & Caicos Islands': 'Turks & Caicos Islands',\r\n 'Tuvalu': 'Tuvalu',\r\n 'Uganda': 'Uganda',\r\n 'Ukraine': 'Ukraine',\r\n 'United Arab Emirates': 'United Arab Emirates',\r\n 'United Kingdom': 'United Kingdom',\r\n 'United States Minor Outlying Islands': 'United States Minor Outlying Islands',\r\n 'Uruguay': 'Uruguay',\r\n 'Uzbekistan': 'Uzbekistan',\r\n 'Vanuatu': 'Vanuatu',\r\n 'Vatican City': 'Vatican City',\r\n 'Venezuela': 'Venezuela',\r\n 'Vietnam': 'Vietnam',\r\n 'Virgin Islands': 'Virgin Islands',\r\n 'Wake Island': 'Wake Island',\r\n 'Wallis & Futuna Islands': 'Wallis & Futuna Islands',\r\n 'Western Sahara': 'Western Sahara',\r\n 'Yemen': 'Yemen',\r\n 'Zambia': 'Zambia',\r\n 'Zimbabwe': 'Zimbabwe'\r\n\r\n }\r\n },\r\n {\r\n title: 'Industry', field: 'Industry', editable: 'onAdd', lookup:\r\n {\r\n 'X-Industry': 'X-Industry',\r\n 'Aerospace and Defense': 'Aerospace and Defense',\r\n 'Automotive': 'Automotive',\r\n 'Banking': 'Banking',\r\n 'Chemicals': 'Chemicals',\r\n 'Consumer Products': 'Consumer Products',\r\n 'Defense and Security': 'Defense and Security',\r\n 'Engineering, Construction and Operations': 'Engineering, Construction and Operations',\r\n 'Healthcare': 'Healthcare',\r\n 'High Tech': 'High Tech',\r\n 'Higher Education and Research': 'Higher Education and Research',\r\n 'Industrial Machinery and Components': 'Industrial Machinery and Components',\r\n 'Insurance': 'Insurance',\r\n 'Life Sciences': 'Life Sciences',\r\n 'Media': 'Media',\r\n 'Mill Products': 'Mill Products',\r\n 'Mining': 'Mining',\r\n 'Oil and Gas': 'Oil and Gas',\r\n 'Professional Services': 'Professional Services',\r\n 'Public Sector': 'Public Sector',\r\n 'Retail': 'Retail',\r\n 'Sports and Entertainment': 'Sports and Entertainment',\r\n 'Telecommunications': 'Telecommunications',\r\n 'Travel and Transportation': 'Travel and Transportation',\r\n 'Utilities': 'Utilities',\r\n 'Wholesale Distribution': 'Wholesale Distribution'\r\n }\r\n },\r\n { title: 'Laggard Value', field: 'Laggard_Value', type: 'numeric', filtering: false },\r\n { title: 'Average Value', field: 'Average_Value', type: 'numeric', filtering: false },\r\n { title: 'Best in Class Value', field: 'Best_Value', type: 'numeric', filtering: false },\r\n { title: 'UOM', field: 'UOM', filtering: false },\r\n { title: 'SourceID', field: 'Source_ID' },\r\n { title: 'Source Description', field: 'Source_Description', editable: 'onAdd' },\r\n { title: 'Source', field: 'Source' },\r\n { title: 'Suggested Popup', field: 'IsSuggestedPopup', lookup: { 'Active': 'Active', 'Deactive': 'Deactive' } },\r\n { title: 'Notes', field: 'Notes', filtering: false },\r\n { title: 'Application', field: 'Application', filtering: false },\r\n { title: 'Effective Date', field: 'Last Updated', editable: 'never' },\r\n { title: 'Active/Deactive', field: 'Active', lookup: { 'Active': 'Active', 'Deactive': 'Deactive' } }\r\n ]\r\n }\r\n this.generateJSON = this.generateJSON.bind(this)\r\n this.loadData = this.loadData.bind(this)\r\n this.loadData()\r\n }\r\n\r\n loadData() {\r\n this.setState({ responseMsg: '', isError: 'No' })\r\n setTimeout(() => {\r\n this.props.getBenchMarkDetails()\r\n .then((response) => {\r\n var benchMarkData = [];\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n response.data.Result[i].Effective_Date = moment(response.data.Result[i].Effective_Date).format('Do MMM YYYY, h:mm:ss a');\r\n var obj = response.data.Result[i];\r\n benchMarkData.push(obj);\r\n }\r\n this.setState({ data: benchMarkData, isLoading: false })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n if (error.Message !== undefined)\r\n this.setState({ responseMsg: error.Message, isError: 'Yes', isLoading: false })\r\n else\r\n this.setState({ responseMsg: error.response.data.Message, isError: 'Yes', isLoading: false })\r\n }\r\n })\r\n }, 1000)\r\n }\r\n\r\n handleonRowAdd(value) {\r\n if ((Object.keys(value).length) === 0) {\r\n this.setState({ responseMsg: 'You can not save empty benchmark.', isError: 'Yes' })\r\n return false;\r\n }\r\n this.setState({ responseMsg: '', isError: 'No', isLoading: true })\r\n var newBenchMark =\r\n {\r\n Suggested_Value_Description: '',\r\n Region_Country: '',\r\n Industry: '',\r\n Laggard_Value: '',\r\n Average_Value: '',\r\n Best_Value: '',\r\n UOM: '',\r\n Source_ID: '',\r\n Source_Description: '',\r\n Source: '',\r\n Notes: '',\r\n Application: '',\r\n UpdatedBy: localStorage.getItem('loggedinUser')\r\n }\r\n\r\n if (value.Suggested_Value_Description !== undefined) {\r\n newBenchMark.Suggested_Value_Description = value.Suggested_Value_Description\r\n }\r\n else {\r\n this.setState({ responseMsg: 'You can not have empty Suggested_Value_Description.', isError: 'Yes', isLoading: false })\r\n return false;\r\n }\r\n if (value.Region_Country !== undefined) {\r\n newBenchMark.Region_Country = value.Region_Country\r\n }\r\n else {\r\n this.setState({ responseMsg: 'You can not have empty Region_Country.', isError: 'Yes', isLoading: false })\r\n return false;\r\n }\r\n if (value.Industry !== undefined) {\r\n newBenchMark.Industry = value.Industry\r\n }\r\n else {\r\n this.setState({ responseMsg: 'You can not have empty Industry.', isError: 'Yes', isLoading: false })\r\n return false;\r\n }\r\n if (value.Laggard_Value !== undefined) {\r\n newBenchMark.Laggard_Value = value.Laggard_Value\r\n }\r\n else {\r\n this.setState({ responseMsg: 'You can not have empty Laggard_Value.', isError: 'Yes', isLoading: false })\r\n return false;\r\n }\r\n if (value.Average_Value !== undefined) {\r\n newBenchMark.Average_Value = value.Average_Value\r\n }\r\n else {\r\n this.setState({ responseMsg: 'You can not have empty Average_Value.', isError: 'Yes', isLoading: false })\r\n return false;\r\n }\r\n if (value.Best_Value !== undefined) {\r\n newBenchMark.Best_Value = value.Best_Value\r\n }\r\n else {\r\n this.setState({ responseMsg: 'You can not have empty Best_Value.', isError: 'Yes', isLoading: false })\r\n return false;\r\n }\r\n if (value.UOM !== undefined) {\r\n newBenchMark.UOM = value.UOM\r\n }\r\n if (value.Source_ID !== undefined) {\r\n newBenchMark.Source_ID = value.Source_ID\r\n }\r\n if (value.Source_Description !== undefined) {\r\n newBenchMark.Source_Description = value.Source_Description\r\n }\r\n if (value.Source !== undefined) {\r\n newBenchMark.Source = value.Source\r\n }\r\n if (value.IsSuggestedPopup !== undefined) {\r\n if (value.IsSuggestedPopup === 'Active')\r\n newBenchMark.IsSuggestedPopup = true;\r\n else\r\n newBenchMark.IsSuggestedPopup = false\r\n }\r\n else {\r\n this.setState({ responseMsg: 'You can not have empty Suggested Popup.', isError: 'Yes', isLoading: false })\r\n return false;\r\n }\r\n if (value.Notes !== undefined) {\r\n newBenchMark.Notes = value.Notes\r\n }\r\n if (value.Application !== undefined) {\r\n newBenchMark.Application = value.Application\r\n }\r\n if (value.Active !== undefined) {\r\n if (value.Active === 'Active')\r\n newBenchMark.Active = true;\r\n else\r\n newBenchMark.Active = false\r\n }\r\n else {\r\n this.setState({ responseMsg: 'You can not have empty Active.', isError: 'Yes', isLoading: false })\r\n return false;\r\n }\r\n if (this.state.isError === 'No') {\r\n this.props.addBenchMark(newBenchMark)\r\n .then((response) => {\r\n this.setState({ responseMsg: 'Successfully added new benchmark!', isError: 'No' })\r\n var benchMarkData = [];\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n response.data.Result[i].Effective_Date = moment(response.data.Result[i].Effective_Date).format('Do MMM YYYY, h:mm:ss a');\r\n var obj = response.data.Result[i];\r\n benchMarkData.push(obj);\r\n }\r\n this.setState({ data: benchMarkData, isLoading: false })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n if (error.Message !== undefined)\r\n this.setState({ responseMsg: error.Message, isError: 'Yes', isLoading: false })\r\n else\r\n this.setState({ responseMsg: error.response.data.Message, isError: 'Yes', isLoading: false })\r\n }\r\n return false;\r\n })\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n }\r\n\r\n handleonRowUpdate(value) {\r\n this.setState({ responseMsg: '', isError: 'No', isLoading: true })\r\n value.UpdatedBy = localStorage.getItem('loggedinUser')\r\n if (value.Active === 'Active')\r\n value.Active = true;\r\n else\r\n value.Active = false\r\n if (value.Laggard_Value !== \"\" && value.Average_Value !== \"\" && value.Best_Value !== \"\") {\r\n this.props.updateBenchMark(value)\r\n .then((response) => {\r\n this.setState({ responseMsg: 'Successfully updated benchmark!', isError: 'No' })\r\n var benchMarkData = [];\r\n for (var i = 0; i < response.data.Result.length; i++) {\r\n response.data.Result[i].Effective_Date = moment(response.data.Result[i].Effective_Date).format('Do MMM YYYY, h:mm:ss a');\r\n var obj = response.data.Result[i];\r\n benchMarkData.push(obj);\r\n }\r\n this.setState({ data: benchMarkData, isLoading: false })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n if (error.Message !== undefined)\r\n this.setState({ responseMsg: error.Message, isError: 'Yes', isLoading: false })\r\n else\r\n this.setState({ responseMsg: error.response.data.Message, isError: 'Yes', isLoading: false })\r\n }\r\n return false;\r\n })\r\n return true;\r\n }\r\n else {\r\n this.setState({ responseMsg: 'You can not have empty Values.', isError: 'Yes', isLoading: false })\r\n return false;\r\n }\r\n }\r\n\r\n generateJSON() {\r\n this.setState({ responseMsg: '', isError: 'No', isLoading: true })\r\n // this.props.generateBenchMarkJSON()\r\n // .then(() => {\r\n // this.setState({ responseMsg: 'Successfully saved data in JSON format!', isError: 'No', isLoading: false })\r\n // }).catch((error) => {\r\n // if (error.stack.includes('Network Error')) {\r\n // this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n // }\r\n // else {\r\n // if (error.Message !== undefined)\r\n // this.setState({ responseMsg: error.Message, isError: 'Yes', isLoading: false })\r\n // else\r\n // this.setState({ responseMsg: error.response.data.Message, isError: 'Yes', isLoading: false })\r\n // }\r\n // })\r\n this.props.generateBenchMarkJSON(\"en\")\r\n .then((response) => {\r\n if (response.status === 200) {\r\n let msg = this.props.content.msgEnglish\r\n this.setState({ responseMsg: msg });\r\n this.props.generateBenchMarkJSON(\"cn\")\r\n .then((response) => {\r\n if (response.status === 200) {\r\n let msg = this.props.content.msgChinese\r\n this.setState({ responseMsg: msg });\r\n this.props.generateBenchMarkJSON(\"jp\")\r\n .then((response) => {\r\n if (response.status === 200) {\r\n let msg = this.props.content.msgJapanese\r\n this.setState({ responseMsg: msg });\r\n this.props.generateBenchMarkJSON(\"pt\")\r\n .then((response) => {\r\n if (response.status === 200) {\r\n let msg = this.props.content.msgPortuguese\r\n this.setState({ responseMsg: msg });\r\n this.props.generateBenchMarkJSON(\"es\")\r\n .then((response) => {\r\n if (response.status === 200) {\r\n let msg = this.props.content.msgSpanish\r\n this.setState({ responseMsg: msg, isLoading: false });\r\n }\r\n }).catch((error) => { this.setState({ responseMsg: this.props.content.msgErrorSpanish, isError: 'Yes', isLoading: false }) })\r\n }\r\n }).catch((error) => { this.setState({ responseMsg: this.props.content.msgErrorPortuguese, isError: 'Yes', isLoading: false }) })\r\n }\r\n }).catch((error) => { this.setState({ responseMsg: this.props.content.msgErrorJapanese, isError: 'Yes', isLoading: false }) })\r\n }\r\n }).catch((error) => { this.setState({ responseMsg: this.props.content.msgErrorChinese, isError: 'Yes', isLoading: false }) })\r\n }\r\n }).catch((error) => { this.setState({ responseMsg: this.props.content.msgErrorEnglish, isError: 'Yes', isLoading: false }) })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n {\r\n // this.props.nextButtonLabel && this.props.nextButtonLabel != \"\" ?\r\n // (\r\n // \r\n \r\n \r\n {\r\n this.props.tabs.map((tab, i) => {\r\n var disabledTab = _state.isPopUpTabLoading && activeTab === tab.id ? false : _state.isPopUpTabLoading;\r\n return ( \r\n {\r\n this.props.tabs.map(tab => (\r\n activeTab === tab.id\r\n ? {tab.component} \r\n : null\r\n ))\r\n }\r\n
\r\n \r\n //
\r\n // ) : null\r\n }\r\n \r\n //
\r\n // \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.props.tabMessage.toggleTabMessage}\r\n
\r\n \r\n
\r\n \r\n this.continueNavigation(\"alert\")}\r\n color /> \r\n this.hideModal(\"alert\")}\r\n color /> \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.props.tabMessage.toggleKPITabMessage}\r\n
\r\n \r\n
\r\n \r\n this.continueKPINavigation(\"KPI\",false)}\r\n color />\r\n
\r\n \r\n this.hideModal(\"KPI\")}\r\n color />\r\n
\r\n \r\n this.continueKPINavigation(\"KPI\",true)}\r\n color />\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.props.tabMessage.toggleVSMessage}\r\n
\r\n\t\t\t\t\t\t\t\r\n
\r\n \r\n this.continueValueStoryNavigation(\"VS\")}\r\n color />\r\n
\r\n \r\n this.continueNavigation(\"VS\")}\r\n color />\r\n
\r\n\t\t\t\t\t\t\t\t\r\n this.hideModal(\"VS\")}\r\n color />\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.props.tabMessage.toggleVSMessage}\r\n
\r\n\t\t\t\t\t\t\t\r\n
\r\n \r\n this.continueSpendParameterNavigation(\"SpendParameter\")}\r\n color />\r\n
\r\n \r\n this.continueNavigation(\"SpendParameter\")}\r\n color />\r\n
\r\n\t\t\t\t\t\t\t\t\r\n this.hideModal(\"SpendParameter\")}\r\n color />\r\n
\r\n \r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content.menu.adminMenuItems[0].fileUploadManager\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n benchMarkSuccess: (bool) => dispatch(benchMarkSuccess(bool)),\r\n benchMarkFailure: (error) => dispatch(benchMarkFailure(error)),\r\n getBenchMarkDetails: () => dispatch(getBenchMarkDetails()),\r\n addBenchMark: (value) => dispatch(addBenchMark(value)),\r\n updateBenchMark: (value) => dispatch(updateBenchMark(value)),\r\n deActiveBenchMark: (value) => dispatch(deActiveBenchMark(value)),\r\n generateBenchMarkJSON: (lang) => dispatch(generateBenchMarkJSON(lang)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(BusinessCaseBenchmark)//Component\r\n","import axios from 'axios'\r\nimport { ROOT_URL } from 'Constants'\r\nimport {\r\n getDetailedFileLoading,\r\n getDetailedFileSuccess,\r\n getDetailedFileFileRecordsInsertedLoading,\r\n getDetailedFileRecordsInsertedSuccess,\r\n getDetailedFileFileRecordsInsertedFailure\r\n} from './spendActions'\r\n\r\nconst getSpendKPIBenchmarkAPI = `${ROOT_URL}/KPI/GetSpendKPIBenchmark`\r\nconst getKPISetUpDataAPI = `${ROOT_URL}/KPI/GetKPISetUpData`\r\nconst updateKPISetUpDataAPI = `${ROOT_URL}/KPI/updateKPISetUpTabData`\r\nconst getKPIDashBoardDataAPI = `${ROOT_URL}/KPI/GetKPIDashBoardData`\r\nconst getKPIDashBoardDataAPIV2 = `${ROOT_URL}/KPI/GetKPIDashBoardDataV2`\r\nconst getKPIDashBoardFinalDataAPIV2 = `${ROOT_URL}/KPI/GetKPIDashBoardFinalDataV2`\r\nconst updateKPIDashBoardDataAPI = `${ROOT_URL}/KPI/updateKPIDashBoardTabData`\r\nconst updateKPIDashBoardDataAPIV2 = `${ROOT_URL}/KPI/updateKPIDashBoardTabDataV2`\r\nconst updateEnablementKPIDashBoard = `${ROOT_URL}/KPI/updateEnablementKPIDashBoard`\r\nconst saveIntermediateEnablementKPIDashBoardAPI = `${ROOT_URL}/KPI/SaveIntermediateEnablementKPIDashBoard`\r\nconst deleteIntermediateEnablementKPIDashBoardAPI = `${ROOT_URL}/KPI/DeleteIntermediateEnablementKPIDashBoard`\r\nconst getKPIChartDataAPI = `${ROOT_URL}/KPI/GetKPIChartData`\r\nconst getKPIChartDataAPIV2 = `${ROOT_URL}/KPI/GetKPIChartDataV2`\r\nconst getUpdateEnablementKPIModelAPI = `${ROOT_URL}/KPI/GetUpdateEnablementKPIModel`\r\nconst getUpdateKpiGoliveProjectStartDateAPI = `${ROOT_URL}/KPI/GetUpdateKpiGoliveProjectStartDate`\r\nconst getManualKPIDashBoardDataAPI = `${ROOT_URL}/KPI/GetManualKPIDashBoardData`\r\nconst GetManualKPIDashBoardDataPercentCalcAPI = `${ROOT_URL}/KPI/GetManualKPIDashBoardDataPercentCalc`\r\nconst getManualKPIResourceType = `${ROOT_URL}/KPI/GetManualKPIResourceType`\r\nconst updateEnablementStrategyWave = `${ROOT_URL}/KPI/UpdateEnablementStrategyWave`\r\n//const GetManualKPIManualTargetFetchAPI = `${ROOT_URL}/KPI/GetManualKPIManualTargetFetch`\r\n\r\n\r\nexport function trackKpiBenchMarkFilters(obj) {\r\n return {\r\n type: 'TRACK_KPI_BENCHMARK_FILTERS',\r\n payload: obj\r\n };\r\n }\r\n\r\nexport function getSpendKPIBenchmark(param) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { FilterValue: param },\r\n url: getSpendKPIBenchmarkAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}` \r\n } \r\n })\r\n }\r\n }\r\n \r\n export function getKPISetUpLoadData(DMCId, VSId, userEmail) {\r\n return (dispatch) => {\r\n dispatch(getDetailedFileLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMC_ID: DMCId, VS_ID: VSId, USER_EMAIL: userEmail },\r\n url: getKPISetUpDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getDetailedFileSuccess(false))\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n }\r\n \r\n export function updateKPISetUpTabData(records) {\r\n return (dispatch) => {\r\n dispatch(getDetailedFileFileRecordsInsertedLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: updateKPISetUpDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getDetailedFileFileRecordsInsertedLoading(false))\r\n dispatch(getDetailedFileRecordsInsertedSuccess(true))\r\n return response\r\n }).catch((error) => {\r\n dispatch(getDetailedFileFileRecordsInsertedFailure(error))\r\n return error\r\n })\r\n }\r\n }\r\n \r\n export function getKPIDashBoardLoadData(DMCId, VSId, userEmail, metric, type) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMC_ID: DMCId, VS_ID: VSId, USER_EMAIL: userEmail, BENCHMARK_METRICS: metric, BENCHMARK_TYPE: type },\r\n url: getKPIDashBoardDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n }\r\n\r\n export function getKPIDashBoardLoadDataV2(DMCId, VSId, userEmail) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMC_ID: DMCId, VS_ID: VSId, USER_EMAIL: userEmail },\r\n url: getKPIDashBoardDataAPIV2,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n }\r\n\r\n export function getKPIDashBoardLoadFinalDataV2(DMCId, VSId, userEmail) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMC_ID: DMCId, VS_ID: VSId, USER_EMAIL: userEmail },\r\n url: getKPIDashBoardFinalDataAPIV2,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n } \r\n\r\n export function getManualKPIDashBoardLoadData(DMCId, VSId, userEmail, kpi_strategy_model, model) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMC_ID: DMCId, VS_ID: VSId, USER_EMAIL: userEmail,KPI_STRATEGY_MODEL:kpi_strategy_model,MODEL:model },\r\n url: getManualKPIDashBoardDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n } \r\n\r\n export function GetManualKPIDashBoardLoadDataPercentCalc(DMCId, VSId, userEmail) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMC_ID: DMCId, VS_ID: VSId, USER_EMAIL: userEmail},\r\n url: GetManualKPIDashBoardDataPercentCalcAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n } \r\n\r\n export function getManualKPIResourceTypeLoadData(DMCId, VSId, userEmail,model) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMC_ID: DMCId, VS_ID: VSId, USER_EMAIL: userEmail,MODEL:model },\r\n url: getManualKPIResourceType,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n } \r\n \r\n\r\n export function getUpdateEnablementKPIModel(DMCId, VSId, userEmail, ReadWriteFlag, EnablementKPIModel) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMC_ID: DMCId, VS_ID: VSId, USER_EMAIL: userEmail, READ_WRITE_FLAG: ReadWriteFlag, KPI_MODEL: EnablementKPIModel },\r\n url: getUpdateEnablementKPIModelAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n }\r\n\r\n export function getUpdateKpiGoliveProjectStartDate(DMCId, VSId, userEmail, ReadWriteFlag, goLiveDate, projectStartDate) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMC_ID: DMCId, VS_ID: VSId, USER_EMAIL: userEmail, READ_WRITE_FLAG: ReadWriteFlag, GO_LIVE_DATE: goLiveDate, PROJECT_START_DATE: projectStartDate },\r\n url: getUpdateKpiGoliveProjectStartDateAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n } \r\n\r\n // export function getManualKPIManualTargetFetch(DMCId, VSId, userEmail, model, kpiModel) {\r\n // return (dispatch) => {\r\n // let token = localStorage.getItem('jwtToken')\r\n // return axios({\r\n // method: 'post',\r\n // data: { DMC_ID: DMCId, VS_ID: VSId, USER_EMAIL: userEmail, MODEL: model, KPI_MODEL: kpiModel },\r\n // url: GetManualKPIManualTargetFetchAPI,\r\n // headers: {\r\n // 'Authorization': `AribaBearer ${token}`\r\n // }\r\n // }).then((response) => {\r\n // return response\r\n // }).catch((error) => {\r\n // return error\r\n // })\r\n // }\r\n //} \r\n \r\n export function updateKPIDashBoardTabData(records) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: updateKPIDashBoardDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n }\r\n\r\n export function updateKPIDashBoardTabDataV2(records) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: updateKPIDashBoardDataAPIV2,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n }\r\n\r\n export function updateEnablementKPIDashBoardTabData(records) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: updateEnablementKPIDashBoard,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n }\r\n\r\n export function saveIntermediateEnablementKPIDashBoardTabData(records) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: saveIntermediateEnablementKPIDashBoardAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n } \r\n\r\n export function deleteIntermediateEnablementKPIDashBoardTabData(DMCId, VSId, userEmail) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMC_ID: DMCId, VS_ID: VSId, USER_EMAIL: userEmail},\r\n url: deleteIntermediateEnablementKPIDashBoardAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n } \r\n\r\n export function updateEnablementStrategyWaveData(DMCId, VSId, userEmail) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMC_ID: DMCId, VS_ID: VSId, USER_EMAIL: userEmail},\r\n url: updateEnablementStrategyWave,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n }\r\n\r\n \r\n \r\n export function getKPIChartData(DMCId, VSId, userEmail, metric, type, metricType) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMC_ID: DMCId, VS_ID: VSId, USER_EMAIL: userEmail, BENCHMARK_METRICS: metric, BENCHMARK_TYPE: type, METRIC_TYPE: metricType },\r\n url: getKPIChartDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n }\r\n \r\n\r\n export function getKPIChartDataV2(DMCId, VSId, userEmail, metricType) {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMC_ID: DMCId, VS_ID: VSId, USER_EMAIL: userEmail, METRIC_TYPE: metricType },\r\n url: getKPIChartDataAPIV2,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n }","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { path } from 'Constants'\r\nimport Select from 'react-select'\r\nimport {\r\n getSpendKPIBenchmark\r\n} from 'actions/kpiActions'\r\n\r\nclass SpendKPIBenchmark extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n dropDownValues: [\r\n { value: \"All\", label: \"All\" },\r\n { value: \"Financial Services\", label: \"Financial Services\" },\r\n { value: \"Consumer\", label: \"Consumer\" },\r\n { value: \"Discrete Manufacturing\", label: \"Discrete Manufacturing\" },\r\n { value: \"Energy and Natural Resources\", label: \"Energy and Natural Resources\" },\r\n { value: \"Services\", label: \"Services\" },\r\n { value: \"Public Services\", label: \"Public Services\" },\r\n { value: \"EMEA\", label: \"EMEA\" },\r\n { value: \"LAC\", label: \"LAC\" },\r\n { value: \"APJ\", label: \"APJ\" },\r\n { value: \"NA\", label: \"NA\" }\r\n ],\r\n selectedValue: 'All',\r\n spendKPIParameters: [],\r\n isLoading: false,\r\n respnseMessage: '',\r\n isError: false\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n }\r\n\r\n loadData() {\r\n this.setState({ isLoading: true, respnseMessage: '', isError: false });\r\n this.props.getSpendKPIBenchmark(this.state.selectedValue).then((response) => {\r\n if (response.status === 200) {\r\n this.setState({ spendKPIParameters: response.data.Result, isLoading: false, respnseMessage: '', isError: false });\r\n }\r\n else {\r\n this.setState({ isLoading: false, respnseMessage: this.props.content.errorMessage, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ isLoading: false, respnseMessage: this.props.content.errorMessage, isError: true });\r\n })\r\n }\r\n\r\n handleChange(data) {\r\n let value = data.value;\r\n this.setState({ selectedValue: value },\r\n () => {\r\n this.loadData()\r\n })\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n }\r\n\r\n render() {\r\n var KPI_Benchmark = this.state.spendKPIParameters.map(function (parameter) {\r\n return (\r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n
\r\n this.generateJSON()\r\n }\r\n ]}\r\n options={{\r\n exportButton: true,\r\n exportAllData: true,\r\n filtering: true,\r\n headerStyle: {\r\n backgroundColor: '#008fd3',\r\n color: '#FFF'\r\n }\r\n }}\r\n editable={{\r\n onRowAdd: newData =>\r\n new Promise((resolve, reject) => {\r\n setTimeout(() => {\r\n {\r\n const flag = this.handleonRowAdd(newData);\r\n if (flag === false) {\r\n reject()\r\n }\r\n else {\r\n resolve()\r\n }\r\n }\r\n resolve()\r\n }, 100)\r\n }),\r\n onRowUpdate: (newData) =>\r\n new Promise((resolve, reject) => {\r\n setTimeout(() => {\r\n {\r\n const flag = this.handleonRowUpdate(newData);\r\n if (flag === false) {\r\n reject()\r\n }\r\n else {\r\n resolve()\r\n }\r\n }\r\n resolve()\r\n }, 100)\r\n })\r\n }}\r\n />\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nclass TableRows extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n };\r\n }\r\n\r\n render() {\r\n var bindValues = this.props.KPI_Parameter;\r\n return (\r\n \r\n
\r\n \r\n
\r\n {/* \r\n option.value === this.state.selectedValue\r\n )}\r\n onChange={value => this.handleChange(value)}\r\n options={this.state.dropDownValues}\r\n isSearchable={false}\r\n //isDisabled={this.state.isLoading}\r\n noOptionsMessage={() => null}\r\n />\r\n
\r\n Benchmark Metrics
\r\n \r\n
*/}\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n | {'Metric Id'} | \r\n{'KPI Label'} | \r\n{'Source'} | \r\n{'Data Source'} | \r\n{'Process Area'} | \r\n{'Top 25%'} | \r\n{'Average'} | \r\n{'Bottom 25%'} | \r\n
|---|
\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(BenchmarkContainer); ","import React from 'react'\r\nimport { Link } from 'react-router-dom'\r\nimport PropTypes from 'prop-types'\r\nimport { connect } from 'react-redux'\r\n\r\nimport {\r\n updateIncomeStatementAndBalanceSheet\r\n} from 'BusinessValue/BusinessValueCalculations'\r\n// UI\r\nimport AddIcon from 'UI/AddIcon'\r\n\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\nimport classnames from 'classnames'\r\nimport {\r\n toggleValueDriver,\r\n toggleSubLever,\r\n toggleSKU\r\n} from 'actions/valueDriverActions'\r\n\r\nimport {\r\n\tvalueStoryCurrentMenu,\r\n\tshowValueStoryMenu\r\n}\r\n from 'actions/userActions'\r\n \r\nimport { store } from 'index'\r\n// Settings\r\nimport { validators, currencies, mappingSKUsPriorityAndSubLever, routes } from 'Constants'\r\n// Utils\r\nimport {\r\n getSubLeverIdObject, sortObjectArray\r\n} from 'utils/Utils'\r\nimport Button from 'UI/Button'\r\nimport { dispatchToggleSKU } from 'components/SKU/SolutionChange'\r\n\r\nclass SkuContainer extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n _selectedSkulist: [],\r\n _SelectAll: false,\r\n vlmAlertDiv: false\r\n }\r\n\r\n this.dispatchToggleSKU_local = this.dispatchToggleSKU_local.bind(this)\r\n this.updateSelectAllState = this.updateSelectAllState.bind(this)\r\n this.select_deSelect_AllSKU = this.select_deSelect_AllSKU.bind(this)\r\n this.vlmAlertToggle = this.vlmAlertToggle.bind(this)\r\n }\r\n \r\n componentWillMount() {\r\n\t\twindow.scrollTo({top: 0, behavior: 'smooth'})\r\n\t}\r\n\r\n componentDidMount() {\r\n this.props.valueStoryCurrentMenu('Solutions');\r\n this.props.showValueStoryMenu(true);\r\n \r\n var toAvoidDuplicate = [];\r\n let _instance = this;\r\n this.props.userData.AreaOfInterest.forEach(element => {\r\n element.AOIValueDrivers.forEach(element_ValueDriver => {\r\n\r\n if (element_ValueDriver.SKUId !== null && element_ValueDriver.SKUId !== undefined) {\r\n var splittedSKUList = element_ValueDriver.SKUId.toString().split(',');\r\n for (let index = 0; index < splittedSKUList.length; index++) {\r\n const element = splittedSKUList[index];\r\n if (element != null && toAvoidDuplicate.indexOf(element.toString()) === -1) {\r\n //console.log(`element aaded into state list`, element.toString(),_instance.state._selectedSkulist.indexOf(element.toString()) );\r\n\r\n toAvoidDuplicate.push(element.toString());\r\n this.setState(state => {\r\n const _selectedSkulist = [...state._selectedSkulist, element.toString()];\r\n return {\r\n _selectedSkulist\r\n };\r\n });\r\n }\r\n }\r\n }\r\n });\r\n });\r\n\r\n setTimeout(() => {\r\n this.updateSelectAllState(true);\r\n }, 10);\r\n }\r\n\r\n updateSelectAllState = (bool) => {\r\n if (this.state._selectedSkulist.length === (this.props.skus.skuList.length - 1) && bool) {\r\n this.setState({ _SelectAll: true });\r\n }\r\n else {\r\n this.setState({ _SelectAll: false });\r\n }\r\n }\r\n\r\n select_deSelect_AllSKU = (bool) => {\r\n if (bool) {\r\n var all_SKUs = this.props.skus.skuList.filter(item => item.id > 0);\r\n all_SKUs.forEach(element => {\r\n this.dispatchToggleSKU_local(element.id, bool);\r\n });\r\n }\r\n else {\r\n this.state._selectedSkulist.forEach(element => {\r\n this.dispatchToggleSKU_local(element, bool);\r\n });\r\n }\r\n this.setState({ _SelectAll: bool });\r\n }\r\n\r\n dispatchToggleSKU_local = (id, bool) => {\r\n\r\n if (id === \"-1\") // Condition for the Select All\r\n {\r\n this.select_deSelect_AllSKU(bool);\r\n }\r\n else {\r\n if (bool) {\r\n this.setState(state => {\r\n if (state._selectedSkulist.indexOf(id) < 0) {\r\n const _selectedSkulist = [...state._selectedSkulist, id];\r\n return {\r\n _selectedSkulist\r\n };\r\n }\r\n });\r\n }\r\n else {\r\n this.setState(state => {\r\n const _selectedSkulist = state._selectedSkulist.filter((item, j) => id !== item);\r\n return {\r\n _selectedSkulist,\r\n };\r\n });\r\n }\r\n dispatchToggleSKU(id, bool);\r\n\r\n setTimeout(() => {\r\n this.updateSelectAllState(bool);\r\n }, 100);\r\n }\r\n\r\n }\r\n\r\n vlmAlertToggle() {\r\n this.setState(prevState => {return {vlmAlertDiv: !prevState.vlmAlertDiv}})\r\n }\r\n\r\n render() {\r\n var withOutSort_SKU = this.props.skus.skuList;\r\n var _localSkus = withOutSort_SKU.sort(sortObjectArray('name', 'asc'));\r\n var _localSkus_new = _localSkus.sort(sortObjectArray('sortOrder', 'asc'));\r\n const _instance = this;\r\n var _selectedSkulist_fromState = this.state._selectedSkulist;\r\n var Skuss =\r\n Object.keys(_localSkus_new).map(function (sku) {\r\n var _isActive = _selectedSkulist_fromState.indexOf(_localSkus_new[sku].id) >= 0\r\n if (_localSkus_new[sku].id === \"-1\") {\r\n _isActive = _instance.state._SelectAll\r\n return (\r\n \r\n
\r\n \r\n {
\r\n \r\n
\r\n )\r\n }\r\n return (\r\n {BreakLine(_localSkus_new[sku].name)}
\r\n \r\n
\r\n )\r\n });\r\n\r\n return (\r\n {BreakLine(_localSkus_new[sku].name)}
\r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n skus: state.content.SKUs,\r\n content: state.content,\r\n userData: state.valueStory,\r\n ui: state.content.ui,\r\n discoveryContent: state.content.discovery,\r\n }\r\n}\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n toggleSKU: (id, bool) => dispatch(toggleSKU(id, bool)),\r\n\t\tvalueStoryCurrentMenu: (menuItem) => dispatch(valueStoryCurrentMenu(menuItem)),\r\n showValueStoryMenu: (menuItem) => dispatch(showValueStoryMenu(menuItem)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SkuContainer)\r\n\r\n","//\r\n//\r\n//\r\n//\r\n// <- This code is no longer used ->\r\n//\r\n//\r\n//\r\n//\r\nimport React, { Component, PureComponent } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport Modal from 'reboron/OutlineModal'\r\nimport TreeView from './TreeView'\r\nimport Popup from \"reactjs-popup\";\r\nimport ScrollArea from 'react-scrollbar'\r\n\r\nimport Button from 'UI/Button';\r\n\r\nimport {\r\n suggestedValueModalStyle,\r\n suggestedValueContentStyle,\r\n backdropStyle\r\n} from 'Constants'\r\nimport {\r\n fetchCapIqResults,\r\n capIqSearchLoading,\r\n capIqSearchSuccess,\r\n capIqSearchFailure,\r\n searchResult,\r\n searchText,\r\n searchData,\r\n treeResult\r\n}\r\n from 'actions/searchActions'\r\n import { formatThousands} from 'utils/Utils'\r\nimport { path } from 'Constants'\r\n\r\nconst hStyle = {\r\n padding: '15px 30px',\r\n fontWeight: 'bold'\r\n};\r\n\r\nclass SearchResults extends PureComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n searchResults: props.search.searchResult, //assign the data recieved from props \r\n companyDetails: [],\r\n companyObj: [],\r\n companyName: [],\r\n companyNameCopy: [],\r\n results: [],\r\n company: props.result,\r\n selected: false,\r\n index: -1,\r\n isCAPIQ: false,\r\n capiqData: [],\r\n //These flags maintain the visibility of respective fields based on lowest level Id associated\r\n peId_flag: false,\r\n bpId_flag: false,\r\n treeData: [],\r\n open: false,\r\n flag: '',\r\n cursor: true\r\n }\r\n this.CompanyClicked = this.CompanyClicked.bind(this)\r\n this.loadCompanyData = this.loadCompanyData.bind(this)\r\n this.loadSearchData = this.loadSearchData.bind(this)\r\n this.createSearchResultsArray = this.createSearchResultsArray.bind(this)\r\n this.createCompanyProfileArray = this.createCompanyProfileArray.bind(this)\r\n this.fetchDataForModal = this.fetchDataForModal.bind(this)\r\n this.radioButtonClicked = this.radioButtonClicked.bind(this)\r\n this.closePopUp = this.closePopUp.bind(this)\r\n this.calculateRevenue = this.calculateRevenue.bind(this)\r\n this.formatEmployee = this.formatEmployee.bind(this)\r\n }\r\n\r\n componentWillMount() {\r\n this.createSearchResultsArray();\r\n }\r\n\r\n closePopUp() {\r\n this.setState({ open: !this.state.open }, this.loadCompanyData)\r\n }\r\n //before show modal call this to create array with treeview data\r\n fetchDataForModal(e) {\r\n let globalId = e.currentTarget.attributes.value.nodeValue;\r\n let data = this.props.firstSearchResult;\r\n let results = data.filter(item => item.SAP_TOP_VIEW == globalId)\r\n const uniqueObj = [];\r\n const map = new Map();\r\n for (const item of results) {\r\n if (!map.has(item.PE_ID)) {\r\n map.set(item.PE_ID, true); // set any value to Map\r\n uniqueObj.push({ item });\r\n }\r\n }\r\n uniqueObj.forEach(data => {\r\n data.flag = false;\r\n })\r\n this.props.treeResult(uniqueObj)\r\n this.setState({ treeData: uniqueObj })\r\n }\r\n\r\n showModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n this.refs[action].hide()\r\n }\r\n\r\n //Render the component if the store value changes for searchResults\r\n componentWillReceiveProps(NextProps) {\r\n var emptyArr = [];\r\n if (NextProps.search.searchResult != this.state.searchResults) {\r\n this.setState({ searchResults: NextProps.search.searchResult, companyName: emptyArr, companyNameCopy: emptyArr }, this.createSearchResultsArray)\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps){\r\n if(prevProps.content != this.props.content){\r\n this.loadCompanyData()\r\n }\r\n }\r\n //This creates the array of objects for search results in specific format\r\n createSearchResultsArray() {\r\n //create an array with company names coming from company source\r\n var companyName = [];\r\n this.state.searchResults.map((data, index) => {\r\n\r\n //check if the data is coming from CAPIQ table\r\n if (data.item == undefined || data.item == null) {\r\n companyName.push({ 'name': data.COMPANY_NAME, 'id': data.COMPANY_ID, 'flag': 'CAPIQ', 'data': data })\r\n this.setState({ companyName: companyName, companyNameCopy: companyName, flag: companyName[0].flag, index: companyName[0].id, company: companyName[0].name, selected: true, isCAPIQ: true })\r\n } else {\r\n if (data.item.COMPANY_SOURCE == 'SAP_TOP_VIEW') {\r\n companyName.push({ 'name': data.item.SAP_TOP_VIEW_NAME, 'id': data.item.SAP_TOP_VIEW, 'flag': 'SAP_TOP_VIEW', 'data': data.item })\r\n } else if (data.item.COMPANY_SOURCE == 'PE') {\r\n companyName.push({ 'name': data.item.PE_NAME, 'id': data.item.SAP_TOP_VIEW, 'flag': 'PE', 'data': data.item })\r\n } else if (data.item.COMPANY_SOURCE == 'BP') {\r\n companyName.push({ 'name': data.item.ORG_NAME, 'id': data.item.SAP_TOP_VIEW, 'flag': 'BP', 'data': data.item })\r\n }\r\n this.setState({ companyName: companyName, companyNameCopy: companyName, flag: companyName[0].flag, index: companyName[0].id, company: companyName[0].name, selected: true, isCAPIQ: false })\r\n }\r\n })\r\n\r\n setTimeout(() => {\r\n\t\t\tthis.loadSearchData()\r\n\t\t}, 800)\r\n }\r\n\r\n //This creates the jsx for search results section\r\n loadSearchData() {\r\n var result = (\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.props.content.SKUs.title}
\r\n {this.props.discoveryContent.vlmAlertHeader}
\r\n {\r\n {this.state.vlmAlertDiv ? {this.props.discoveryContent.vlmAlertDesc1}
{this.props.discoveryContent.vlmAlertDesc2}{this.props.discoveryContent.vlmAlertDesc3}. : ''}\r\n
}\r\n {this.props.discoveryContent.vlmAlertDesc2}{this.props.discoveryContent.vlmAlertDesc3}. : ''}\r\n
Specify your solutions of interest
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n If you completed the areas of interest section, solutions will automatically be turned on that could help you address your high and top business priorities.
\r\nIf you do not yet know your solution scope, click select all which will turn on all the value drivers related to our solutions.
\r\nOnce you have finalized your selections, click next to see the value levers that are aligned to your selected solutions, and make updates to what is in scope for your program.
\r\n\r\n
\r\n \r\n {Skuss}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {data.name}
\r\n Company Name: {data.name}
*/}\r\n\r\n
\r\n \r\n
\r\n {this.props.content.companyProfile.Company_Name}
\r\n {data.name}
\r\n \r\n
\r\n {this.props.content.companyProfile.Location}
\r\n {data.location}
\r\n \r\n
\r\n {this.props.content.companyProfile.SAP_Industry}
\r\n {data.sapIndustry}
\r\n \r\n
\r\n {this.props.content.companyProfile.Revenue}
\r\n {data.revenue}
\r\n \r\n
\r\n {this.props.content.companyProfile.CapIQ_ID}
\r\n \r\n
\r\n \r\n
\r\n \r\n {data.capId}\r\n
\r\n \r\n
\r\n {this.props.content.companyProfile.Global_ID}
\r\n {data.globalId}
\r\n {/* \r\n ![](\"/images/arrow_inactive.svg\")
this.showModal('abc')} />\r\n
*/}\r\n this.showModal('abc')} />\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {this.props.content.companyProfile.PE_ID}
\r\n {data.peId}
\r\n \r\n
\r\n {this.props.content.companyProfile.BP_ID}
\r\n {data.bpId}
\r\n \r\n
\r\n \r\n
\r\n {this.props.content.companyProfile.Country}
\r\n {data.country}
\r\n \r\n
\r\n {this.props.content.companyProfile.Website}
\r\n \r\n {data.website}\r\n
\r\n \r\n
\r\n {this.props.content.companyProfile.Industry_Sector}
\r\n {data.industry_sector}
\r\n \r\n
\r\n {/* {this.props.content.companyProfile.Industry_Group}
\r\n {data.industry_group}
\r\n \r\n
*/}\r\n Industry
\r\n IT Consulting and Other Services
\r\n \r\n
\r\n {this.props.content.companyProfile.Employees}
\r\n {data.employees}
\r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content,\r\n result: state.searchText,\r\n search: state.searchResultData,\r\n firstSearchResult: state.searchData\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchCapIqResults: (value) => dispatch(fetchCapIqResults(value)),\r\n capIqSearchLoading: (bool) => dispatch(capIqSearchLoading(bool)),\r\n capIqSearchSuccess: (msg) => dispatch(capIqSearchSuccess(msg)),\r\n capIqSearchFailure: (error) => dispatch(capIqSearchFailure(error)),\r\n searchResult: (result) => dispatch(searchResult(result)),\r\n searchText: (text) => dispatch(searchText(text)),\r\n searchData: (data) => dispatch(searchData(data)),\r\n treeResult: (data) => dispatch(treeResult(data))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SearchResults)\r\n","//\r\n//\r\n//\r\n//\r\n// <- This code is no longer used ->\r\n//\r\n//\r\n//\r\n//\r\nimport React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport SearchField from \"react-search-field\";\r\nimport Autosuggest from 'react-autosuggest';\r\nimport { GoSearch } from \"react-icons/lib/go\";\r\nimport { searchResult } from '../../actions/searchActions'\r\n\r\n// Imagine you have a list of languages that you'd like to autosuggest.\r\nconst languages = [\r\n {\r\n name: 'Accenture 1',\r\n desc: 'Technology Consulting'\r\n },\r\n {\r\n name: 'Accenture 2',\r\n desc: 'Technology Consulting'\r\n },\r\n {\r\n name: 'Accenture 3',\r\n desc: 'Technology Consulting'\r\n },\r\n {\r\n name: 'Accenture 4',\r\n desc: 'Technology Consulting'\r\n },\r\n {\r\n name: 'Accenture 5',\r\n desc: 'Technology Consulting'\r\n },\r\n {\r\n name: 'C',\r\n year: 1972\r\n },\r\n {\r\n name: 'C++',\r\n year: 2012\r\n },\r\n {\r\n name: 'C#',\r\n year: 2017\r\n }\r\n];\r\n\r\n// Teach Autosuggest how to calculate suggestions for any given input value.\r\nconst getSuggestions = value => {\r\n const inputValue = value.trim().toLowerCase();\r\n const inputLength = inputValue.length;\r\n\r\n return inputLength === 0 ? [] : languages.filter(lang =>\r\n lang.name.toLowerCase().slice(0, inputLength) === inputValue\r\n );\r\n};\r\n\r\n// When suggestion is clicked, Autosuggest needs to populate the input\r\n// based on the clicked suggestion. Teach Autosuggest how to calculate the\r\n// input value for every given suggestion.\r\nconst getSuggestionValue = suggestion => suggestion.name;\r\n\r\n// Use your imagination to render suggestions.\r\nconst renderSuggestion = suggestion => (\r\n \r\n
\r\n \r\n {this.props.content.search.searchResult}\r\n
\r\n \r\n {this.props.content.search.companyDeatils}\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n - \r\n {this.state.results}\r\n
\r\n
\r\n \r\n {/* */}\r\n {this.state.companyDetails}\r\n {/* */}\r\n
\r\n \r\n {suggestion.name}\r\n
\r\n);\r\n\r\nclass AutoSearch extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n // Autosuggest is a controlled component.\r\n // This means that you need to provide an input value\r\n // and an onChange handler that updates this value (see below).\r\n // Suggestions also need to be provided to the Autosuggest,\r\n // and they are initially empty because the Autosuggest is closed.\r\n this.state = {\r\n value: props.value,\r\n suggestions: []\r\n };\r\n\r\n this.onSuggestionSelected = this.onSuggestionSelected.bind(this)\r\n }\r\n\r\n onChange = (event, { newValue }) => {\r\n this.setState({\r\n value: newValue\r\n });\r\n };\r\n\r\n // Autosuggest will call this function every time you need to update suggestions.\r\n // You already implemented this logic above, so just use it.\r\n onSuggestionsFetchRequested = ({ value }) => {\r\n this.setState({\r\n suggestions: getSuggestions(value)\r\n });\r\n };\r\n\r\n // Autosuggest will call this function every time you need to clear suggestions.\r\n onSuggestionsClearRequested = () => {\r\n this.setState({\r\n suggestions: []\r\n });\r\n };\r\n\r\n onSuggestionSelected(event) {\r\n this.props.searchResult(event.target.textContent)\r\n }\r\n\r\n render() {\r\n const { value, suggestions } = this.state;\r\n\r\n // Autosuggest will pass through all these props to the input.\r\n const inputProps = {\r\n placeholder: 'Search by Company',\r\n value,\r\n onChange: this.onChange\r\n };\r\n\r\n // Finally, render it!\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n searchResult: (result) => dispatch(searchResult(result))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(AutoSearch)\r\n\r\n","//\r\n//\r\n//\r\n//\r\n// <- This code is no longer used ->\r\n//\r\n//\r\n//\r\n//\r\nimport React, { PureComponent } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Link } from 'react-router-dom'\r\nimport Button from 'UI/Button'\r\nimport ScrollArea from 'react-scrollbar'\r\nimport SearchField from \"react-search-field\";\r\nimport { GoSearch } from \"react-icons/lib/go\";\r\nimport SearchResults from './SearchResults'\r\nimport ValueStoryList from './ValueStories'\r\nimport AutoSearch from './AutoSearch'\r\nimport { path } from 'Constants'\r\nimport { removeMask } from 'utils/Utils'\r\nimport { modalStyle, modalContentStyle, routes, validators } from 'Constants'\r\nimport { valueStoryFetchDataSuccess } from 'actions/fetchValueStory'\r\nimport {\r\n fetchValueStories,\r\n fetchValueStoriesLoading,\r\n fetchValueStoriesSuccess,\r\n fetchValueStoriesFailure\r\n}\r\n from 'actions/userActions'\r\nimport {\r\n fetchCrmResults,\r\n crmSearchLoading,\r\n crmSearchSuccess,\r\n crmSearchFailure,\r\n searchResult,\r\n searchText,\r\n searchData,\r\n fetchCapIqSearchResults,\r\n capIqSearchSuccess,\r\n capIqSearchFailure,\r\n companyProfileData,\r\n isNewValueStory\r\n}\r\n from 'actions/searchActions'\r\n\r\nfunction compare(a, b) {\r\n // Use toUpperCase() to ignore character casing\r\n const companyA = a.item.SAP_TOP_VIEW_NAME.toUpperCase();\r\n const companyB = b.item.SAP_TOP_VIEW_NAME.toUpperCase();\r\n\r\n let comparison = 0;\r\n if (companyA > companyB) {\r\n comparison = 1;\r\n } else if (companyA < companyB) {\r\n comparison = -1;\r\n }\r\n return comparison;\r\n}\r\n\r\nclass SearchContainer extends PureComponent {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n valueStories: [],\r\n searchData: props.data.searchResult,\r\n value: props.result,\r\n isLoading: true,\r\n valueStoryLoaded: false,\r\n message: '',\r\n isError: false,\r\n selectedData: [],\r\n storyFlag: false,\r\n resultFlag: true,\r\n valueStoriesObj: [],\r\n }\r\n this.onSuggestionSelected = this.onSuggestionSelected.bind(this)\r\n this.fetchValueStories = this.fetchValueStories.bind(this);\r\n this.callSearchResults = this.callSearchResults.bind(this);\r\n this.onChange = this.onChange.bind(this);\r\n this.companyProfileData = this.companyProfileData.bind(this);\r\n this.EmailProgress = this.EmailProgress.bind(this);\r\n this.getSelectedData = this.getSelectedData.bind(this);\r\n this.isLoading = this.isLoading.bind(this);\r\n }\r\n\r\n //{company: 'Accenture', industry: 'Retail', country: 'United States', revenue: 39750, capIQId: 113756,capIQCompany:'Accenture LLP', globalId: 5456786, globalCompany: 'Accenture Global', orgId: 123456, orgCompany: 'Accenture BP', peId: 456789, peCompany: 'Accenture PE', currencyCode: 'USD'}\r\n companyProfileData() {\r\n let arr = [{\r\n Organization: '', Industry: '', Location: '', AnnualRevenue: '0', TotalSpend: '0', CapIQId: '',\r\n CapIQCompany: '', GlobalUltimateId: '', GlobalUltimateCompany: '', BPId: '', BPCompany: '',\r\n PEId: '', PECompany: '', CurrencyCode: 'USD'\r\n }]\r\n let temp = this.state.selectedData;\r\n if (temp[0].name != '-') {\r\n arr[0].Organization = temp[0].name\r\n }\r\n if (temp[0].sapIndustry != '-') {\r\n arr[0].Industry = temp[0].sapIndustry\r\n }\r\n if (temp[0].location != '-') {\r\n arr[0].Location = temp[0].location\r\n }\r\n\r\n if (temp[0].capId != '-') {\r\n arr[0].CapIQId = temp[0].capId\r\n }\r\n if (temp[0].capIdName != '-') {\r\n arr[0].CapIQCompany = temp[0].capIdName\r\n }\r\n if (temp[0].globalId != '-') {\r\n arr[0].GlobalUltimateId = temp[0].globalId\r\n }\r\n if (temp[0].globalIdName != '-') {\r\n arr[0].GlobalUltimateCompany = temp[0].globalIdName\r\n }\r\n if (temp[0].bpId != '-') {\r\n arr[0].BPId = temp[0].bpId\r\n }\r\n if (temp[0].bpIdName != '-') {\r\n arr[0].BPCompany = temp[0].bpIdName\r\n }\r\n if (temp[0].peId != '-') {\r\n arr[0].PEId = temp[0].peId\r\n }\r\n if (temp[0].peIdName != '-') {\r\n arr[0].PECompany = temp[0].peIdName\r\n }\r\n if (temp[0].currency != '-') {\r\n arr[0].CurrencyCode = temp[0].currency\r\n }\r\n\r\n if (temp[0].revenue != '-') {\r\n let currency = temp[0].currency != '-' ? this.props.content.CurrencySymbols[temp[0].currency] : ''\r\n arr[0].AnnualRevenue = removeMask(temp[0].revenue, currency);\r\n }\r\n\r\n // this.props.companyProfileData(arr)\r\n //companyProfileData(){\r\n // let arr =[{ValueStoryName: '', Organization: 'Accenture', Industry: 'Retail', Location: 'United States', AnnualRevenue: 39750, TotalSpend: 3412, CapIQId: 113756, CapIQCompany:'Accenture LLP', GlobalUltimateId: 29906280, GlobalUltimateCompany: 'Accenture Global', BPId: 123456, BPCompany: 'Accenture BP', PEId: 456789, PECompany: 'Accenture PE', CurrencyCode: 'USD'}]\r\n const companyData = arr[0]; \r\n\r\n const industryIdx = (companyData.Industry === null || !companyData.Industry) ? -2 : this.props.content.discovery.form.industryTranslations.findIndex(item => companyData.Industry.toLowerCase() === item.toLowerCase());\r\n const locationIdx = (companyData.Location === null || !companyData.Location) ? -1 : this.props.content.discovery.form.locationTranslations.findIndex(item => companyData.Location.toLowerCase() === item.toLowerCase());\r\n companyData.Industry = industryIdx + 1;\r\n companyData.Location = locationIdx;\r\n\r\n this.props.companyProfileData(arr);\r\n\r\n this.props.valueStoryFetchDataSuccess(companyData);\r\n this.props.isNewValueStory(true);\r\n }\r\n\r\n getSelectedData(data) {\r\n this.setState({ selectedData: data })\r\n }\r\n\r\n fetchValueStories(searchText) {\r\n this.props.fetchValueStoriesLoading(true)\r\n this.setState({ isError: false, message: '', })\r\n this.props.fetchValueStories(searchText)\r\n .then((result) => {\r\n this.props.fetchValueStoriesSuccess(result)\r\n var obj = [];\r\n for (var i = 0; i < result.data.Result.length; i++) {\r\n\r\n obj.push(result.data.Result[i])\r\n }\r\n let temp = obj;\r\n temp.forEach((element, i) => {\r\n element.content = false;\r\n element.index = i;\r\n });\r\n this.setState({ valueStories: temp, valueStoryLoaded: true, isError: false, message: '', storyFlag: true}, this.isLoading)\r\n }).catch((error) => {\r\n this.props.fetchValueStoriesFailure(error.response.data.Message)\r\n this.setState({\r\n message: error.response.data.Message, isLoading: false, isError: true\r\n })\r\n })\r\n }\r\n\r\n callSearchResults(searchText) {\r\n this.setState({ message: '', isError: false })\r\n //First call the crm procedure for search data\r\n this.props.fetchCrmResults(searchText)\r\n .then((result) => {\r\n this.props.crmSearchSuccess(result)\r\n if (result.data.Result.length != 0) {\r\n let obj = result.data.Result;\r\n this.props.searchData(obj);\r\n //this.props.history.push(`/searchContainer`)\r\n\r\n //This code filters the output with unique Global ultimate Id (i.e. SAP_TOP_VIEW)\r\n const uniqueObj = [];\r\n const map = new Map();\r\n for (const item of obj) {\r\n if (!map.has(item.SAP_TOP_VIEW)) {\r\n map.set(item.SAP_TOP_VIEW, true); // set any value to Map\r\n uniqueObj.push({ item });\r\n }\r\n }\r\n let sortedArr = uniqueObj.sort(compare);\r\n //this.props.searchResult(sortedArr)\r\n this.setState({ searchData: sortedArr, isError: false, message: '', resultFlag: true }, this.isLoading)\r\n } else {\r\n\r\n }\r\n }).catch((error) => {\r\n if (error.response.status == 400) {\r\n this.props.fetchCapIqSearchResults(searchText, 1)\r\n .then((result) => {\r\n this.props.capIqSearchSuccess(result)\r\n this.props.searchText(this.state.value)\r\n //this.props.searchResult(result.data.Result)\r\n this.setState({ searchData: result.data.Result, isError: false, message: '', resultFlag: true }, this.isLoading)\r\n }).catch((error) => {\r\n //this.props.capIqSearchFailure(error.response.data.Message)\r\n this.setState({\r\n message: error.response.data.Message, isLoading: false, isError: true\r\n })\r\n })\r\n } else {\r\n //this.props.crmSearchFailure(error.response.data.Message)\r\n this.setState({\r\n message: error.response.data.Message, isLoading: false, isError: true\r\n })\r\n }\r\n })\r\n }\r\n\r\n isLoading(value) {\r\n //this.setState({ isLoading: value })\r\n let obj = []\r\n if(this.state.valueStories.length != 0){\r\n obj = this.state.valueStories\r\n }\r\n if(this.state.resultFlag == true && this.state.storyFlag == true){\r\n this.props.searchResult(this.state.searchData)\r\n this.setState({resultFlag: false, storyFlag: false, isLoading: false ,valueStoriesObj: obj})\r\n }\r\n }\r\n\r\n\r\n EmailProgress(isLoading, isError, message) {\r\n this.setState({ isLoading: isLoading, isError: isError, message: message })\r\n }\r\n\r\n componentWillMount() {\r\n this.fetchValueStories(this.state.value);\r\n //this.callSearchResults(this.props.result);\r\n }\r\n\r\n onSuggestionSelected(event) {\r\n event.preventDefault()\r\n if (this.state.value != null && this.state.value != '' && this.state.value != undefined) {\r\n this.setState({ isLoading: true, isError: false, message: '' }, this.forceUpdate)\r\n this.props.searchText(this.state.value)\r\n // this.callSearchResults(this.state.value)\r\n this.fetchValueStories(this.state.value);\r\n setTimeout(() => {\r\n this.callSearchResults(this.state.value)\r\n }, 5000)\r\n \r\n\r\n } else {\r\n //this.props.crmSearchFailure('Please enter a value to search')\r\n this.setState({\r\n isError: true, message: this.props.content.search.required\r\n })\r\n }\r\n //this.props.history.push(`/searchContainer`)\r\n }\r\n onChange = (e) => {\r\n this.props.crmSearchFailure('')\r\n this.setState({\r\n isError: false, message: '', value: e.target.value\r\n });\r\n };\r\n\r\n //Remove hardcoded texts \r\n render() {\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content,\r\n result: state.searchText,\r\n data: state.searchResultData\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchValueStories: (id) => dispatch(fetchValueStories(id)),\r\n fetchValueStoriesLoading: (bool) => dispatch(fetchValueStoriesLoading(bool)),\r\n fetchValueStoriesSuccess: (valueStories) => dispatch(fetchValueStoriesSuccess(valueStories)),\r\n fetchValueStoriesFailure: (error) => dispatch(fetchValueStoriesFailure(error)),\r\n fetchCrmResults: (value) => dispatch(fetchCrmResults(value)),\r\n crmSearchLoading: (bool) => dispatch(crmSearchLoading(bool)),\r\n crmSearchSuccess: (msg) => dispatch(crmSearchSuccess(msg)),\r\n crmSearchFailure: (error) => dispatch(crmSearchFailure(error)),\r\n searchResult: (result) => dispatch(searchResult(result)),\r\n searchText: (text) => dispatch(searchText(text)),\r\n searchData: (data) => dispatch(searchData(data)),\r\n fetchCapIqSearchResults: (value, type) => dispatch(fetchCapIqSearchResults(value, type)),\r\n capIqSearchSuccess: (msg) => dispatch(capIqSearchSuccess(msg)),\r\n capIqSearchFailure: (error) => dispatch(capIqSearchFailure(error)),\r\n companyProfileData: (data) => dispatch(companyProfileData(data)),\r\n isNewValueStory: (data) => dispatch(isNewValueStory(data)),\r\n valueStoryFetchDataSuccess: (valueStory) => dispatch(valueStoryFetchDataSuccess(valueStory))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SearchContainer)\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport PopupButton from 'UI/PopupButton'\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nimport {\r\n backdropStyle\r\n} from 'Constants'\r\n\r\n\r\nconst suggestedValueModalStyle = {\r\n width: '30%',\r\n //maxWidth: '1024px',\r\n overflowY: 'auto',\r\n height: 'auto',\r\n background: 'white',\r\n paddingBottom:'20px',\r\n paddingRight:'20px',\r\n\r\n}\r\n\r\nconst suggestedValueContentStyle = {\r\n width: 'auto',\r\n height: 'auto',\r\n background: 'white',\r\n textAlign: 'left',\r\n padding: '20px'\r\n}\r\n\r\n\r\n\r\nconst Confirmation = React.forwardRef((props, ref) => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {this.state.message}
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.props.content.search.valueStoryHeading}
\r\n {this.state.valueStoriesObj.length}
\r\n \r\n \r\n \r\n \r\n\r\n
\r\n \r\n\r\n this.callback()}\r\n modalStyle={suggestedValueModalStyle}\r\n contentStyle={suggestedValueContentStyle}>\r\n\r\n
\r\n )\r\n})\r\n\r\nexport default Confirmation\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport PopupButton from 'UI/PopupButton'\r\nimport Button from 'UI/Button'\r\nimport Popup from \"reactjs-popup\";\r\nimport Select from 'react-select'\r\nimport { Checkbox } from 'material-ui';\r\nimport {\r\n getYourFileSuccess,\r\n getYourFileLoading,\r\n resetError,\r\n getYourFileFailure,\r\n getYourFilesDetails,\r\n currentActiveRequest,\r\n UpdateRequestParameter,\r\n solutionScopeChanged,\r\n pendingChanges,\r\n fetchVisibleSolutionInScopeValues,\r\n isSpendParameterPage ,\r\n saveSpendParametersOnRedirect\r\n} from 'actions/spendActions'\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nimport { CheckboxE, PopupButtonE } from 'UI/CustomComponents/Controls';\r\nimport { formatThousands, formatThousandsForStrings } from 'utils/Utils'\r\nimport { changeModalStyle, changeModalContentStyle, backdropStyle } from 'Constants'\r\n\r\nconst changeBackdropStyle = Object.assign({}, backdropStyle);\r\nchangeBackdropStyle.zIndex = '1050';\r\n\r\nconst alertModalStyle = Object.assign({}, changeModalStyle);\r\nalertModalStyle.zIndex = '1060';\r\nalertModalStyle.width = '33%';\r\n\r\n\r\nclass AccountParametersNewValueStory extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n RequestIds: [],\r\n fileDetails: [],\r\n originalState: '',\r\n open: false,\r\n isActive: false,\r\n respnseMessage: '',\r\n isError: false,\r\n test: JSON.stringify(this.props.spendDetails.currentActiveRequest),\r\n cardPaymentOption: [{ label: 'Yes', value: 'Yes' },\r\n { label: 'No', value: 'No' }],\r\n selectedSolutionScope: '',\r\n solutionScopeOption: [],\r\n // { label: \"Buying\", value: \"Buying\" },\r\n // { label: \"Buying and Invoicing\", value: \"Buying and Invoicing\" },\r\n // { label: \"Commerce Automation\", value: \"Commerce Automation\" },\r\n // { label: \"SCC\", value: \"SCC\" },\r\n // { label: \"Supplier Choice\", value: \"Supplier Choice\" },\r\n // { label: \"SNAP\", value: \"SNAP\" },\r\n // { label: \"DSN\", value: \"DSN\" },\r\n // { label: \"RISE\", value: \"RISE\" }, \r\n // ],\r\n solutionInScopeFlag: false,\r\n modalDesc: 'Do you want to apply Solution in Scope changes to the Buyer Supplier Enablement Recommendations and Enablement Waves?'\r\n }\r\n this.handleParameterCheckChanged = this.handleParameterCheckChanged.bind(this)\r\n this.handleSolutionScopeChange = this.handleSolutionScopeChange.bind(this)\r\n this.onChange = this.onChange.bind(this)\r\n this.handleSaveParameter = this.handleSaveParameter.bind(this);\r\n this.showModal = this.showModal.bind(this)\r\n this.hideModal = this.hideModal.bind(this)\r\n //this.closePopUp = this.closePopUp.bind(this)\r\n this.newVariable = 0\r\n }\r\n\r\n showModal() {\r\n this.refs['alert'].show()\r\n }\r\n\r\n hideModal(action) {\r\n this.refs[action].hide()\r\n }\r\n\r\n componentWillUnmount() {\t\t\r\n\t\tsetTimeout(() => {\r\n\t\t\t//this.props.pendingChanges(null);\r\n\t\t\tthis.props.isSpendParameterPage(false);\r\n\t\t}, 1000);\r\n\t}\r\n\r\n componentDidMount() {\r\n // console.log(\"componentDidMount called\")\r\n this.props.isSpendParameterPage(true);\r\n this.setState({\r\n test: JSON.stringify(this.props.spendDetails.currentActiveRequest)\r\n })\r\n\r\n /////// Load Solution in scope dropdown value ////////////////////\r\n this.props.fetchVisibleSolutionInScopeValues().then((response) => {\r\n if (response.status === 200) {\r\n if (response.data.Result.length === 0) {\r\n this.setState({ responseMessage: this.props.content.noRecords, isLoading: false, isError: true });\r\n }\r\n else\r\n {\r\n console.log(\"api data-----------\", response.data.Result)\r\n var scopeValues=[];\r\n if (response.data.Result !== null) {\r\n response.data.Result.forEach(item => {\r\n let value = Object.values(item)\r\n scopeValues.push({ label: value[1], value: value[1] });\r\n });\r\n } \r\n\r\n this.setState({ apiData: response.data.Result, solutionScopeOption: scopeValues,isLoading: false, responseMessage: '', isError: false });\r\n }\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n })\r\n ///////////////////\r\n }\r\n\r\n componentWillReceiveProps(nextProps, nextContext) {\r\n if (this.props.saveSpendParametersAfterRedirect !== nextProps.saveSpendParametersAfterRedirect && nextProps.saveSpendParametersAfterRedirect) {\r\n\t\t\tthis.handleSaveParameter();\r\n\t\t}\r\n\r\n if (nextProps.spendDetails.currentActiveRequest !== undefined &&\r\n this.state.fileDetails !== undefined &&\r\n this.state.test !== undefined && this.state.test.length > 0) {\r\n var actualValue = JSON.parse(this.state.test);\r\n if (actualValue.DMC_ID !== this.state.fileDetails.DMC_ID) {\r\n this.setState({\r\n test: JSON.stringify(nextProps.spendDetails.currentActiveRequest)\r\n })\r\n }\r\n\r\n\r\n }\r\n if (nextProps.spendDetails.currentActiveRequest !== this.props.fileDetails) {\r\n this.setState({\r\n fileDetails: nextProps.spendDetails.currentActiveRequest\r\n })\r\n }\r\n }\r\n\r\n\r\n // closePopUp(action) {\r\n // if (action === \"test\") {\r\n // var actualValue = JSON.parse(this.state.test);\r\n // this.props.spendDetails.currentActiveRequest = actualValue;\r\n // this.props.currentActiveRequest(actualValue);\r\n // this.setState({ fileDetails: actualValue })\r\n // }\r\n // this.setState({ open: !this.state.open })\r\n // // }\r\n // // else if (this.props.spendDetails !== undefined &&\r\n // // this.props.spendDetails.currentActiveRequest !== undefined) {\r\n // // this.setState({\r\n // // fileDetails: this.props.spendDetails.currentActiveRequest\r\n // // }, () => { this.setState({ open: !this.state.open }) })\r\n\r\n // // }\r\n // }\r\n\r\n handleParameterCheckChanged(e) {\r\n\r\n var checkBoxState = this.state.fileDetails;\r\n\r\n\r\n switch (e.target.name) {\r\n case this.props.content.transactionEligible:\r\n checkBoxState.TRANSACTION_ANSUPPLIERS_AUTOMATION_ELIGIBLE = e.target.checked;\r\n break;\r\n case this.props.content.unclassifiedEligible:\r\n checkBoxState.UNCLASSIFIED_AUTOMATION_ELIGIBLE = e.target.checked;\r\n break;\r\n case this.props.content.sCCEligible:\r\n checkBoxState.WHENDIRECT_SUPPLIER_SCC_ELIGIBLE = e.target.checked;\r\n break;\r\n case this.props.content.fieldglass:\r\n checkBoxState.FIELD_GLASS_SCOPE = e.target.checked;\r\n checkBoxState.FIELD_GLASS_ELIGIBLE = (e.target.checked === false ? false : this.state.fileDetails.FIELD_GLASS_ELIGIBLE);\r\n break;\r\n case this.props.content.fieldglassEligible:\r\n checkBoxState.FIELD_GLASS_ELIGIBLE = (this.state.fileDetails.FIELD_GLASS_SCOPE === false ? false : e.target.checked);\r\n break;\r\n case this.props.content.cardPaymentInScope:\r\n checkBoxState.CARD_PAYMENT_INSCOPE = e.target.checked;\r\n break;\r\n }\r\n this.props.pendingChanges(true)\r\n this.setState({ fileDetails: checkBoxState });\r\n\r\n }\r\n\r\n onChange(e) {\r\n var textBoxState = this.state.fileDetails;\r\n\r\n textBoxState.ANNUAL_TRANSACTION_MAX = e.target.value;\r\n this.props.pendingChanges(true)\r\n this.setState({\r\n fileDetails: textBoxState\r\n });\r\n } \r\n \r\n\r\n onCardPaymentInScopeChange(value) {\r\n var textBoxState = this.state.fileDetails;\r\n\r\n textBoxState.CARD_PAYMENT_INSCOPE = value === \"Yes\" ? true : false;\r\n this.props.pendingChanges(true)\r\n this.setState({\r\n fileDetails: textBoxState\r\n });\r\n }\r\n\r\n \r\n\r\n handleSaveParameter() {\r\n this.hideModal(\"alert\")\r\n this.setState({ respnseMessage: '', isError: false })\r\n\r\n console.log(\"filedetails :\", this.state.fileDetails);\r\n\r\n var currentUpdate = this.state.fileDetails.ANNUAL_TRANSACTION_MAX.toString().replace(/^\\D+/g, '');\r\n this.state.fileDetails.ANNUAL_TRANSACTION_MAX = currentUpdate\r\n\r\n var termRationalizationValue = this.state.fileDetails.TERMS_RATIONALIZATION_THRESHOLD.toString().replace(',', '');\r\n this.state.fileDetails.TERMS_RATIONALIZATION_THRESHOLD = termRationalizationValue\r\n\r\n var discountThresholdValue = this.state.fileDetails.DISCOUNT_THRESHOLD.toString().replace(',', '');\r\n this.state.fileDetails.DISCOUNT_THRESHOLD = discountThresholdValue\r\n\r\n var lowInvoiceCountValue = this.state.fileDetails.LOW_INVOICE_COUNT_THRESHOLD.toString().replace(',', '');\r\n this.state.fileDetails.LOW_INVOICE_COUNT_THRESHOLD = lowInvoiceCountValue\r\n\r\n var cardPaymentInScopeValue = this.state.fileDetails.CARD_PAYMENT_INSCOPE;\r\n this.state.fileDetails.CARD_PAYMENT_INSCOPE = cardPaymentInScopeValue\r\n\r\n var termRationalizationValue = this.state.fileDetails.SPOT_BUY_ELIGIBLE_THRESHOLD.toString().replace(',', '');\r\n this.state.fileDetails.SPOT_BUY_ELIGIBLE_THRESHOLD = termRationalizationValue\r\n\r\n var termRationalizationValue = this.state.fileDetails.AVG_INV_SPEND_TRANS_THRESHOLD.toString().replace(',', '');\r\n this.state.fileDetails.AVG_INV_SPEND_TRANS_THRESHOLD = termRationalizationValue\r\n\r\n var solutionInScope = this.state.fileDetails.SOLUTION_IN_SCOPE;\r\n this.state.fileDetails.SOLUTION_IN_SCOPE = solutionInScope\r\n\r\n this.props.UpdateRequestParameter(this.state.fileDetails).then(response => {\r\n if (response.status === 200) {\r\n this.setState({\r\n isError: false,\r\n respnseMessage: 'Parameter/s updated successfully',\r\n test: JSON.stringify(this.state.fileDetails),\r\n solutionInScopeFlag: false\r\n })\r\n this.props.currentActiveRequest(this.state.fileDetails);\r\n this.props.pendingChanges(null)\r\n //this.setState({ open: !this.state.open })\r\n //this.closePopUp('close');\r\n }\r\n else {\r\n this.setState({\r\n isError: true,\r\n respnseMessage: 'An error has occured'\r\n })\r\n }\r\n this.props.saveSpendParametersOnRedirect(false);\r\n }).catch((error) => {\r\n this.setState({\r\n isError: true,\r\n respnseMessage: 'An error has occured'\r\n })\r\n })\r\n }\r\n\r\n handleSolutionScopeChange(value) {\r\n var objFileDetails = this.state.fileDetails;\r\n\r\n objFileDetails.SOLUTION_IN_SCOPE = value.label;\r\n this.props.solutionScopeChanged(value.label)\r\n this.props.pendingChanges(true)\r\n this.setState({\r\n fileDetails: objFileDetails, isError: true, respnseMessage: 'Warning! Buyer Supplier Enablement Recommendations will be changed.', solutionInScopeFlag: true\r\n });\r\n }\r\n\r\n render() {\r\n var displayInfoDesc = (itemDesc) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n {props.confirmMessage}\r\n
\r\n\r\n
\r\n \r\n {props.okButtonFlag && props.OkButtonAction(e)}\r\n />}\r\n
\r\n \r\n props.CancelButtonAction()}\r\n />\r\n
\r\n \r\n
\r\n )\r\n };\r\n //onClick={() => this.showModal('AccountParameters')}\r\n\r\n return (\r\n // this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined && this.props.spendDetails.currentActiveRequest !== \"\" ?\r\n \r\n
\r\n // :\r\n // \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {this.state.isError ?\r\n
\r\n {this.state.respnseMessage}
:\r\n {this.state.respnseMessage}
\r\n }\r\n \r\n ![](\"images/save_active.svg\")
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n\r\n
\r\n \r\n {this.props.content.enablementInsight}\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.inScopeSolution}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.inScopeSolution)}\r\n
\r\n \r\n option.value === this.state.fileDetails.SOLUTION_IN_SCOPE\r\n )}\r\n onChange={value => this.handleSolutionScopeChange(value)}\r\n options={this.state.solutionScopeOption}\r\n isSearchable={false}\r\n noOptionsMessage={() => null} />\r\n
\r\n \r\n {this.props.content.productScope}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.transactionEligible}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.transactionEligibleDesc)}\r\n
\r\n \r\n
\r\n \r\n this.handleParameterCheckChanged(e)}\r\n name={this.props.content.transactionEligible} value={this.props.content.transactionEligible} />\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.unclassifiedEligible}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.unclassifiedEligible)}\r\n
\r\n \r\n
\r\n \r\n this.handleParameterCheckChanged(e)}\r\n name={this.props.content.unclassifiedEligible} \r\n value={this.props.content.unclassifiedEligible} />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.sCCEligible}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.sCCEligibleDesc)}\r\n
\r\n \r\n
\r\n \r\n this.handleParameterCheckChanged(e)}\r\n checked={this.state.fileDetails !== undefined && this.state.fileDetails.WHENDIRECT_SUPPLIER_SCC_ELIGIBLE !== undefined ? this.state.fileDetails.WHENDIRECT_SUPPLIER_SCC_ELIGIBLE : false}\r\n name={this.props.content.sCCEligible} value={this.props.content.sCCEligible} />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.fieldglass}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.fieldglassDesc)}\r\n
\r\n \r\n
\r\n \r\n this.handleParameterCheckChanged(e)}\r\n checked={this.state.fileDetails !== undefined && this.state.fileDetails.FIELD_GLASS_SCOPE !== undefined ? this.state.fileDetails.FIELD_GLASS_SCOPE : false}\r\n name={this.props.content.fieldglass} value={this.props.content.fieldglass} />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.fieldglassEligible}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.fieldglassEligibleDesc)}\r\n
\r\n \r\n
\r\n \r\n this.handleParameterCheckChanged(e)}\r\n checked={this.state.fileDetails !== undefined && this.state.fileDetails.FIELD_GLASS_ELIGIBLE !== undefined ? this.state.fileDetails.FIELD_GLASS_ELIGIBLE : false}\r\n name={this.props.content.fieldglassEligible} value={this.props.content.fieldglassEligible} />\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.state.modalDesc}\r\n
\r\n \r\n
\r\n \r\n this.hideModal(\"alert\")}\r\n color /> \r\n
\r\n \r\n //
\r\n )\r\n }\r\n}\r\nconst mapStateToProps = state => {\r\n return {\r\n // language: state.language,\r\n userData: state.valueStory,\r\n user: state.default,\r\n content: state.content.spendAnalysis.accountParameters,\r\n validation: state.content.validation,\r\n Industries: state.content.discovery.form.industries,\r\n spendDetails: state.spendDetails,\r\n saveSpendParametersAfterRedirect : state.saveSpendParametersOnRedirect.changes\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n getYourFileLoading: bool => dispatch(getYourFileLoading(bool)), \r\n UpdateRequestParameter: requestDetails => dispatch(UpdateRequestParameter(requestDetails)),\r\n currentActiveRequest: (requestDetails) => dispatch(currentActiveRequest(requestDetails)),\r\n solutionScopeChanged: (val) => dispatch(solutionScopeChanged(val)),\r\n pendingChanges: (val) => dispatch(pendingChanges(val)),\r\n fetchVisibleSolutionInScopeValues: () => dispatch(fetchVisibleSolutionInScopeValues()),\r\n isSpendParameterPage: obj => dispatch(isSpendParameterPage(obj)),\r\n saveSpendParametersOnRedirect: changes => dispatch(saveSpendParametersOnRedirect(changes)),\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(AccountParametersNewValueStory)\r\n","import React from 'react';\r\nimport { connect } from 'react-redux'\r\nimport { RadioButton } from 'material-ui';\r\nimport ScrollArea from 'react-scrollbar'\r\n\r\nimport Button from 'UI/Button';\r\nimport ButtonWithoutLoader from 'UI/ButtonWithoutLoader'\r\nimport Select from 'react-select'\r\n\r\nimport { validators, dropdownColourStyles } from 'Constants'\r\n\r\nimport {\r\n resetError\r\n} from 'actions/userActions'\r\n\r\nimport {\r\n searchResult,\r\n fetchCapIqSearchResults,\r\n capIqSearchSuccess,\r\n capIqSearchFailure\r\n}\r\nfrom 'actions/searchActions'\r\n\r\nimport {\r\n\tfetchANIdBPIdDetails\r\n} from 'actions/spendActions'\r\n\r\nimport { capIQFetchData } from 'actions/discoveryActions'\r\n\r\nclass ANIdPicker extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n anidData: '',\r\n data: props.data,\r\n peArray: [],\r\n bpArray: [],\r\n flag: false,\r\n index: -1,\r\n checked: false,\r\n checkIndex: -1, \r\n \r\n selectedData: null,\r\n searchOption: [{ label: 'Customer Name', value: 'Customer Name' }],\r\n selectedOption: 'Customer Name',\r\n searchText: '',\r\n companyDetails: [],\r\n anidObj: [],\r\n isLoading: false,\r\n \r\n errorMsg: '',\r\n searchFlag: false,\r\n searchMessage: '',\r\n countryArray: [],\r\n selectedCountry: 'All Countries'\r\n }\r\n this.loadSearchedANID = this.loadSearchedANID.bind(this)\r\n this.loadSelectedANID = this.loadSelectedANID.bind(this)\r\n this.RadioButtonChecked = this.RadioButtonChecked.bind(this);\r\n this.onSearchTextChangeEvent = this.onSearchTextChangeEvent.bind(this);\r\n this.search = this.search.bind(this);\r\n this._handleKeyDown = this._handleKeyDown.bind(this);\r\n this.save = this.save.bind(this)\r\n this.clearANID = this.clearANID.bind(this);\r\n }\r\n\r\n save() {\r\n if (this.state.checked) {\r\n this.props.anIdRadioButtonClicked(this.state.selectedData) \r\n }\r\n this.props.close();\r\n }\r\n\r\n clearANID() {\r\n this.props.clearANID() \r\n }\r\n\r\n onSearchTextChangeEvent(event) {\r\n this.setState({ searchText: event.target.value !== undefined ? event.target.value : '', checked: false });\r\n }\r\n\r\n _handleKeyDown(e) {\r\n if (e.key === 'Enter') {\r\n this.search()\r\n }\r\n } \r\n\r\n search() {\r\n var data = this.state.anidData.filter(d=>d.CUSTOMER_NAME.toLowerCase().includes(this.state.searchText.toLowerCase()))\r\n this.setState({ searchResult : data }, this.loadSearchedANID)\r\n console.log(\"Search data......\", data)\r\n }\r\n\r\n RadioButtonChecked(e) {\r\n let data = this.state.searchResult[e.currentTarget.value]\r\n \r\n //After this send the data back to search results to populate company profile..................................\r\n\r\n this.setState({ checked: true, checkIndex: e.currentTarget.id, selectedData: data, isLoading: true, anidObj: data }, this.callMethods)\r\n }\r\n\r\n callMethods() {\r\n this.loadSearchedANID();\r\n this.loadSelectedANID();\r\n }\r\n\r\n loadSearchedANID() {\r\n var result = (\r\n // {this.props.content.noActiveRequestFile}\r\n //
\r\n // \r\n {this.state.searchResult.map((data, index) => (\r\n
)\r\n\r\n this.setState({ peArray: result })\r\n }\r\n\r\n loadSelectedANID() {\r\n var data = this.state.anidObj;\r\n\r\n var result = (\r\n
\r\n ))}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {data.CUSTOMER_NAME}\r\n | {data.BUYER_ANID}\r\n
\r\n \r\n
\r\n \r\n
\r\n Customer Name
\r\n {data.CUSTOMER_NAME != null ? data.CUSTOMER_NAME : '-'}
\r\n \r\n
\r\n Buyer ANID
\r\n \r\n {data.BUYER_ANID != null ? data.BUYER_ANID : '-'}\r\n
\r\n \r\n
\r\n BPID
\r\n \r\n {data.BPID != null ? data.BPID : '-'}\r\n
\r\n \r\n
\r\n \r\n SAP Region
\r\n \r\n {data.SAP_REGION != null ? data.SAP_REGION : '-'}\r\n
\r\n \r\n
\r\n Country
\r\n \r\n {data.COUNTRY != null ? data.COUNTRY : '-'}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content.discovery.form,\r\n data: state.treeData,\r\n firstSearchResult: state.searchData,\r\n search: state.searchResultData,\r\n ui: state.content.ui,\r\n company: state.content.capitalDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n userData: state.valueStory,\r\n countryList: state.content.CountryList,\r\n capIQSearchData: state.capIQSearchTree,\r\n spendDetails: state.spendDetails\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchCapIqSearchResults: (value, type, parentFlag, publicFlag, country) => dispatch(fetchCapIqSearchResults(value, type, parentFlag, publicFlag, country)),\r\n capIqSearchSuccess: (msg) => dispatch(capIqSearchSuccess(msg)),\r\n capIqSearchFailure: (error) => dispatch(capIqSearchFailure(error)),\r\n searchResult: (result) => dispatch(searchResult(result)),\r\n capIQFetchData: (capIQData) => dispatch(capIQFetchData(capIQData)),\r\n resetError: () => dispatch(resetError()),\r\n fetchANIdBPIdDetails: (formValues) => dispatch(fetchANIdBPIdDetails(formValues))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ANIdPicker);\r\n","import React from 'react';\r\nimport { connect } from 'react-redux'\r\nimport { RadioButton } from 'material-ui';\r\nimport ScrollArea from 'react-scrollbar'\r\n\r\nimport Button from 'UI/Button';\r\nimport ButtonWithoutLoader from 'UI/ButtonWithoutLoader'\r\nimport Select from 'react-select'\r\n\r\nimport { validators, dropdownColourStyles } from 'Constants'\r\n\r\nimport {\r\n resetError\r\n} from 'actions/userActions'\r\n\r\nimport {\r\n searchResult,\r\n fetchCapIqSearchResults,\r\n capIqSearchSuccess,\r\n capIqSearchFailure\r\n}\r\nfrom 'actions/searchActions'\r\n\r\nimport {\r\n\tfetchANIdBPIdDetails\r\n} from 'actions/spendActions'\r\n\r\nimport { capIQFetchData } from 'actions/discoveryActions'\r\n\r\nclass BPIdPicker extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n anidData: '',\r\n data: props.data,\r\n peArray: [],\r\n bpArray: [],\r\n flag: false,\r\n index: -1,\r\n checked: false,\r\n checkIndex: -1, \r\n \r\n selectedData: null,\r\n searchOption: [{ label: 'Customer Name', value: 'Customer Name' }],\r\n selectedOption: 'Customer Name',\r\n searchText: '',\r\n companyDetails: [],\r\n anidObj: [],\r\n isLoading: false,\r\n \r\n errorMsg: '',\r\n searchFlag: false,\r\n searchMessage: '',\r\n countryArray: [],\r\n selectedCountry: 'All Countries'\r\n }\r\n this.loadSearchedANID = this.loadSearchedANID.bind(this)\r\n this.loadSelectedANID = this.loadSelectedANID.bind(this)\r\n this.RadioButtonChecked = this.RadioButtonChecked.bind(this);\r\n this.onSearchTextChangeEvent = this.onSearchTextChangeEvent.bind(this);\r\n this.search = this.search.bind(this);\r\n this._handleKeyDown = this._handleKeyDown.bind(this);\r\n this.save = this.save.bind(this)\r\n this.clearBPID = this.clearBPID.bind(this);\r\n }\r\n\r\n save() {\r\n if (this.state.checked) {\r\n this.props.bpIdRadioButtonClicked(this.state.selectedData) \r\n }\r\n this.props.close();\r\n }\r\n\r\n clearBPID() {\r\n this.props.clearBPID() \r\n }\r\n\r\n onSearchTextChangeEvent(event) {\r\n this.setState({ searchText: event.target.value !== undefined ? event.target.value : '', checked: false });\r\n }\r\n\r\n _handleKeyDown(e) {\r\n if (e.key === 'Enter') {\r\n this.search()\r\n }\r\n } \r\n\r\n search() {\r\n var data = this.state.bpidData.filter(d=>d.CUSTOMER_NAME.toLowerCase().includes(this.state.searchText.toLowerCase()))\r\n this.setState({ searchResult : data }, this.loadSearchedANID)\r\n console.log(\"Search data......\", data)\r\n }\r\n\r\n RadioButtonChecked(e) {\r\n let data = this.state.searchResult[e.currentTarget.value]\r\n \r\n //After this send the data back to search results to populate company profile..................................\r\n\r\n this.setState({ checked: true, checkIndex: e.currentTarget.id, selectedData: data, isLoading: true, bpidObj: data }, this.callMethods)\r\n }\r\n\r\n callMethods() {\r\n this.loadSearchedANID();\r\n this.loadSelectedANID();\r\n }\r\n\r\n loadSearchedANID() {\r\n var result = (\r\n
\r\n \r\n
\r\n Search by customer name
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {this.props.content.searchBy}*
\r\n \r\n option.label === this.state.selectedOption)}\r\n noOptionsMessage={() => null}\r\n onChange={(value) => this.handleSelectionChange(value.label)}\r\n options={this.state.searchOption}\r\n isSearchable={false}\r\n validateOn=\"change\" styles={dropdownColourStyles}\r\n />\r\n
\r\n \r\n {/*
\r\n {'Filter By'}*
*/}\r\n \r\n
\r\n {/* \r\n
\r\n \r\n this._handleKeyDown(e)} onChange={this.onSearchTextChangeEvent} value={this.state.searchText} />\r\n \r\n
\r\n\r\n \r\n
*/}\r\n \r\n\r\n\r\n
\r\n \r\n option.label === this.state.selectedCountry)}\r\n noOptionsMessage={() => null}\r\n onChange={(value) => this.handleCountryChange(value.label)}\r\n options={this.state.countryArray}\r\n isSearchable={false}\r\n validateOn=\"change\" styles={dropdownColourStyles}\r\n />\r\n
\r\n {this.state.searchMessage}
\r\n \r\n
\r\n \r\n {this.state.errorMsg}
\r\n \r\n
\r\n\r\n \r\n \r\n {this.props.search.isLoading ?\r\n \r\n
\r\n Loading...
:\r\n this.state.peArray\r\n }\r\n {this.props.search.error}
\r\n \r\n \r\n {this.state.isLoading ?\r\n \r\n
\r\n Loading...
:\r\n this.state.companyDetails\r\n }\r\n {this.props.search.error}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.state.searchResult.map((data, index) => (\r\n
)\r\n\r\n this.setState({ peArray: result })\r\n }\r\n\r\n loadSelectedANID() {\r\n var data = this.state.bpidObj;\r\n\r\n var result = (\r\n
\r\n ))}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {data.CUSTOMER_NAME}\r\n | {data.BPID}\r\n
\r\n \r\n
\r\n \r\n
\r\n Customer Name
\r\n {data.CUSTOMER_NAME != null ? data.CUSTOMER_NAME : '-'}
\r\n \r\n
\r\n BPID
\r\n \r\n {data.BPID != null ? data.BPID : '-'}\r\n
\r\n \r\n
\r\n Buyer ANID
\r\n \r\n {data.BUYER_ANID != null ? data.BUYER_ANID : '-'}\r\n
\r\n \r\n
\r\n \r\n SAP Region
\r\n \r\n {data.SAP_REGION != null ? data.SAP_REGION : '-'}\r\n
\r\n \r\n
\r\n Country
\r\n \r\n {data.COUNTRY != null ? data.COUNTRY : '-'}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content.discovery.form,\r\n data: state.treeData,\r\n firstSearchResult: state.searchData,\r\n search: state.searchResultData,\r\n ui: state.content.ui,\r\n company: state.content.capitalDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n userData: state.valueStory,\r\n countryList: state.content.CountryList,\r\n capIQSearchData: state.capIQSearchTree,\r\n spendDetails: state.spendDetails\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchCapIqSearchResults: (value, type, parentFlag, publicFlag, country) => dispatch(fetchCapIqSearchResults(value, type, parentFlag, publicFlag, country)),\r\n capIqSearchSuccess: (msg) => dispatch(capIqSearchSuccess(msg)),\r\n capIqSearchFailure: (error) => dispatch(capIqSearchFailure(error)),\r\n searchResult: (result) => dispatch(searchResult(result)),\r\n capIQFetchData: (capIQData) => dispatch(capIQFetchData(capIQData)),\r\n resetError: () => dispatch(resetError()),\r\n fetchANIdBPIdDetails: (formValues) => dispatch(fetchANIdBPIdDetails(formValues))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(BPIdPicker);\r\n","import React, { PureComponent } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport Popup from \"reactjs-popup\";\r\n//import Screen from 'UI/CustomComponents/Screen';\r\n\r\n// Actions\r\nimport { updateOrganization, addRevenue, updateCurrency, updateCurrencyCode, capIQFetchData, updateBPID, updateANID, updateValueStoryType } from 'actions/discoveryActions'\r\n\r\nimport {\r\n\tgetSPCapitalIQData,\r\n\tgetSPCapitalIQLoading,\r\n\tgetSPCapitalIQSuccess,\r\n\tgetSPCapitalIQFailure,\r\n\tgetCapIQDataBlank,\r\n\tfetchIndirectVisibleSolutionInScopeValues,\t\r\n} from 'actions/spendActions'\r\nimport {\r\n\tfetchUserValueStories,\r\n\tfetchValueStories,\r\n\tfetchUserSharedValueStories,\r\n\tfetchValueStoriesLoading,\r\n\tfetchValueStoriesSuccess,\r\n\tfetchValueStoriesFailure,\r\n} from 'actions/userActions'\r\nimport {\r\n\ttoggleValueDriver,\r\n\ttoggleSubLever\r\n} from 'actions/valueDriverActions'\r\nimport { updateUserInput } from 'actions/subLeverCalculationActions'\r\n\r\n// Common Functions\r\nimport { subLeverChange } from 'components/BusinessValue/SubLeverChange'\r\n\r\n// Utils\r\nimport { round, onChangeRemoveMask, formatThousands, getSubLeverIdObject, subLeverHasTotalSpend, removeMask, isDuplicate } from 'utils/Utils'\r\n\r\n// Settings\r\nimport { validators, dropdownColourStyles } from 'Constants'\r\n\r\nimport DiscoveryCapIQSearch from './DiscoveryCapIQSearch';\r\nimport DiscoveryVsSearch from './DiscoveryVsSearch'\r\nimport { modalStyle, emailmodalContentStyle } from 'Constants'\r\nimport { ControlTextE, SelectE, CheckboxE, ScreenE, PopupE } from 'UI/CustomComponents/Controls';\r\nimport ANIdPicker from './ANIdPicker'\r\nimport BPIdPicker from './BPIdPicker'\r\n\r\nconst autoHeightModalStyle = Object.assign({}, modalStyle)\r\nautoHeightModalStyle.height = 'auto'\r\nautoHeightModalStyle.width = '30%'\r\n\r\nconst defaultOptions = [\r\n\t{ value: 0, label: \"\" }];\r\n\r\nexport class SpendDiscoveryForm extends PureComponent {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.fetchValueStories = this.fetchValueStories.bind(this);\r\n\t\tthis.fetchUserSharedValueStories = this.fetchUserSharedValueStories.bind(this);\r\n\t\tthis.addCurrencyMask = this.addCurrencyMask.bind(this)\r\n\t\tthis.calculateTotalSpendFromRevenue = this.calculateTotalSpendFromRevenue.bind(this)\r\n\t\tthis.dispatchAddRevenue = this.dispatchAddRevenue.bind(this)\r\n\t\tthis.getTotalSpend = this.getTotalSpend.bind(this)\r\n\t\tthis.handleIndustryChange = this.handleIndustryChange.bind(this)\r\n\t\tthis.handleLocationChange = this.handleLocationChange.bind(this)\r\n\t\tthis.handleCurrencyChange = this.handleCurrencyChange.bind(this)\r\n\t\tthis.handleTotalSpendBlur = this.handleTotalSpendBlur.bind(this)\r\n\t\tthis.repositionInputCaret = this.repositionInputCaret.bind(this)\r\n\t\tthis.capIqRadioButtonClicked = this.capIqRadioButtonClicked.bind(this)\r\n\t\tthis.anIdRadioButtonClicked = this.anIdRadioButtonClicked.bind(this)\r\n\t\tthis.bpIdRadioButtonClicked = this.bpIdRadioButtonClicked.bind(this)\r\n\t\tthis.capIqDataCleared = this.capIqDataCleared.bind(this)\r\n\t\tthis.anIdDataCleared = this.anIdDataCleared.bind(this)\r\n\t\tthis.bpIdDataCleared = this.bpIdDataCleared.bind(this)\r\n\t\tthis.closeCapIqPopUp = this.closeCapIqPopUp.bind(this)\r\n\t\tthis.closeANIDPopUp = this.closeANIDPopUp.bind(this)\r\n\t\tthis.closeBPIDPopUp = this.closeBPIDPopUp.bind(this)\r\n\t\tthis.closeVsListPopUp = this.closeVsListPopUp.bind(this)\r\n\t\tthis.isZero = this.notZero.bind(this)\r\n\t\tthis.value = 0\r\n\t\tthis.totalSpendTouched = false\r\n\t\tthis.annualRevenueCaret = 0\r\n\t\tthis.annualRevenueThousandsSeparatorCount = 0\r\n\t\tthis.annualRevenueValue = null\r\n\t\tthis.totalSpendCaret = 0\r\n\t\tthis.totalSpendThousandsSeparftorCount = 0\r\n\t\tthis.totalSpendValue = null\r\n\t\tthis.state = {\r\n\t\t\tindustryOption: [],\r\n\t\t\tselectedIndustry: '',\r\n\t\t\tselectedIndirectScope: '',\r\n\t\t\t\r\n\t\t\tselectedLocation: '',\r\n\t\t\tlocationOption: [],\r\n\t\t\tcurrencyOption: [],\r\n\t\t\tselectedCurrency: '',\r\n\t\t\tselectedCurrencySymbol: '',\r\n\t\t\tshowFloatingLabelFlag: false,\r\n\t\t\tselectedRegion: '',\r\n\t\t\tvalueStory: '',\r\n\t\t\tisValueStoryNameEdit: false,\r\n\t\t\torganization: '',\r\n\t\t\tselectedCapIQCompanyId: '',\r\n\t\t\topen: false,\r\n\t\t\tcloseCapIqPopUp: false,\r\n\t\t\ttest: false,\r\n\t\t\topenVSList: false,\r\n\t\t\tvalueStories: [],\r\n\t\t\tsearchText: '',\r\n\t\t\tvalueStoriesShared: [],\r\n\t\t\tisLoading: false,\r\n\t\t\tvsLoad: '',\r\n\t\t\tisCapIQLicesend: false,\r\n\t\t\tuserValueStoryData: '',\r\n\t\t\tbpId: '',\r\n\t\t\tanId: '',\r\n\t\t\tindirectSolutionScopeOption: [],\r\n\t\t\tdirectSolutionScopeOption: [],\r\n\t\t\tvalueStoryType: [\r\n\t\t\t\t{ value: 'Sales', label: 'Sales Values Story'},\r\n\t\t {value: 'EnablementExecution', label: 'Enablement Execution Value Story'}\r\n\t\t\t],\r\n\t\t\tselectedValueStoryType: '',\r\n\t\t\topenBPID: false,\r\n\t\t\tenabledANID_BPID: false,\r\n\t\t}\r\n\t\tthis.onTextChangeEvent = this.onTextChangeEvent.bind(this);\r\n\t\tthis.onOrganizationChangeEvent = this.onOrganizationChangeEvent.bind(this);\r\n\t\tthis.handleCapIQIdChange = this.handleCapIQIdChange.bind(this);\r\n\t\tthis.onBPIDChangeEvent = this.onBPIDChangeEvent.bind(this);\r\n\t\tthis.onANIDChangeEvent = this.onANIDChangeEvent.bind(this);\r\n\t}\r\n\r\n\tcomponentWillMount() {\r\n\t\tthis.fetchUserValueStories();\r\n\t\t//if (this.props.newValueStory) {\r\n\t\t//this.dispatchAddRevenue(this.props.userData.AnnualRevenue)\r\n\t\t//}\r\n\r\n\t\t// Check for user inputted total spend\r\n\t\tconst firstSubLeverTotalSpend = this.props.userData.BusinessValueToYou ? this.props.userData.BusinessValueToYou[0].ValueDriver[0].SubLever[0].UserInput[0].UserInput : null\r\n\r\n\t\tif (firstSubLeverTotalSpend !== '' && firstSubLeverTotalSpend !== null) this.totalSpendTouched = true\r\n\r\n\t\t\r\n\t\tthis.setState({ valueStory: this.props.userData.ValueStoryName, organization: this.props.userData.Organization ,\r\n\t\t\t bpId: this.props.userData.BPId, anId: this.props.userData.ANId });\r\n\r\n\t\tif (this.props.userData.CapIQCompany && this.props.userData.CapIQId) {\r\n\t\t\tthis.setState({ selectedCapIQCompanyId: this.props.userData.CapIQCompany + ' | ' + this.props.userData.CapIQId }, this.callCapIQProcedure);\r\n\t\t}\r\n\r\n\t\tif (this.props.userData.Test !== undefined && this.props.userData.Test !== null) {\r\n\t\t\tthis.setState({ test: this.props.userData.Test });\r\n\t\t}\r\n\r\n\t\tif ((this.props.userData.Industry !== \"\" || this.props.userData.Industry !== 0) && this.props.userData.Organization !== \"\" && this.props.userData.ValueStoryName !== \"\") {\r\n\t\t\tthis.props.getCapIQDataBlank(false)\r\n\t\t} else {\r\n\t\t\tthis.props.getCapIQDataBlank(true)\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tthis.loadData();\r\n\t\t//this.initialFieldValues();\r\n\t\tthis.setState({ isCapIQLicesend: this.props.user.user.applicationFeatures.findIndex(a => a.Action === this.props.capIQ.capIQAction) > -1 ? true : false,\r\n\t\tenabledANID_BPID : this.props.user.userprofile !== undefined ? !this.props.user.userprofile.Roles[0].includes(\"Standard Internal User\") : false })\r\n\t\tthis.fetchUserSharedValueStories()\r\n\t\t//this.annualRevenueElement = document.getElementById('discovery.AnnualRevenue')\r\n\t\t//this.totalSpendInMillionsElement = document.getElementById('discovery.TotalSpend')\r\n\r\n\t\tthis.bindIndustryAndLocation();\r\n\r\n\r\n\t\tif (this.props.content.industries.indexOf(this.props.content.industries[0]) === 0) {\r\n\t\t\tthis.formDispatch(actions.setErrors('discovery.Industry', true))\r\n\t\t} else {\r\n\t\t\tthis.formDispatch(actions.change('discovery.Industry', this.props.content.industries[this.props.userData.Industry]));\r\n\t\t\tthis.formDispatch(actions.setErrors('discovery.Industry', false))\r\n\t\t}\r\n\r\n\t\t// set value story type default value \r\n\t\tthis.setState({ selectedValueStoryType: this.state.selectedValueStoryType !== undefined && this.state.selectedValueStoryType !== \"\" ? this.state.selectedValueStoryType : this.props.userData.ValueStoryType })\r\n\r\n\r\n\t\t// if (!validators.notZero(this.props.userData.AnnualRevenue) || this.props.userData.AnnualRevenue === '' || this.props.userData.AnnualRevenue === null) {\r\n\t\t// \tthis.formDispatch(actions.setErrors('discovery.AnnualRevenue', {\r\n\t\t// \t\trequired: validators.required(this.props.userData.AnnualRevenue) && this.props.validation.required,\r\n\t\t// \t\tisZero: (vals) => this.notZero(this.props.userData.AnnualRevenue) && this.props.validation.isZero\r\n\t\t// \t}))\r\n\t\t// } else {\r\n\t\t// \tthis.formDispatch(actions.setErrors('discovery.AnnualRevenue', false))\r\n\t\t// }\r\n\t}\r\n\r\n\tcomponentWillUnmount() {\r\n\r\n\t\t//Rollback value story updates if user doesn't click on Save button and jump to another screen.\r\n\t\t//This is required for Spend module NOT for Business Case because Save button is present for Spend module only.\r\n\t\tif (!this.props.isNewValueStory) {\r\n\r\n\t\t\tif ((this.props.originalUserData.VSId === this.props.userData.VSId) \r\n\t\t\t&& !this.props.compareKeyValuesInObject(this.props.originalUserData, this.props.userData)) {\r\n\r\n\t\t\t\tif (this.props.userData.Industry !== this.props.originalUserData.Industry)\r\n\t\t\t\t\tthis.handleIndustryChange(this.props.content.industries[this.props.originalUserData.Industry])\r\n\r\n\t\t\t\tif (this.props.userData.Location !== this.props.originalUserData.Location)\r\n\t\t\t\t\tthis.handleLocationChange(this.props.content.locations[this.props.originalUserData.Location])\r\n\r\n\t\t\t\tif (this.props.userData.CapIQId !== this.props.originalUserData.CapIQId)\r\n\t\t\t\t\tthis.props.dispatchUpdateCapIQId(this.props.originalUserData.CapIQId)\r\n\r\n\t\t\t\tif (this.props.userData.Organization !== this.props.originalUserData.Organization)\r\n\t\t\t\t\tthis.props.dispatchUpdateOrganization(this.props.originalUserData.Organization)\r\n\r\n\t\t\t\tif (this.props.userData.ValueStoryName !== this.props.originalUserData.ValueStoryName)\r\n\t\t\t\t\tthis.props.dispatchUpdateValueStoryName(this.props.originalUserData.ValueStoryName)\r\n\r\n\t\t\t\tif (this.props.userData.BPId !== this.props.originalUserData.BPId)\r\n\t\t\t\tthis.props.dispatchUpdateBPID(this.props.originalUserData.BPId)\r\n\t\t\t\t\r\n\t\t\t\tif (this.props.userData.ANId !== this.props.originalUserData.ANId)\r\n\t\t\t\tthis.props.dispatchUpdateANID(this.props.originalUserData.ANId)\r\n\r\n\t\t\t\tif (this.props.userData.ValueStoryType !== this.props.originalUserData.ValueStoryType)\r\n\t\t\t\t\tthis.props.dispatchUpdateValueStoryType(this.props.originalUserData.ValueStoryType)\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tfetchUserValueStories() {\r\n\t\tthis.props.fetchValueStoriesLoading(true)\r\n\t\tthis.props.fetchUserValueStories(this.props.user.user.Id)\r\n\t\t\t.then((result) => {\r\n\t\t\t\tthis.setState({userValueStoryData : result.data.Result})\r\n\t\t\t\tthis.props.fetchValueStoriesSuccess(result)\r\n\t\t\t\tfor (var i = 0; i < result.data.Result.length; i++) {\r\n\t\t\t\t\tvar obj = result.data.Result[i];\r\n\t\t\t\t\tif (obj.Id !== localStorage.getItem('id')) {\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\tfor (var i = 0; i < result.data.Result.length; i++) {\r\n\t\t\t\t\tvar obj = result.data.Result[i];\r\n\t\t\t\t\tif (obj.Id === localStorage.getItem('id')) {\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tthis.props.fetchValueStoriesFailure(error.response.data.Message)\r\n\t\t\t})\r\n\t}\r\n\r\n\tloadData() {\r\n\r\n\t\tvar array = [\r\n\t\t\t{ label: 'Total Invoice spend', value: 'Total Invoice spend' },\r\n\t\t\t{ label: 'Total Invoice Count', value: 'Total Invoice Count' },\r\n\t\t\t{ label: 'Total Purchase Order Spend', value: 'Total Purchase Order Spend' },\r\n\t\t\t{ label: 'Total Purchase Order Count', value: 'Total Purchase Order Count' },\r\n\t\t]\r\n\r\n\t\tconst group = { defaultValue: undefined, groupLabel: 'CapIqId', groupName: 'CapIqId' }\r\n\t\t\r\n\r\n\t\t/////// Load Indirect Solution in scope dropdown value ////////////////////\r\n this.props.fetchIndirectVisibleSolutionInScopeValues().then((response) => {\r\n if (response.status === 200) {\r\n if (response.data.Result.length > 0) {\r\n \r\n var indirectScopeValues=[];\r\n\t\t\t\t\tindirectScopeValues.push({ label: 'Select Scope', value: 'Select Scope' });\t\t\t\t\t\r\n\r\n if (response.data.Result !== null) {\r\n response.data.Result.forEach(item => {\r\n let value = Object.values(item)\r\n\t\t\t\t\t\t\tif(item.SOLUTION_IN_SCOPE_VALUE == 'Yes')\r\n \tindirectScopeValues.push({ label: item.SOLUTION_IN_SCOPE_NAME, value: item.SOLUTION_IN_SCOPE_NAME });\t\t\t\t\t\t\t\r\n });\r\n } \r\n\t\t\t\t\t\r\n\t\t\t\t\tlet indirectScope = this.props.userData.IndirectSolutionScope;\r\n\t\t\t\t\tlet directScope = this.props.userData.DirectSolutionScope;\r\n\r\n this.setState({ indirectSolutionScopeOption: indirectScopeValues,selectedIndirectScope : indirectScope });\r\n }\r\n\t\t\t}\r\n \r\n }).catch((error) => {\r\n //this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n })\r\n ///////////////////\r\n\r\n\t\tthis.setState({\r\n\t\t\tgroup: group,\r\n\t\t\titems: array\r\n\t\t})\r\n\r\n\t}\r\n\t\r\n\thandleIndirectScopeChange(value) {\r\n\t\tthis.props.dispatchIndirectScopeChange(this.props.content.indirectScopes.indexOf(value));\r\n\t\tthis.props.userData.indirectScopeValues = value;\r\n\t\tthis.setState({ selectedIndirectScope : value });\r\n\t\tthis.formDispatch(actions.change('discovery.IndirectScope', value));\r\n\t\tif (value === 'Select Scope') {\r\n\t\t\tthis.formDispatch(actions.setErrors('discovery.IndirectScope', true))\r\n\t\t\tthis.formDispatch(actions.change('discovery.IndirectScope', ''));\r\n\t\t} else {\r\n\t\t\tthis.formDispatch(actions.setErrors('discovery.IndirectScope', false))\r\n\t\t}\t\r\n\t}\t\r\n\t\r\n\thandleIndustryChange(value) {\r\n\t\tthis.props.dispatchIndustryChange(this.props.content.industries.indexOf(value))\r\n\t\tconst self = this;\r\n\t\tsetTimeout(() => {\r\n\t\t\tif (!self.props.newValueStory) {\r\n\t\t\t\tlet arr = []\r\n\t\t\t\tarr.push('4.3')\r\n\t\t\t\tarr.push('4.4')\r\n\t\t\t\tsubLeverChange('', arr)\r\n\t\t\t}\r\n\t\t\tif (!this.totalSpendTouched) this.props.dispatchUpdateTotalSpend(this.calculateTotalSpendFromRevenue())\r\n\t\t}, 1)\r\n\r\n\t\tthis.setState({ selectedIndustry : value });\r\n\t\tthis.formDispatch(actions.change('discovery.Industry', value));\r\n\r\n\r\n\t\tif (this.props.content.industries.indexOf(this.props.content.industries[0]) === 0) {\r\n\t\t\tthis.formDispatch(actions.setErrors('discovery.Industry', true))\r\n\t\t\tthis.formDispatch(actions.change('discovery.Industry', ''));\r\n\t\t} else {\r\n\t\t\tthis.formDispatch(actions.setErrors('discovery.Industry', false))\r\n\t\t}\r\n\r\n\t\t// added to make other spend tab disabled when this field are empty\r\n\t\tif (value !== this.props.content.industries[0] && this.props.userData.Organization !== \"\" && this.props.userData.ValueStoryName !== \"\") {\r\n\t\t\tthis.props.getCapIQDataBlank(false)\r\n\t\t} else {\r\n\t\t\tthis.props.getCapIQDataBlank(true)\r\n\t\t}\r\n\r\n\t}\r\n\r\n\thandleLocationChange(value) {\r\n\t\tvar result = this.props.content.regions.find(region => region.Country.toLowerCase() == value.toLowerCase())\r\n\t\tthis.props.dispatchLocationChange(this.props.content.locations.indexOf(value), result.Region)\r\n\t\t//this.getCurrency(this.props.content.locations.indexOf(value))\r\n\r\n\t\tsetTimeout(() => {\r\n\t\t\tif (!this.totalSpendTouched) this.props.dispatchUpdateTotalSpend(this.calculateTotalSpendFromRevenue())\r\n\t\t}, 1)\r\n\r\n\t\tthis.setState({ selectedLocation: value });\r\n\r\n\r\n\t}\r\n\r\n\thandleCurrencyChange(value) {\r\n\t\tvar result = this.state.currencyOption.find(currency => currency.value == value.value)\r\n\t\t//this.props.userData.CurrencyCode = value.value;\r\n\t\t//this.props.userData.Currency = this.props.currencySymbols[value.value];\r\n\r\n\t\tthis.setState({ selectedCurrency: value });\r\n\t\tthis.setState({ selectedCurrencySymbol: this.props.currencySymbols[value.value] });\r\n\t\tthis.getCurrency(value);\r\n\r\n\t\tthis.showModal(\"currencychange\");\r\n\t}\r\n\r\n\tdispatchAddRevenue(revenue) {\r\n\r\n\t\tthis.props.addRevenue(revenue)\r\n\r\n\t\tsetTimeout(() => {\r\n\t\t\tif ((this.props.userData.TotalSpend === '' || this.props.userData.TotalSpend === null) || !this.totalSpendTouched)\r\n\t\t\t\tthis.props.dispatchUpdateTotalSpend(this.calculateTotalSpendFromRevenue())\r\n\r\n\t\t\tthis.repositionInputCaret('discovery.AnnualRevenue', this.annualRevenueCaret, this.annualRevenueThousandsSeparatorCount, this.props.userData.AnnualRevenue)\r\n\t\t}, 1)\r\n\t}\r\n\r\n\tcalculateTotalSpendFromRevenue() {\r\n\t\t// Calculate Total Spend based on\r\n\t\t// Annual Revenue and Spend as Percentage of Revenue\r\n\t\t// if Annual Revenue is not empty\r\n\t\tif (this.props.userData.AnnualRevenue === '' || this.props.userData.AnnualRevenue === null) {\r\n\t\t\treturn ''\r\n\t\t} else {\r\n\t\t\t//const totalSpend = round(this.props.spendAsPercentageOfRevenue / 100 * this.props.userData.AnnualRevenue, 2)\r\n\t\t\tconst totalSpend = round(this.props.spendAsPercentageOfRevenue * this.props.userData.AnnualRevenue, 2)\r\n\t\t\treturn totalSpend\r\n\t\t}\r\n\t}\r\n\r\n\tgetTotalSpend(e) {\r\n\t\tthis.totalSpendTouched = true\r\n\t\tconst handleChange = this.props.handleChange\r\n\r\n\t\tlet value = onChangeRemoveMask(e, this.state.selectedCurrencySymbol)\r\n\r\n\t\t// Total Spend user input is empty string or null\r\n\t\tif (!this.props.newValueStory && (value !== '' || value !== null)) {\r\n\t\t\t// Update Total Spend rows for all sub levers\r\n\t\t\tthis.props.subLeverCalculationContent.forEach(function (obj) {\r\n\r\n\t\t\t\tconst subLever = getSubLeverIdObject(obj.id)\r\n\r\n\t\t\t\tif (subLeverHasTotalSpend(obj.id)) {\r\n\t\t\t\t\thandleChange(value, subLever, 0)\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t\t}\r\n\r\n\t\t// Update Total Spend in state\r\n\t\tthis.props.dispatchUpdateTotalSpend(value)\r\n\r\n\t\t// Update controlled input\r\n\t\tthis.props.dispatchTotalSpendChange(value)\r\n\r\n\t\t// add is-dirty state\r\n\t\tlet el = document.getElementById(\"discovery.TotalSpend\"),\r\n\t\t\tparent = el.parentNode\r\n\t\tparent.className += ' is-dirty'\r\n\r\n\t\tsetTimeout(() => {\r\n\t\t\t// Update caret position\r\n\t\t\tif (this.totalSpendInMillionsElement === document.activeElement) {\r\n\t\t\t\tthis.repositionInputCaret('discovery.TotalSpend', this.totalSpendCaret, this.totalSpendThousandsSeparatorCount, this.props.userData.TotalSpend)\r\n\t\t\t}\r\n\t\t}, 1)\r\n\t}\r\n\r\n\thandleTotalSpendBlur(e) {\r\n\t\tconst handleChange = this.props.handleChange\r\n\t\tlet value = onChangeRemoveMask(e, this.state.selectedCurrencySymbol)\r\n\r\n\t\t// Total Spend user input is empty string or null\r\n\t\tif (value === '' || value === null) {\r\n\t\t\t// Use default calculated Total Spend (Revenue * Industry BM percentage)\r\n\t\t\tvalue = this.calculateTotalSpendFromRevenue()\r\n\r\n\r\n\t\t\t// Clear Total Spend rows for all sub levers\r\n\t\t\tif (!this.props.newValueStory) {\r\n\t\t\t\tthis.props.subLeverCalculationContent.forEach(function (obj) {\r\n\r\n\t\t\t\t\tconst subLever = getSubLeverIdObject(obj.id)\r\n\r\n\t\t\t\t\tif (subLeverHasTotalSpend(obj.id)) {\r\n\t\t\t\t\t\thandleChange(null, subLever, 0)\r\n\t\t\t\t\t}\r\n\t\t\t\t})\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// Update Total Spend in state\r\n\t\tthis.props.dispatchUpdateTotalSpend(value)\r\n\r\n\t\t// Update controlled input\r\n\t\tthis.props.dispatchTotalSpendChange(value)\r\n\t}\r\n\r\n\tdispatchUpdateCurrency(currency) {\r\n\t\tlet encodedCurrency = encodeURIComponent(currency)\r\n\t\tthis.props.updateCurrency(encodedCurrency)\r\n\t}\r\n\r\n\tgetCurrency(value) {\r\n\t\tthis.dispatchUpdateCurrency(this.props.currencySymbols[value.value])\r\n\t\tthis.props.updateCurrencyCode(value.value)\r\n\t}\r\n\r\n\taddCurrencyMask(value) {\r\n\t\tif (value === '' || value === null || value === '0') {\r\n\r\n\t\t\tif (this.formDispatch !== undefined) {\r\n\t\t\t\tthis.formDispatch(actions.setErrors('discovery.AnnualRevenue', {\r\n\t\t\t\t\trequired: validators.required(this.props.userData.AnnualRevenue) && this.props.validation.required,\r\n\t\t\t\t\tisZero: (vals) => this.notZero(this.props.userData.AnnualRevenue) && this.props.validation.isZero\r\n\t\t\t\t}))\r\n\t\t\t\t//this.formDispatch(actions.reset('discovery.AnnualRevenue'))\r\n\t\t\t}\r\n\t\t\treturn ''\r\n\t\t} else {\r\n\t\t\tvar temp = this.formDispatch !== undefined ? this.formDispatch(actions.setErrors('discovery.AnnualRevenue', false)) : null\r\n\t\t\tconst regex = /\\d*\\.?\\d{0,2}/g\r\n\t\t\tconst filteredValue = regex.exec(value)\r\n\r\n\t\t\tif (filteredValue[0] === '') {\r\n\t\t\t\treturn this.state.selectedCurrencySymbol + formatThousands(this.value) + ' M'\r\n\t\t\t} else {\r\n\t\t\t\tthis.value = filteredValue[0]\r\n\t\t\t\treturn this.state.selectedCurrencySymbol + formatThousands(this.value) + ' M'\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\trepositionInputCaret(selector, lastCaretPosition, lastThousandsSeparatorCount, lastValue) {\r\n\t\t// Reposition Annual Revenue cursor after currency mask has been applied\r\n\t\tconst el = document.getElementById(selector)\r\n\t\tif (!el) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tlet val = el.value\r\n\t\tlet thousandsSeparatorCount = val.split(\",\").length - 1\r\n\t\tlet length = val.length\r\n\r\n\t\tlet caretPosition = 0\r\n\r\n\t\t// Don't let caret go past Millions postfix\r\n\t\tif (lastCaretPosition >= val.length - 2) {\r\n\t\t\tel.selectionStart = length - 2\r\n\t\t\tel.selectionEnd = length - 2\r\n\t\t\t// If input is not empty\r\n\t\t} else if (el === document.activeElement && (lastValue.indexOf('M') > -1)) {\r\n\t\t\tif (thousandsSeparatorCount > lastThousandsSeparatorCount) {\r\n\t\t\t\tcaretPosition = lastCaretPosition + 1\r\n\t\t\t} else if (thousandsSeparatorCount < lastThousandsSeparatorCount) {\r\n\t\t\t\tcaretPosition = lastCaretPosition - 1\r\n\t\t\t} else {\r\n\t\t\t\tcaretPosition = lastCaretPosition\r\n\t\t\t}\r\n\r\n\t\t\tel.selectionStart = caretPosition\r\n\t\t\tel.selectionEnd = caretPosition\r\n\t\t\t// If input is empty\r\n\t\t} else {\r\n\t\t\tel.selectionStart = length - 2\r\n\t\t\tel.selectionEnd = length - 2\r\n\t\t}\r\n\r\n\t\t//console.log('component did update', thousandsSeparatorCount, val, el.selectionStart, el.selectionEnd)\r\n\t}\r\n\r\n\r\n\tcomponentWillReceiveProps(nextProps) {\r\n\t\t/*\r\n\t\tUpdate Caret positions on user input\r\n\t\t */\r\n\t\t// const val = this.annualRevenueElement.value\r\n\t\t// this.annualRevenueCaret = this.annualRevenueElement.selectionStart\r\n\t\t// this.annualRevenueThousandsSeparatorCount = val.split(\",\").length - 1\r\n\t\t// this.annualRevenueValue = val\r\n\r\n\t\t// const val2 = this.totalSpendInMillionsElement.value\r\n\t\t// this.totalSpendCaret = this.totalSpendInMillionsElement.selectionStart\r\n\t\t// this.totalSpendThousandsSeparatorCount = val2.split(\",\").length - 1\r\n\t\t// this.totalSpendValue = val2\r\n\r\n\t\t//console.log('component will receive props', this.annualRevenueThousandsSeparatorCount, el.value, el.selectionStart, el.selectionEnd)\r\n\r\n\r\n\t\t//bind industry option\r\n\t\tif (this.props.content !== nextProps.content) {\r\n\t\t\tthis.props = nextProps;\r\n\r\n\t\t\tthis.bindIndustryAndLocation();\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentDidUpdate(nextProps, nextState) {\r\n\t\t// if (this.annualRevenueElement === document.activeElement) {\r\n\t\t// \tthis.repositionInputCaret('discovery.AnnualRevenue', this.annualRevenueCaret, this.annualRevenueThousandsSeparatorCount, this.annualRevenueValue)\r\n\t\t// }\r\n\r\n\t\t// if (this.totalSpendInMillionsElement === document.activeElement) {\r\n\t\t// \tthis.repositionInputCaret('discovery.TotalSpend', this.totalSpendCaret, this.totalSpendThousandsSeparatorCount, this.totalSpendValue)\r\n\t\t// }\r\n\r\n\t\tif (this.props !== undefined) {\r\n\t\t\tif (this.props.content.industries.indexOf(this.props.content.industries[this.props.userData.Industry]) > 0) {\r\n\t\t\t\tthis.formDispatch(actions.change('discovery.Industry', this.props.content.industries[this.props.userData.Industry]));\r\n\t\t\t} else {\r\n\t\t\t\tthis.formDispatch(actions.setErrors('discovery.Industry', true));\r\n\t\t\t\tthis.formDispatch(actions.reset('discovery.Industry'));\r\n\t\t\t}\r\n\r\n\t\t\t// if (this.props.userData.AnnualRevenue === '' || this.props.userData.AnnualRevenue === null || this.props.userData.AnnualRevenue === '0') {\r\n\r\n\t\t\t// \tif (this.formDispatch !== undefined) {\r\n\t\t\t// \t\tthis.formDispatch(actions.setErrors('discovery.AnnualRevenue', {\r\n\t\t\t// \t\t\trequired: validators.required(this.props.userData.AnnualRevenue) && this.props.validation.required,\r\n\t\t\t// \t\t\tisZero: (vals) => this.notZero(this.props.userData.AnnualRevenue) && this.props.validation.isZero\r\n\t\t\t// \t\t}))\r\n\t\t\t// \t\t//this.formDispatch(actions.reset('discovery.AnnualRevenue'))\r\n\t\t\t// \t}\r\n\t\t\t// \treturn ''\r\n\t\t\t// }\r\n\t\t}\r\n\t}\r\n\r\n\tbindIndustryAndLocation() {\r\n\t\t//bind industry option\r\n\t\tvar array = [];\r\n\t\tthis.props.content.industries.forEach((element) => {\r\n\t\t\tvar obj = {};\r\n\t\t\tobj.label = element;\r\n\t\t\tobj.value = element;\r\n\t\t\tarray.push(obj);\r\n\t\t});\r\n\t\tthis.setState({ industryOption: array });\r\n\r\n\t\t// set default value for industry\r\n\t\tthis.setState({ selectedIndustry: this.props.content.industries[this.props.userData.Industry] });\r\n\r\n\t\t//bind location option\t\t\r\n\t\tvar array1 = [];\r\n\t\tthis.props.content.locations.forEach((element) => {\r\n\t\t\tvar obj = {};\r\n\t\t\tobj.label = element;\r\n\t\t\tobj.value = element;\r\n\t\t\tarray1.push(obj);\r\n\t\t});\r\n\t\tthis.setState({ locationOption: array1 });\r\n\r\n\t\t//bind currency option\t\t\r\n\t\tvar array2 = [];\r\n\t\tlet currencyCodes = this.props.content.currencyCodes;\r\n\t\tfor (let i = 1; i < currencyCodes.length; i++) {\r\n\t\t\tlet obj = { label: currencyCodes[i], value: currencyCodes[i].split(' - ')[0] }\r\n\t\t\tarray2.push(obj);\r\n\t\t}\r\n\t\tthis.setState({ currencyOption: array2 });\r\n\r\n\t\t// set default value for location \r\n\t\tthis.setState({ selectedLocation: this.props.content.locations[this.props.userData.Location] });\r\n\r\n\t\tvar idx = array2.findIndex((element) => {\r\n\t\t\treturn element.value === this.props.userData.CurrencyCode\r\n\t\t})\r\n\r\n\t\tif (idx === -1) {\r\n\t\t\tidx = array2.findIndex((element) => {\r\n\t\t\t\treturn element.value === 'USD'\r\n\t\t\t})\r\n\t\t}\r\n\r\n\t\tlet selectedCurrencySym = this.props.currencySymbols[array2[idx].value];\r\n\r\n\t\tthis.getCurrency({ label: selectedCurrencySym, value: array2[idx].value })\r\n\r\n\r\n\t\t//this.dispatchUpdateCurrency(selectedCurrencySym);\r\n\r\n\t\tthis.setState({ selectedCurrencySymbol: selectedCurrencySym });\r\n\t\t// set default value for currency \r\n\t\tthis.setState({ selectedCurrency: array2[idx] });\r\n\t}\r\n\r\n\r\n\r\n\tonTextChangeEvent(event) {\r\n\t\tthis.setState({ valueStory: event.target.value !== undefined ? event.target.value : this.props.userData.ValueStoryName });\r\n\t\tthis.props.userData.ValueStoryName = event.target.value;\r\n\t\tthis.setState({ isValueStoryNameEdit: true });\r\n\r\n\t\tif ((event.target.value !== undefined && event.target.value !== \"\") && this.props.userData.Industry !== this.props.content.industries[0]\r\n\t\t\t&& this.props.userData.Organization !== \"\") {\r\n\t\t\tthis.props.getCapIQDataBlank(false)\r\n\t\t} else {\r\n\t\t\tthis.props.getCapIQDataBlank(true)\r\n\t\t}\r\n\t}\r\n\r\n\tonOrganizationChangeEvent(event) {\r\n\t\tthis.setState({ organization: event.target.value !== undefined ? event.target.value : this.props.userData.Organization });\r\n\t\tthis.props.userData.Organization = event.target.value;\r\n\t\tthis.props.updateOrganization(this.props.userData.Organization);\r\n\t\tthis.setState({ isOrganizationEdit: true });\r\n\r\n\t\tif ((event.target.value !== undefined && event.target.value !== \"\") && this.props.userData.Industry !== this.props.content.industries[0]\r\n\t\t\t&& this.props.userData.ValueStoryName !== \"\") {\r\n\t\t\tthis.props.getCapIQDataBlank(false)\r\n\t\t} else {\r\n\t\t\tthis.props.getCapIQDataBlank(true)\r\n\t\t}\r\n\t}\r\n\r\n\tonBPIDChangeEvent(event){\r\n this.setState({ bpId: event.target.value !== undefined ? event.target.value : this.props.userData.BPId });\r\n\t\tthis.props.userData.BPId = event.target.value;\r\n\t\tthis.props.updateBPID(this.props.userData.BPId);\r\n\t}\r\n\r\n\tonANIDChangeEvent(event){\r\n\t\tthis.setState({ anId: event.target.value !== undefined ? event.target.value : this.props.userData.ANId });\r\n\t\tthis.props.userData.ANId = event.target.value;\r\n\t\tthis.props.updateANID(this.props.userData.ANId);\r\n\t}\r\n\r\n\thandleCapIQIdChange(event) {\r\n\t\tthis.setState({ capIQId: event.target.value !== undefined ? event.target.value : this.props.userData.CapIQId });\r\n\t\tthis.props.userData.CapIQId = event.target.value;\r\n\t\tthis.setState({ isCapIQIdEdit: true });\r\n\t}\r\n\r\n\thandleValueStoryTypeChange(data){\r\n\t\tthis.props.userData.ValueStoryType = data.value\r\n\t\tthis.setState({ selectedValueStoryType : data.value})\r\n\t\tthis.props.updateValueStoryType(this.props.userData.ValueStoryType)\r\n\t}\r\n\r\n\tnotZero(vals) {\r\n\t\tif ((vals !== null && vals !== '' && Number.parseFloat(removeMask(vals, this.state.selectedCurrencySymbol)) === 0)) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\t\treturn true;\r\n\t}\r\n\r\n\tcloseCapIqPopUp() {\r\n\t\tthis.setState({ openCapIq: !this.state.openCapIq })\r\n\t}\r\n\r\n\tcloseANIDPopUp() {\r\n\t\tthis.setState({ openANID: !this.state.openANID })\r\n\t}\r\n\r\n\tcloseBPIDPopUp() {\r\n\t\tthis.setState({ openBPID: !this.state.openBPID })\r\n\t}\r\n\r\n\tcloseVsListPopUp() {\r\n\t\tthis.setState({ openVSList: !this.state.openVSList, vsLoad: '' })\r\n\t}\r\n\r\n\tcallCapIQProcedure() {\r\n\t\tlet str = this.state.selectedCapIQCompanyId\r\n\t\tlet id = str.split('|').pop().trim()\r\n\t\tthis.props.dispatchCapIQChange(id)\r\n\t\t// this.props.getSPCapitalIQData(id)\r\n\t\t// .then((result) => {\r\n\t\t// this.props.getSPCapitalIQSuccess(result)\r\n\t\t// \t\tthis.props.capIQFetchData(result.data.Result[0])\r\n\t\t// }).catch((error) => {\r\n\t\t// this.props.getSPCapitalIQFailure(error.response.data.Message)\r\n\t\t// })\r\n\t}\r\n\r\n\tcapIqDataCleared() {\r\n\t\tvar array2 = [];\r\n\t\tlet currencyCodes = this.props.content.currencyCodes;\r\n\t\tfor (let i = 1; i < currencyCodes.length; i++) {\r\n\t\t\tlet obj = { label: currencyCodes[i], value: currencyCodes[i].split(' - ')[0] }\r\n\t\t\tarray2.push(obj);\r\n\t\t}\r\n\t\tthis.setState({ currencyOption: array2 });\r\n\t\tlet idx = array2.findIndex((element) => {\r\n\t\t\treturn element.value === 'USD'\r\n\t\t})\r\n\r\n\r\n\t\tlet selectedCurrencySym = this.props.currencySymbols[array2[idx].value];\r\n\r\n\t\tthis.getCurrency({ label: selectedCurrencySym, value: array2[idx].value })\r\n\r\n\r\n\t\t//this.dispatchUpdateCurrency(selectedCurrencySym);\r\n\r\n\t\tthis.setState({ selectedCurrencySymbol: selectedCurrencySym });\r\n\t\t// set default value for currency \r\n\t\tthis.setState({ selectedCurrency: array2[idx] });\r\n\t\tthis.props.dispatchCapIQChange('clear')\r\n\t\tthis.setState({ capIQId: '', selectedCapIQCompanyId: '', selectedLocation: this.props.content.locations[0], selectedIndustry: this.props.content.industries[0] })\r\n\t}\r\n\r\n\tcapIqRadioButtonClicked(data) {\r\n\t\tthis.props.userData.CapIQId = data.COMPANY_ID\r\n\t\tthis.props.userData.CapIQCompany = data.COMPANY_NAME\r\n\t\tthis.props.userData.Organization = data.COMPANY_NAME\r\n\t\tthis.bindIndustryAndLocation()\r\n\t\tthis.formDispatch(actions.change('discovery.Organization', data.COMPANY_NAME));\r\n\t\tif (this.props.userData.CapIQCompany) {\r\n\t\t\tthis.setState({ selectedCapIQCompanyId: this.props.userData.CapIQCompany + ' | ' + this.props.userData.CapIQId, organization: data.COMPANY_NAME }, this.callCapIQProcedure);\r\n\t\t} else {\r\n\t\t\tthis.setState({ selectedCapIQCompanyId: '' })\r\n\t\t}\r\n\r\n\t\tthis.props.userData.AnnualRevenue = data.COMPANY_REVENUE ? data.COMPANY_REVENUE + '' : null;\r\n\t\tthis.dispatchAddRevenue(this.props.userData.AnnualRevenue)\r\n\t\t//this.props.userData.Location = data.COUNTRY_NAME\r\n\t\tlet idx = this.props.content.locations.findIndex(item => data.COUNTRY_NAME.toLowerCase() === item.toLowerCase())\r\n\t\tif (idx !== -1) {\r\n\t\t\tthis.props.userData.Location = idx;\r\n\t\t\tvar result = this.props.content.regions.find(region => region.Country.toLowerCase() == data.COUNTRY_NAME.toLowerCase())\r\n\t\t\tthis.props.dispatchLocationChange(idx, result.Region)\r\n\t\t\tthis.setState({ selectedLocation: this.props.content.locations[idx] });\r\n\t\t} else {\r\n\t\t\tthis.setState({ selectedLocation: this.props.content.locations[0] })\r\n\t\t}\r\n\r\n\t\tif (data.AVATAR_INDUSTRY) {\r\n\t\t\tconst industryIdx = this.props.content.industries.findIndex(item => data.AVATAR_INDUSTRY.toLowerCase() === item.toLowerCase());\r\n\t\t\tif (industryIdx !== -1) {\r\n\t\t\t\tthis.props.userData.Industry = industryIdx;\r\n\t\t\t\tthis.formDispatch(actions.change('discovery.Industry', this.props.content.industries[industryIdx]));\r\n\t\t\t\t//this.props.dispatchIndustryChange(this.props.content.industries[industryIdx])\r\n\t\t\t\tthis.setState({ selectedIndustry: this.props.content.industries[industryIdx] });\r\n\t\t\t} else {\r\n\t\t\t\tthis.setState({ selectedIndustry: this.props.content.industries[0] });\r\n\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (this.state.organization !== \"\" && this.props.content.industries[this.props.userData.Industry] !== this.props.content.industries[0]) {\r\n\t\t\tthis.props.getCapIQDataBlank(false)\r\n\t\t} else {\r\n\t\t\tthis.props.getCapIQDataBlank(true)\r\n\t\t}\r\n\t}\r\n\r\n\tanIdRadioButtonClicked(data) {\r\n\t\tthis.props.userData.ANId = data.BUYER_ANID\t\r\n\t\tthis.props.userData.BPId = this.props.userData.BPId === undefined || this.props.userData.BPId === \"\" ? data.BPID : this.props.userData.BPId\t\r\n\t\tthis.formDispatch(actions.change('discovery.ANID', data.BUYER_ANID));\r\n\t\tthis.formDispatch(actions.change('discovery.BPID', data.BPID));\r\n\t\tthis.props.getCapIQDataBlank(false)\r\n\t\tthis.setState({ openANID: !this.state.openANID })\r\n\t}\r\n\r\n\tanIdDataCleared() {\t\r\n\t\tthis.formDispatch(actions.change('discovery.ANID', ''));\r\n\t\tthis.props.userData.ANId = ''\t\r\n\t\tthis.closeANIDPopUp()\r\n\t}\r\n\r\n\tbpIdRadioButtonClicked(data) {\r\n\t\tthis.props.userData.BPId = data.BPID\r\n\t\tthis.formDispatch(actions.change('discovery.BPID', data.BPID));\r\n\t\tthis.props.getCapIQDataBlank(false)\r\n\t\tthis.setState({ openBPID: !this.state.openBPID })\r\n\t}\r\n\r\n\tbpIdDataCleared() {\t\r\n\t\tthis.formDispatch(actions.change('discovery.BPID', ''));\r\n\t\tthis.props.userData.BPId = ''\t\r\n\t\tthis.closeBPIDPopUp()\r\n\t}\r\n\r\n\tshowModal(action) {\r\n\t\tthis.refs[action].show()\r\n\t}\r\n\r\n\thideModal(action) {\r\n\t\tthis.refs[action].hide()\r\n\t}\r\n\r\n\tselectIsTestChk(e) {\r\n\t\tthis.setState({ test: !this.state.test }, () => {\r\n\t\t\tthis.props.userData.Test = this.state.test;\r\n\t\t});\r\n\t}\r\n\tfetchUserSharedValueStories() {\r\n\t\tthis.props.fetchValueStoriesLoading(true)\r\n\t\tthis.setState({ isError: false, message: '', })\r\n\t\tthis.props.fetchUserSharedValueStories(this.props.user.user.Id)\r\n\t\t\t.then((result) => {\r\n\t\t\t\tthis.props.fetchValueStoriesSuccess(result)\r\n\t\t\t\tvar obj = [];\r\n\t\t\t\tfor (var i = 0; i < result.data.Result.length; i++) {\r\n\r\n\t\t\t\t\tobj.push(result.data.Result[i])\r\n\t\t\t\t}\r\n\t\t\t\tlet temp = obj;\r\n\t\t\t\ttemp.forEach((element, i) => {\r\n\t\t\t\t\telement.content = false;\r\n\t\t\t\t\telement.index = i;\r\n\t\t\t\t});\r\n\t\t\t\tthis.setState({ valueStoriesShared: temp })\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tthis.props.fetchValueStoriesFailure(error.response.data.Message)\r\n\t\t\t\tthis.setState({\r\n\t\t\t\t\tmessage: error.response.data.Message, isLoading: false, isError: true\r\n\t\t\t\t})\r\n\t\t\t})\r\n\t}\r\n\tfetchValueStories() {\r\n\t\tlet searchText = this.state.organization;\r\n\t\tlet prevText = this.state.searchText;\r\n\t\tlet sharedVs = this.state.valueStoriesShared;\r\n\t\tif (searchText != prevText) {\r\n\t\t\tthis.props.fetchValueStoriesLoading(true)\r\n\t\t\tthis.setState({ isError: false, message: '', vsLoad: 'true' })\r\n\t\t\tthis.props.fetchValueStories(searchText)\r\n\t\t\t\t.then((result) => {\r\n\t\t\t\t\tthis.props.fetchValueStoriesSuccess(result)\r\n\t\t\t\t\tvar obj = [];\r\n\t\t\t\t\tfor (var i = 0; i < result.data.Result.length; i++) {\r\n\r\n\t\t\t\t\t\tobj.push(result.data.Result[i])\r\n\t\t\t\t\t}\r\n\t\t\t\t\tlet temp = obj;\r\n\t\t\t\t\tlet vsList;\r\n\t\t\t\t\ttemp.forEach((element, i) => {\r\n\t\t\t\t\t\telement.content = false;\r\n\t\t\t\t\t\telement.index = i;\r\n\t\t\t\t\t});\r\n\t\t\t\t\tif (sharedVs.length > 0) {\r\n\t\t\t\t\t\tvsList = temp.filter(obj => !sharedVs.filter(xobj => obj.VSID == xobj.VSId).length)\r\n\t\t\t\t\t}\r\n\t\t\t\t\tthis.setState({ valueStories: vsList, searchText: searchText, vsLoad: '' })\r\n\t\t\t\t}).catch((error) => {\r\n\t\t\t\t\tthis.props.fetchValueStoriesFailure(error.response.data.Message)\r\n\t\t\t\t\tthis.setState({\r\n\t\t\t\t\t\tmessage: error.response.data.Message, isLoading: false, isError: true\r\n\t\t\t\t\t})\r\n\t\t\t\t})\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n
\r\n \r\n
\r\n Search by customer name
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {this.props.content.searchBy}*
\r\n \r\n option.label === this.state.selectedOption)}\r\n noOptionsMessage={() => null}\r\n onChange={(value) => this.handleSelectionChange(value.label)}\r\n options={this.state.searchOption}\r\n isSearchable={false}\r\n validateOn=\"change\" styles={dropdownColourStyles}\r\n />\r\n
\r\n \r\n {/*
\r\n {'Filter By'}*
*/}\r\n \r\n
\r\n {/* \r\n
\r\n \r\n this._handleKeyDown(e)} onChange={this.onSearchTextChangeEvent} value={this.state.searchText} />\r\n \r\n
\r\n\r\n \r\n
*/}\r\n \r\n\r\n\r\n
\r\n \r\n option.label === this.state.selectedCountry)}\r\n noOptionsMessage={() => null}\r\n onChange={(value) => this.handleCountryChange(value.label)}\r\n options={this.state.countryArray}\r\n isSearchable={false}\r\n validateOn=\"change\" styles={dropdownColourStyles}\r\n />\r\n
\r\n {this.state.searchMessage}
\r\n \r\n
\r\n \r\n {this.state.errorMsg}
\r\n \r\n
\r\n\r\n \r\n \r\n {this.props.search.isLoading ?\r\n \r\n
\r\n Loading...
:\r\n this.state.peArray\r\n }\r\n {this.props.search.error}
\r\n \r\n \r\n {this.state.isLoading ?\r\n \r\n
\r\n Loading...
:\r\n this.state.companyDetails\r\n }\r\n {this.props.search.error}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\tthis.props.userData.VSId !== undefined ? this.props.content.vsId + \": \" + this.props.userData.VSId : null\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{this.state.organization}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t this.selectIsTestChk(e)} />\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t{this.props.content.testValueStory}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n
\r\n )\r\n };\r\n\r\n\t\treturn (\r\n\t\t\t\r\n
\r\n )\r\n };\r\n\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n \r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\tthis.props.userData.VSId !== undefined ? this.props.content.vsId + \": \" + this.props.userData.VSId : null\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{this.state.organization}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t{this.props.compareKeyValuesInObject(this.props.originalUserData, this.props.userData) ?\r\n\t\t\t\t\t\t\t\t\t\tthis.props.responseMessage : this.props.newValueStory ? '' : this.props.contentDiscovery.pendingUpdates}\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t this.selectIsTestChk(e)} />\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t{this.props.content.testValueStory}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\t\t\t\t\t\r\n\t\t\t\tLoading...
\r\n\t\t} else {\r\n\t\t\treturn (\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n \r\n
\r\n\t\t\t)\r\n\t\t}\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tui: state.content.ui,\r\n\t\tcontent: state.content.discovery,\r\n\t\tsubLeverCalculationContent: state.content.subLeverCalculations,\r\n\t\tuser: state.default,\r\n\t\tuserData: state.valueStory,\r\n\t\tspendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n\t\tform: state.discoveryForm.$form,\r\n\t\tslide: state.goToChoosePath,\r\n\t\tpriorities: state.priorities,\r\n\t\tvalueStoryHasErrored: state.valueStoryHasErrored,\r\n\t\tvalueStoryIsLoading: state.valueStoryIsLoading,\r\n\t\tbenchMarksData: state.benchMarksData,\r\n\t\tregions: state.regions,\r\n\t\tcompanyData: state.companyProfileData,\r\n\t\tselectedValueStory: state.selectedValueStory,\r\n\t\tnewValueStory: state.isNewValueStory,\r\n\t\thoverButton: state.syncMenuAndButton,\r\n\t\tsaveValueStoryAfterRedirect : state.saveValueStoryOnRedirect.changes\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tupdateValueStoryName: (valuestoryName) => dispatch(updateValueStoryName(valuestoryName)),\r\n\t\tupdateCapIQId: (capiqid) => dispatch(updateCapIQId(capiqid)),\r\n\t\tupdateOrganization: (organization) => dispatch(updateOrganization(organization)),\r\n\t\tchangeLocation: (location, spendAsPercentageOfRevenue) => dispatch(changeLocation(location, spendAsPercentageOfRevenue)),\r\n\t\tchangeIndustry: (industry, spendAsPercentageOfRevenue) => dispatch(changeIndustry(industry, spendAsPercentageOfRevenue)),\r\n\t\tupdateTotalSpend: (spend) => dispatch(updateTotalSpend(spend)),\r\n\t\tgoToChoosePath: (bool) => dispatch(goToChoosePath(bool)),\r\n\t\ttoggleValueDriver: (id, bool) => dispatch(toggleValueDriver(id, bool)),\r\n\t\ttoggleSubLever: (id, bool) => dispatch(toggleSubLever(id, bool)),\r\n\t\thandleChange: (value, subLeverId, rowNumber) => dispatch(updateUserInput(value, subLeverId, rowNumber)),\r\n\t\taddValueStory: (formValues) => dispatch(addValueStory(formValues)),\r\n\t\taddValueStorySuccess: (valueStory) => dispatch(addValueStorySuccess(valueStory)),\r\n\t\taddValueStoryFailure: (error) => dispatch(addValueStoryFailure(error)),\r\n\t\tupdateValueStory: (formValues) => dispatch(updateValueStory(formValues)),\r\n\t\tupdateValueStorySuccess: (valueStory) => dispatch(updateValueStorySuccess(valueStory)),\r\n\t\tupdateValueStoryFailure: (error) => dispatch(updateValueStoryFailure(error)),\r\n\t\topenValueStory: (VSId, Id) => dispatch(openValueStory(VSId, Id)),\r\n\t\topenValueStorySuccess: () => dispatch(openValueStorySuccess()),\r\n\t\topenValueStoryFailure: (error) => dispatch(openValueStoryFailure(error)),\r\n\t\tvalueStoryFetchDataSuccess: (valueStory) => dispatch(valueStoryFetchDataSuccess(valueStory)),\r\n\t\tinitPrioritiesItems: (items) => dispatch(initPrioritiesItems(items)),\r\n\t\tisNewValueStory: (data) => dispatch(isNewValueStory(data)),\r\n\t\tvalueStoryCurrentMenu: (menuItem) => dispatch(valueStoryCurrentMenu(menuItem)),\r\n\t\tshowValueStoryMenu: (menuItem) => dispatch(showValueStoryMenu(menuItem)),\r\n\t\tsyncMenuAndButton: (selectedButton) => dispatch(syncMenuAndButton(selectedButton)),\r\n\t\tgetCapIQDataBlank: bool => dispatch(getCapIQDataBlank(bool)),\r\n\t\tupdateBPID: (data) => dispatch(updateBPID(data)),\r\n\t\tupdateANID: (data) => dispatch(updateANID(data)),\r\n\t\tupdateValueStoryType: (data) => dispatch(updateValueStoryType(data)),\r\n\t\tpendingChanges: changes => dispatch(pendingChanges(changes)),\r\n\t\t//resetError: () => dispatch(resetError()),\r\n\t\tdefineScopeLoading: bool => dispatch(defineScopeLoading(bool)),\r\n\t\tsetSubTabMenu:(val)=>dispatch(setSubTabMenu(val)),\r\n setTabMenu:(val)=>dispatch(setTabMenu(val)),\r\n\t\tisValueStoryPage:(obj)=>dispatch(isValueStoryPage(obj)),\r\n\t\tsaveValueStoryOnRedirect: changes => dispatch(saveValueStoryOnRedirect(changes)),\r\n\t\tchangeIndirectSolutionScope: (value) => dispatch(changeIndirectSolutionScope(value)),\r\n\t\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SpendDiscoveryContainer)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport PopupButton from 'UI/PopupButton'\r\nimport Button from 'UI/Button'\r\nimport Popup from \"reactjs-popup\";\r\nimport Select from 'react-select'\r\nimport { Checkbox } from 'material-ui';\r\nimport {\r\n getYourFileSuccess,\r\n getYourFileLoading,\r\n resetError,\r\n getYourFileFailure,\r\n getYourFilesDetails,\r\n currentActiveRequest,\r\n UpdateRequestParameter,\r\n solutionScopeChanged,\r\n pendingChanges,\r\n fetchVisibleSolutionInScopeValues,\r\n isSpendParameterPage ,\r\n saveSpendParametersOnRedirect\r\n} from 'actions/spendActions'\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nimport { CheckboxE, PopupButtonE } from 'UI/CustomComponents/Controls';\r\nimport { formatThousands, formatThousandsForStrings } from 'utils/Utils'\r\nimport { changeModalStyle, changeModalContentStyle, backdropStyle } from 'Constants'\r\n\r\nconst changeBackdropStyle = Object.assign({}, backdropStyle);\r\nchangeBackdropStyle.zIndex = '1050';\r\n\r\nconst alertModalStyle = Object.assign({}, changeModalStyle);\r\nalertModalStyle.zIndex = '1060';\r\nalertModalStyle.width = '33%';\r\n\r\n\r\nclass AccountParametersContainer extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n disableCatalogInScope : false,\r\n RequestIds: [],\r\n fileDetails: [],\r\n originalState: '',\r\n open: false,\r\n isActive: false,\r\n respnseMessage: '',\r\n isError: false,\r\n test: JSON.stringify(this.props.spendDetails.currentActiveRequest),\r\n cardPaymentOption: [{ label: 'Yes', value: 'Yes' },\r\n { label: 'No', value: 'No' }],\r\n selectedSolutionScope: '',\r\n solutionScopeOption: [],\r\n indirectSolutionScopeAll: [],\r\n // { label: \"Buying\", value: \"Buying\" },\r\n // { label: \"Buying and Invoicing\", value: \"Buying and Invoicing\" },\r\n // { label: \"Commerce Automation\", value: \"Commerce Automation\" },\r\n // { label: \"SCC\", value: \"SCC\" },\r\n // { label: \"Supplier Choice\", value: \"Supplier Choice\" },\r\n // { label: \"SNAP\", value: \"SNAP\" },\r\n // { label: \"DSN\", value: \"DSN\" },\r\n // { label: \"RISE\", value: \"RISE\" }, \r\n // ],\r\n solutionInScopeFlag: false,\r\n modalDesc: 'Do you want to apply Solution in Scope changes to the Buyer Supplier Enablement Recommendations and Enablement Waves?'\r\n }\r\n this.handleParameterCheckChanged = this.handleParameterCheckChanged.bind(this)\r\n this.handleSolutionScopeChange = this.handleSolutionScopeChange.bind(this)\r\n this.onChange = this.onChange.bind(this)\r\n this.handleSaveParameter = this.handleSaveParameter.bind(this);\r\n this.showModal = this.showModal.bind(this)\r\n this.hideModal = this.hideModal.bind(this)\r\n //this.closePopUp = this.closePopUp.bind(this)\r\n this.newVariable = 0\r\n }\r\n\r\n showModal() {\r\n this.refs['alert'].show()\r\n }\r\n\r\n hideModal(action) {\r\n this.refs[action].hide()\r\n }\r\n\r\n componentWillUnmount() {\t\t\r\n\t\tsetTimeout(() => {\r\n\t\t\t//this.props.pendingChanges(null);\r\n\t\t\tthis.props.isSpendParameterPage(false);\r\n\t\t}, 1000);\r\n\t}\r\n\r\n componentDidMount() {\r\n // console.log(\"componentDidMount called\")\r\n this.props.isSpendParameterPage(true);\r\n this.setState({\r\n test: JSON.stringify(this.props.spendDetails.currentActiveRequest)\r\n })\r\n\r\n /////// Load Solution in scope dropdown value ////////////////////\r\n this.props.fetchVisibleSolutionInScopeValues().then((response) => {\r\n if (response.status === 200) {\r\n if (response.data.Result.length === 0) {\r\n this.setState({ responseMessage: this.props.content.noRecords, isLoading: false, isError: true });\r\n }\r\n else\r\n {\r\n console.log(\"api data-----------\", response.data.Result)\r\n var scopeValues=[];\r\n if (response.data.Result !== null) {\r\n response.data.Result.forEach(item => {\r\n let value = Object.values(item)\r\n scopeValues.push({ label: value[1], value: value[1] });\r\n });\r\n } \r\n\r\n this.setState({ indirectSolutionScopeAll: response.data.Result, solutionScopeOption: scopeValues,isLoading: false, responseMessage: '', isError: false });\r\n }\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n })\r\n ///////////////////\r\n }\r\n\r\n componentWillReceiveProps(nextProps, nextContext) {\r\n if (this.props.saveSpendParametersAfterRedirect !== nextProps.saveSpendParametersAfterRedirect && nextProps.saveSpendParametersAfterRedirect) {\r\n\t\t\tthis.handleSaveParameter();\r\n\t\t}\r\n\r\n if (nextProps.spendDetails.currentActiveRequest !== undefined &&\r\n this.state.fileDetails !== undefined &&\r\n this.state.test !== undefined && this.state.test.length > 0) {\r\n var actualValue = JSON.parse(this.state.test);\r\n if (actualValue.DMC_ID !== this.state.fileDetails.DMC_ID) {\r\n this.setState({\r\n test: JSON.stringify(nextProps.spendDetails.currentActiveRequest)\r\n })\r\n }\r\n\r\n\r\n }\r\n if (nextProps.spendDetails.currentActiveRequest !== this.props.fileDetails) {\r\n var disableCatalogInScope = false;\r\n if (nextProps.spendDetails.currentActiveRequest.SOLUTION_IN_SCOPE == \"Supply Chain Collaboration\") {\r\n disableCatalogInScope = true;\r\n nextProps.spendDetails.currentActiveRequest.CATEGORY_IN_SCOPE = false;\r\n }\r\n else {\r\n disableCatalogInScope = false;\r\n }\r\n\r\n this.setState({\r\n fileDetails: nextProps.spendDetails.currentActiveRequest, disableCatalogInScope: disableCatalogInScope\r\n })\r\n }\r\n }\r\n\r\n selectProductScopeAssignments(solutionInScope)\r\n\t{\r\n\t\tif(solutionInScope != 'Select Scope')\r\n\t\t{\r\n\t\t\tvar data = this.state.indirectSolutionScopeAll.filter(d => d.SolutionInScope_Value == solutionInScope);\r\n\t\t\tvar disableCatalogInScope = false;\r\n\t\t\tvar CATALOG_SCOPE = false; \r\n\r\n\t\t\t// this.props.userData.TransactionEligible = (data[0].TRAN_AN_SUPP_AUTO_ELIGIBLE == null || data[0].TRAN_AN_SUPP_AUTO_ELIGIBLE == \"No\" || data[0].TRAN_AN_SUPP_AUTO_ELIGIBLE == false) ? \"No\" : \"Yes\";\r\n\t\t\t// this.props.userData.UnclassifiedEligible = (data[0].UNCLASS_SUPP_AUTO_ELIGIBLE == null || data[0].UNCLASS_SUPP_AUTO_ELIGIBLE == \"No\" || data[0].UNCLASS_SUPP_AUTO_ELIGIBLE == false) ? \"No\" : \"Yes\";\r\n\t\t\t// this.props.userData.SCCEligible = (data[0].DIRECT_YES_SUPP_SCC_ELIGIBLE == null || data[0].DIRECT_YES_SUPP_SCC_ELIGIBLE == \"No\" || data[0].DIRECT_YES_SUPP_SCC_ELIGIBLE == false) ? \"No\" : \"Yes\";\r\n\t\t\t// this.props.userData.Fieldglass = (data[0].FLDG_IN_SCOPE == null || data[0].FLDG_IN_SCOPE == \"No\" || data[0].FLDG_IN_SCOPE == false) ? \"No\" : \"Yes\";\r\n\t\t\t// this.props.userData.FieldglassEligible = (data[0].FG_IN_AUTO_ELG == null || data[0].FG_IN_AUTO_ELG == \"No\" || data[0].FG_IN_AUTO_ELG == false) ? \"No\" : \"Yes\";\r\n\t\t\t// this.props.userData.SuppEligible =(data[0].TRANS_SAP_BUSS_NET_SUPP_ELIGIBLE == null || data[0].TRANS_SAP_BUSS_NET_SUPP_ELIGIBLE == \"No\" || data[0].TRANS_SAP_BUSS_NET_SUPP_ELIGIBLE == false) ? \"No\" : \"Yes\";\r\n\t\t\t// this.props.userData.CatalogScope = (data[0].CATALOG_SCOPE == null || data[0].CATALOG_SCOPE == \"No\" || data[0].CATALOG_SCOPE == false) ? \"No\" : \"Yes\";\r\n\r\n\r\n\t\t\tif(solutionInScope == \"Supply Chain Collaboration\"){\r\n\t\t\t\tdisableCatalogInScope = true;\r\n\t\t\t\t//this.props.userData.CatalogScope = \"No\"\r\n\t\t\t\tCATALOG_SCOPE = false;\r\n\t\t\t}\r\n\t\t\telse\r\n\t\t\t{\r\n\t\t\t\tdisableCatalogInScope = false;\r\n\t\t\t\tCATALOG_SCOPE = (data[0].CATEGORY_IN_SCOPE == null || data[0].CATEGORY_IN_SCOPE == \"No\" || data[0].CATEGORY_IN_SCOPE == false) ? false : true\r\n\t\t\t}\r\n\r\n var checkBoxState = this.state.fileDetails;\r\n checkBoxState.TRANSACTION_ANSUPPLIERS_AUTOMATION_ELIGIBLE = (data[0].TRAN_AN_SUPP_AUTO_ELIGIBLE == null || data[0].TRAN_AN_SUPP_AUTO_ELIGIBLE == \"No\" || data[0].TRAN_AN_SUPP_AUTO_ELIGIBLE == false) ? false : true ;\r\n checkBoxState.UNCLASSIFIED_AUTOMATION_ELIGIBLE = (data[0].UNCLASS_SUPP_AUTO_ELIGIBLE == null || data[0].UNCLASS_SUPP_AUTO_ELIGIBLE == \"No\" || data[0].UNCLASS_SUPP_AUTO_ELIGIBLE == false) ? false : true;\r\n checkBoxState.WHENDIRECT_SUPPLIER_SCC_ELIGIBLE = (data[0].DIRECT_YES_SUPP_SCC_ELIGIBLE == null || data[0].DIRECT_YES_SUPP_SCC_ELIGIBLE == \"No\" || data[0].DIRECT_YES_SUPP_SCC_ELIGIBLE == false) ? false : true;\r\n checkBoxState.FIELD_GLASS_SCOPE = (data[0].FLDG_IN_SCOPE == null || data[0].FLDG_IN_SCOPE == \"No\" || data[0].FLDG_IN_SCOPE == false) ? false : true;\r\n checkBoxState.FIELD_GLASS_ELIGIBLE = (data[0].FG_IN_AUTO_ELG == null || data[0].FG_IN_AUTO_ELG == \"No\" || data[0].FG_IN_AUTO_ELG == false) ? false : true;\r\n checkBoxState.SUPPLIER_ELIGIBLE = (data[0].SUPPLIER_ELIGIBLE == null || data[0].SUPPLIER_ELIGIBLE == \"No\" || data[0].SUPPLIER_ELIGIBLE == false) ? false : true;\r\n checkBoxState.CATEGORY_IN_SCOPE = CATALOG_SCOPE;\r\n\r\n\t\t\tthis.setState({fileDetails : checkBoxState,\r\n\t\t\t\tdisableCatalogInScope : disableCatalogInScope\r\n\t\t\t});\r\n\t\t}\r\n\t\telse\r\n\t\t{\r\n\t\t\t// this.props.userData.TransactionEligible = \"No\";\r\n\t\t\t// this.props.userData.UnclassifiedEligible = \"No\";\r\n\t\t\t// this.props.userData.SCCEligible = \"No\";\r\n\t\t\t// this.props.userData.Fieldglass = \"No\";\r\n\t\t\t// this.props.userData.FieldglassEligible = \"No\";\r\n\t\t\t// this.props.userData.SuppEligible = \"No\";\r\n\t\t\t// this.props.userData.CatalogScope = \"No\";\r\n\r\n var checkBoxState = this.state.fileDetails;\r\n checkBoxState.TRANSACTION_ANSUPPLIERS_AUTOMATION_ELIGIBLE = false;\r\n checkBoxState.UNCLASSIFIED_AUTOMATION_ELIGIBLE = false;\r\n checkBoxState.WHENDIRECT_SUPPLIER_SCC_ELIGIBLE = false;\r\n checkBoxState.FIELD_GLASS_SCOPE = false;\r\n checkBoxState.FIELD_GLASS_ELIGIBLE = false;\r\n checkBoxState.SUPPLIER_ELIGIBLE = false;\r\n checkBoxState.CATEGORY_IN_SCOPE = false;\r\n\r\n\t\t\tthis.setState({fileDetails : checkBoxState\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n\r\n\r\n // closePopUp(action) {\r\n // if (action === \"test\") {\r\n // var actualValue = JSON.parse(this.state.test);\r\n // this.props.spendDetails.currentActiveRequest = actualValue;\r\n // this.props.currentActiveRequest(actualValue);\r\n // this.setState({ fileDetails: actualValue })\r\n // }\r\n // this.setState({ open: !this.state.open })\r\n // // }\r\n // // else if (this.props.spendDetails !== undefined &&\r\n // // this.props.spendDetails.currentActiveRequest !== undefined) {\r\n // // this.setState({\r\n // // fileDetails: this.props.spendDetails.currentActiveRequest\r\n // // }, () => { this.setState({ open: !this.state.open }) })\r\n\r\n // // }\r\n // }\r\n\r\n handleParameterCheckChanged(e) {\r\n\r\n var checkBoxState = this.state.fileDetails;\r\n\r\n\r\n switch (e.target.name) {\r\n case this.props.content.supplierEligible:\r\n checkBoxState.SUPPLIER_ELIGIBLE = e.target.checked;\r\n break;\r\n case this.props.content.catalogInScope:\r\n checkBoxState.CATEGORY_IN_SCOPE = e.target.checked;\r\n break;\r\n case this.props.content.transactionEligible:\r\n checkBoxState.TRANSACTION_ANSUPPLIERS_AUTOMATION_ELIGIBLE = e.target.checked;\r\n break;\r\n case this.props.content.unclassifiedEligible:\r\n checkBoxState.UNCLASSIFIED_AUTOMATION_ELIGIBLE = e.target.checked;\r\n break;\r\n case this.props.content.sCCEligible:\r\n checkBoxState.WHENDIRECT_SUPPLIER_SCC_ELIGIBLE = e.target.checked;\r\n break;\r\n case this.props.content.fieldglass:\r\n checkBoxState.FIELD_GLASS_SCOPE = e.target.checked;\r\n checkBoxState.FIELD_GLASS_ELIGIBLE = (e.target.checked === false ? false : this.state.fileDetails.FIELD_GLASS_ELIGIBLE);\r\n break;\r\n case this.props.content.fieldglassEligible:\r\n checkBoxState.FIELD_GLASS_ELIGIBLE = (this.state.fileDetails.FIELD_GLASS_SCOPE === false ? false : e.target.checked);\r\n break;\r\n case this.props.content.cardPaymentInScope:\r\n checkBoxState.CARD_PAYMENT_INSCOPE = e.target.checked;\r\n break;\r\n }\r\n this.props.pendingChanges(true)\r\n this.setState({ fileDetails: checkBoxState });\r\n\r\n }\r\n\r\n onChange(e) {\r\n var textBoxState = this.state.fileDetails;\r\n\r\n textBoxState.ANNUAL_TRANSACTION_MAX = e.target.value;\r\n this.props.pendingChanges(true)\r\n this.setState({\r\n fileDetails: textBoxState\r\n });\r\n }\r\n\r\n onTermRationalizationChange(e) {\r\n var textBoxState = this.state.fileDetails;\r\n\r\n textBoxState.TERMS_RATIONALIZATION_THRESHOLD = e.target.value;\r\n this.props.pendingChanges(true)\r\n this.setState({\r\n fileDetails: textBoxState\r\n });\r\n }\r\n\r\n onSpotBuyThresholdChange(e) {\r\n var textBoxState = this.state.fileDetails;\r\n\r\n // textBoxState.SPOT_BUY_ELIGIBLE_THRESHOLD = parseFloat(e.target.value.replace(/,/g, ''));\r\n textBoxState.SPOT_BUY_ELIGIBLE_THRESHOLD = e.target.value;\r\n this.props.pendingChanges(true)\r\n this.setState({\r\n fileDetails: textBoxState\r\n });\r\n }\r\n\r\n onAvgInvSpendThresholdChange(e) {\r\n var textBoxState = this.state.fileDetails;\r\n\r\n textBoxState.AVG_INV_SPEND_TRANS_THRESHOLD = e.target.value;\r\n this.props.pendingChanges(true)\r\n this.setState({\r\n fileDetails: textBoxState\r\n });\r\n }\r\n\r\n onLowInvoiceCountThresholdChange(e) {\r\n var textBoxState = this.state.fileDetails;\r\n\r\n textBoxState.LOW_INVOICE_COUNT_THRESHOLD = e.target.value;\r\n this.props.pendingChanges(true)\r\n this.setState({\r\n fileDetails: textBoxState\r\n });\r\n }\r\n\r\n onCardPaymentInScopeChange(value) {\r\n var textBoxState = this.state.fileDetails;\r\n\r\n textBoxState.CARD_PAYMENT_INSCOPE = value === \"Yes\" ? true : false;\r\n this.props.pendingChanges(true)\r\n this.setState({\r\n fileDetails: textBoxState\r\n });\r\n }\r\n\r\n onDiscountThresholdChange(e) {\r\n var textBoxState = this.state.fileDetails;\r\n\r\n textBoxState.DISCOUNT_THRESHOLD = e.target.value;\r\n this.props.pendingChanges(true)\r\n this.setState({\r\n fileDetails: textBoxState\r\n });\r\n }\r\n\r\n handleSaveParameter() {\r\n this.hideModal(\"alert\")\r\n this.setState({ respnseMessage: '', isError: false })\r\n\r\n console.log(\"filedetails :\", this.state.fileDetails);\r\n\r\n var currentUpdate = this.state.fileDetails.ANNUAL_TRANSACTION_MAX.toString().replace(/^\\D+/g, '');\r\n this.state.fileDetails.ANNUAL_TRANSACTION_MAX = currentUpdate\r\n\r\n var termRationalizationValue = this.state.fileDetails.TERMS_RATIONALIZATION_THRESHOLD.toString().replace(',', '');\r\n this.state.fileDetails.TERMS_RATIONALIZATION_THRESHOLD = termRationalizationValue\r\n\r\n var discountThresholdValue = this.state.fileDetails.DISCOUNT_THRESHOLD.toString().replace(',', '');\r\n this.state.fileDetails.DISCOUNT_THRESHOLD = discountThresholdValue\r\n\r\n var lowInvoiceCountValue = this.state.fileDetails.LOW_INVOICE_COUNT_THRESHOLD.toString().replace(',', '');\r\n this.state.fileDetails.LOW_INVOICE_COUNT_THRESHOLD = lowInvoiceCountValue\r\n\r\n var cardPaymentInScopeValue = this.state.fileDetails.CARD_PAYMENT_INSCOPE;\r\n this.state.fileDetails.CARD_PAYMENT_INSCOPE = cardPaymentInScopeValue\r\n\r\n var termRationalizationValue = this.state.fileDetails.SPOT_BUY_ELIGIBLE_THRESHOLD.toString().replace(',', '');\r\n this.state.fileDetails.SPOT_BUY_ELIGIBLE_THRESHOLD = termRationalizationValue\r\n\r\n var termRationalizationValue = this.state.fileDetails.AVG_INV_SPEND_TRANS_THRESHOLD.toString().replace(',', '');\r\n this.state.fileDetails.AVG_INV_SPEND_TRANS_THRESHOLD = termRationalizationValue\r\n\r\n var solutionInScope = this.state.fileDetails.SOLUTION_IN_SCOPE;\r\n this.state.fileDetails.SOLUTION_IN_SCOPE = solutionInScope\r\n\r\n this.props.UpdateRequestParameter(this.state.fileDetails).then(response => {\r\n if (response.status === 200) {\r\n this.setState({\r\n isError: false,\r\n respnseMessage: 'Parameter/s updated successfully',\r\n test: JSON.stringify(this.state.fileDetails),\r\n solutionInScopeFlag: false\r\n })\r\n this.props.currentActiveRequest(this.state.fileDetails);\r\n this.props.pendingChanges(null)\r\n //this.setState({ open: !this.state.open })\r\n //this.closePopUp('close');\r\n }\r\n else {\r\n this.setState({\r\n isError: true,\r\n respnseMessage: 'An error has occured'\r\n })\r\n }\r\n this.props.saveSpendParametersOnRedirect(false);\r\n }).catch((error) => {\r\n this.setState({\r\n isError: true,\r\n respnseMessage: 'An error has occured'\r\n })\r\n })\r\n }\r\n\r\n handleSolutionScopeChange(value) {\r\n var objFileDetails = this.state.fileDetails;\r\n\r\n var disableCatalogInScope = false;\r\n if (value.label == \"Supply Chain Collaboration\") {\r\n disableCatalogInScope = true;\r\n objFileDetails.CATEGORY_IN_SCOPE = false;\r\n }\r\n else {\r\n disableCatalogInScope = false;\r\n }\r\n\r\n\r\n objFileDetails.SOLUTION_IN_SCOPE = value.label;\r\n this.props.solutionScopeChanged(value.label)\r\n this.props.pendingChanges(true)\r\n this.setState({\r\n disableCatalogInScope: disableCatalogInScope, fileDetails: objFileDetails, isError: true, respnseMessage: 'Warning! Buyer Supplier Enablement Recommendations will be changed.', solutionInScopeFlag: true\r\n },()=>this.selectProductScopeAssignments(value.label));\r\n }\r\n\r\n render() {\r\n var displayInfoDesc = (itemDesc) => {\r\n return (\r\n \r\n\t\t\t\t\t\t this.formDispatch = dispatch}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t{this.compareKeyValuesInObject(this.state.originalUserData, this.props.userData) ?\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.state.reponseMessage : this.props.newValueStory ? '' : this.props.content.pendingUpdates}\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t{this.props.newValueStory ?\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
:\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
}\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t this.formDispatch = dispatch}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\tCreate a New Value Story\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t{/*\r\n\t\t\t\t\t\t\t\t\t\t\t this.hideModal()}\r\n\t\t\t\t\t\t\t\t\t\t\t\tcolor /> \r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t */}\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
*/}\r\n\t\t\t\t\t\t\t\t{/* \r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t{/* \r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t{this.compareKeyValuesInObject(this.state.originalUserData, this.props.userData) ?\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.state.reponseMessage : this.props.newValueStory ? '' : this.props.content.pendingUpdates}\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t{this.props.newValueStory ?\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
:\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
}\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
*/}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t this.formDispatch = dispatch}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\tCreate a New Value Story\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t{/*\r\n\t\t\t\t\t\t\t\t\t\t\t this.hideNewVSCreationPopup()}\r\n\t\t\t\t\t\t\t\t\t\t\t\tcolor /> \r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t */}\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
*/}\r\n\t\t\t\t\t\t\t\t{/* \r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t{/* \r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
*/}\r\n\t\t\t\t\t\t\t\r\n
\r\n )\r\n };\r\n //onClick={() => this.showModal('AccountParameters')}\r\n\r\n return (\r\n this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined && this.props.spendDetails.currentActiveRequest !== \"\" ?\r\n \r\n
\r\n :\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {this.state.isError ?\r\n
\r\n {this.state.respnseMessage}
:\r\n {this.state.respnseMessage}
\r\n }\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n\r\n
\r\n \r\n {this.props.content.enablementInsight}\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.inScopeSolution}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.inScopeSolution)}\r\n
\r\n \r\n option.value === this.state.fileDetails.SOLUTION_IN_SCOPE\r\n )}\r\n onChange={value => this.handleSolutionScopeChange(value)}\r\n options={this.state.solutionScopeOption}\r\n isSearchable={false}\r\n noOptionsMessage={() => null} />\r\n
\r\n \r\n {this.props.content.productScope}\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.supplierEligible}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.supplierEligible)}\r\n
\r\n \r\n
\r\n \r\n this.handleParameterCheckChanged(e)}\r\n name={this.props.content.supplierEligible} value={this.props.content.supplierEligible} />\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.catalogInScope}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.catalogInScope)}\r\n
\r\n \r\n
\r\n \r\n this.handleParameterCheckChanged(e)}\r\n name={this.props.content.catalogInScope} value={this.props.content.catalogInScope} />\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.transactionEligible}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.transactionEligibleDesc)}\r\n
\r\n \r\n
\r\n \r\n this.handleParameterCheckChanged(e)}\r\n name={this.props.content.transactionEligible} value={this.props.content.transactionEligible} />\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.unclassifiedEligible}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.unclassifiedEligible)}\r\n
\r\n \r\n
\r\n \r\n this.handleParameterCheckChanged(e)}\r\n name={this.props.content.unclassifiedEligible} \r\n value={this.props.content.unclassifiedEligible} />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.sCCEligible}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.sCCEligibleDesc)}\r\n
\r\n \r\n
\r\n \r\n this.handleParameterCheckChanged(e)}\r\n checked={this.state.fileDetails !== undefined && this.state.fileDetails.WHENDIRECT_SUPPLIER_SCC_ELIGIBLE !== undefined ? this.state.fileDetails.WHENDIRECT_SUPPLIER_SCC_ELIGIBLE : false}\r\n name={this.props.content.sCCEligible} value={this.props.content.sCCEligible} />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.fieldglass}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.fieldglassDesc)}\r\n
\r\n \r\n
\r\n \r\n this.handleParameterCheckChanged(e)}\r\n checked={this.state.fileDetails !== undefined && this.state.fileDetails.FIELD_GLASS_SCOPE !== undefined ? this.state.fileDetails.FIELD_GLASS_SCOPE : false}\r\n name={this.props.content.fieldglass} value={this.props.content.fieldglass} />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.fieldglassEligible}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.fieldglassEligibleDesc)}\r\n
\r\n \r\n
\r\n \r\n {/* this.handleParameterCheckChanged(e)}\r\n checked={this.state.fileDetails !== undefined && this.state.fileDetails.FIELD_GLASS_ELIGIBLE !== undefined ? this.state.fileDetails.FIELD_GLASS_ELIGIBLE : false}\r\n name={this.props.content.fieldglassEligible} value={this.props.content.fieldglassEligible} /> */}\r\n this.handleParameterCheckChanged(e)}\r\n checked={this.state.fileDetails !== undefined && this.state.fileDetails.FIELD_GLASS_ELIGIBLE !== undefined ? this.state.fileDetails.FIELD_GLASS_ELIGIBLE : false}\r\n name={this.props.content.fieldglassEligible} value={this.props.content.fieldglassEligible} />\r\n
\r\n \r\n {this.props.content.workingCapitalScope}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.termRationalizationThreshold}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.termsRationalizationDesc)}\r\n
\r\n \r\n this.onTermRationalizationChange(e)} type=\"text\" id=\"maxvalue\" />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.discountThreshold}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.discountThresholdDesc)}\r\n
\r\n \r\n this.onDiscountThresholdChange(e)} type=\"text\" id=\"maxvalue\" />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.lowInvoiceCountThreshold}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.lowInvoiceCountDesc)}\r\n
\r\n \r\n this.onLowInvoiceCountThresholdChange(e)} type=\"text\" id=\"maxvalue\" />\r\n
\r\n \r\n
\r\n\r\n {/* //Spot Buy parameter */}\r\n {/* \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.cardPaymentInScope}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.cardPaymentInScopeDesc)}\r\n
\r\n \r\n
\r\n \r\n this.handleParameterCheckChanged(e)}\r\n name={this.props.content.cardPaymentInScope} value={this.props.content.cardPaymentInScope} />\r\n
\r\n */}\r\n
*/}\r\n \r\n {this.props.content.spotBuy}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.spotBuyThreshold}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.spotBuyDesc)}\r\n
\r\n \r\n this.onSpotBuyThresholdChange(e)} type=\"text\" id=\"maxvalue\" />\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.avgInvoiceThreshold}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.avgInvoiceDesc)}\r\n
\r\n \r\n this.onAvgInvSpendThresholdChange(e)} type=\"text\" id=\"maxvalue\" />\r\n
\r\n \r\n {this.props.content.title}\r\n
\r\n \r\n
\r\n\r\n\r\n {/* \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.annualTransactionMax}\r\n
\r\n \r\n
\r\n \r\n {displayInfoDesc(this.props.content.annualTransactionMaxDesc)}\r\n
\r\n \r\n this.onChange(e)} type=\"text\" id=\"maxvalue\" />\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.state.modalDesc}\r\n
\r\n \r\n
\r\n \r\n this.hideModal(\"alert\")}\r\n color /> \r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\nconst mapStateToProps = state => {\r\n return {\r\n // language: state.language,\r\n userData: state.valueStory,\r\n user: state.default,\r\n content: state.content.spendAnalysis.accountParameters,\r\n validation: state.content.validation,\r\n Industries: state.content.discovery.form.industries,\r\n spendDetails: state.spendDetails,\r\n saveSpendParametersAfterRedirect : state.saveSpendParametersOnRedirect.changes\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n getYourFileLoading: bool => dispatch(getYourFileLoading(bool)), \r\n UpdateRequestParameter: requestDetails => dispatch(UpdateRequestParameter(requestDetails)),\r\n currentActiveRequest: (requestDetails) => dispatch(currentActiveRequest(requestDetails)),\r\n solutionScopeChanged: (val) => dispatch(solutionScopeChanged(val)),\r\n pendingChanges: (val) => dispatch(pendingChanges(val)),\r\n fetchVisibleSolutionInScopeValues: () => dispatch(fetchVisibleSolutionInScopeValues()),\r\n isSpendParameterPage: obj => dispatch(isSpendParameterPage(obj)),\r\n saveSpendParametersOnRedirect: changes => dispatch(saveSpendParametersOnRedirect(changes)),\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(AccountParametersContainer)\r\n","import React, { PureComponent } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport classNames from \"classnames\";\r\nimport Select from 'react-select'\r\nimport { path } from 'Constants'\r\nimport moment from 'moment'\r\n\r\nimport {\r\n\tfetchSpendCollectionColumnDetails,\r\n\tuploadSpendCollectionData,\r\n\tgetCollectCustomerSpendDetails,\r\n\tsaveCollectCustomerSpend,\r\n\tgetSpendFilesData,\r\n\tgetSpendQualityAssessmentData\r\n} from 'actions/spendActions'\r\n\r\nimport classnames from 'classnames'\r\n// Utils\r\nimport { isDuplicate } from 'utils/Utils'\r\nimport DatePicker from 'react-datepicker';\r\n//import \"react-datepicker/dist/react-datepicker.css\";\r\n\r\n// Settings\r\n\r\nimport { validators, modalStyle, dropdownColourStyles } from 'Constants'\r\nimport { ControlTextE, ScreenE, SelectE } from 'UI/CustomComponents/Controls';\r\nimport dataCollectionTemplate from '../../spendDataCollection-Template/Data_Collection_Template.xlsx'\r\n\r\nimport * as FileSaver from \"file-saver\";\r\nimport * as XLSX from 'xlsx';\r\nimport { Workbook } from 'exceljs/dist/exceljs';\r\n\r\nconst autoHeightModalStyle = Object.assign({}, modalStyle)\r\nautoHeightModalStyle.height = 'auto'\r\nautoHeightModalStyle.width = '30%'\r\n\r\nconst defaultOptions = [\r\n\t{ value: 0, label: \"\" }];\r\n\r\nexport class CollectCustomerSpend extends PureComponent {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t\tthis.state = {\r\n\t\t\tvalueStory: '',\r\n\t\t\tisLoading: false,\r\n\t\t\tcustomerPhaseValues: [\r\n { value: \"SALES\", label: \"Sales\" },\r\n { value: \"POST_SALES\", label: \"Post Sale Spend Analysis and Enablement Planning(Flight Plan)\" },\r\n { value: \"WAVE_EXECUTION\", label: \"Wave Execution\" }\r\n ],\r\n\t\t\tselectedCustomerPhaseValue: 'WAVE_EXECUTION',\r\n\t\t\trequestTypeValues:[\r\n\t\t\t\t{ value: \"NETWORK_MATCH_CLASSIFICATION\", label: \"Network Match & Classification\" },\r\n { value: \"NETWORK_MATCH\", label: \"Network Match Only\" },\r\n { value: \"SUPPLIER_CLASSIFICATION\", label: \"Supplier Classification Only\" }\r\n\t\t\t\t],\r\n\t\t\tselectedRequestType: 'NETWORK_MATCH_CLASSIFICATION',\r\n\t\t\trequestorGroupValues:[\r\n\t\t\t\t{ value: \"ACOUNT_EXECUTIVE\", label: \"Account Executive\" },\r\n { value: \"CEE\", label: \"CEE\" },\r\n { value: \"FIELDGLASS\", label: \"Fieldglass\" },\r\n\t\t\t\t{ value: \"NETWORK_DEP_LEAD\", label: \"Network Deployment Lead\" },\r\n\t\t\t\t{ value: \"NETWORK_DIRECTOR\", label: \"Network Director\" },\r\n { value: \"NETWORK_ENABLE_LEAD\", label: \"Network Enablement Lead\" },\r\n { value: \"PAYABLES\", label: \"Payables\" },\r\n\t\t\t\t{ value: \"SNAP\", label: \"SNAP\" },\r\n { value: \"SOLUTION_CONSULTANT\", label: \"Solution Consultant\" },\r\n { value: \"SPOT_BUY\", label: \"Spot Buy\" },\r\n\t\t\t\t{ value: \"VALUE_ADVISORY\", label: \"Value Advisory\" },\r\n\t\t\t\t{ value: \"SCC\", label: \"SCC\" },\r\n\t\t\t],\r\n\t\t\tselectedRequestorGroup: 'FIELDGLASS',\r\n\t\t\turgencyValues:[\r\n\t\t\t\t{ value: \"LOW\", label: \"Low\" },\r\n { value: \"NORMAL\", label: \"Normal\" },\r\n { value: \"URGENT\", label: \"Urgent\" },\r\n\t\t\t],\r\n\t\t\tselectedUrgency: 'NORMAL',\r\n\t\t\toutputFormatValues:[\r\n\t\t\t\t{ value: \"RUNDMC_OUTPUT\", label: \"Run DMC Spend Analysis Output\" },\r\n { value: \"SUPPLIERENABLEMENT_OUTPUT\", label: \"Supplier Enablement Output\" },\r\n { value: \"BOTH\", label: \"Both Run DMC Spend Analysis Output & Supplier Enablement Output\" },\r\n\t\t\t],\r\n\t\t\tselectedOutputFormat: 'RUNDMC_OUTPUT',\r\n\t\t\texcelUploadColumns: [],\r\n\t\t\tcustomerSpend:{\r\n\t\t\t\tVS_ID: this.props.userData.VSId,\r\n\t\t\t\tREQUESTOR_NAME: this.props.userData.ValueStoryCreator,\r\n\t\t\t\tOUTPUT_FORMAT: 'RUNDMC_OUTPUT',\r\n\t\t\t\tCUSTOMER_EMAIL: this.props.user.user.Email,\r\n\t\t\t\tREQUESTOR_GROUP: 'FIELDGLASS',\r\n\t\t\t\tCUSTOMER_PROSPECT_PHASE: 'WAVE_EXECUTION',\r\n\t\t\t\tNEED_BY_DATE: new Date(),\r\n\t\t\t\tREQUEST_TYPE: 'NETWORK_MATCH_CLASSIFICATION',\r\n\t\t\t\tURGENCY: 'NORMAL',\r\n\t\t\t\tUSER_ID : this.props.user.user.Email\r\n\t\t\t},\r\n\t\t\tisDataSave: false,\r\n\t\t\terrorMessagesArr: [],\r\n\t\t\twarningMessageArr: [],\r\n\t\t\tspendFilesData: [],\r\n\t\t\tduplicateWarning: '',\r\n\t\t\tqualityAssessmentData: [],\r\n\t\t\tneedByDate: new Date(),\r\n\t\t\toriginalUserData: Object.assign({}, this.props.userData),\r\n\t\t\tfileName: ''\r\n \t}\r\n\t\t\r\n\tthis.onRequestorChangeEvent = this.onRequestorChangeEvent.bind(this);\r\n\tthis.onCustomerEmailChangeEvent = this.onCustomerEmailChangeEvent.bind(this);\r\n\tthis.handleDateChange = this.handleDateChange.bind(this);\r\n\tthis.compareKeyValuesInObject = this.compareKeyValuesInObject.bind(this)\r\n\t}\r\n\r\n\tcomponentDidMount(){\t\t\r\n\t\tthis.getCollectCustomerSpendDetails()\r\n\t\tthis.fetchSpendCollectionColumnDetails()\r\n\t}\r\n\r\n\tcomponentWillReceiveProps(){\r\n\t\tvar customerSpend_obj = this.state.customerSpend\r\n\t\tcustomerSpend_obj.REQUESTOR_NAME = this.props.userData.ValueStoryCreator\t\r\n\t\tthis.setState({ customerSpend: customerSpend_obj})\r\n\t}\r\n\r\n\tgetCollectCustomerSpendDetails() {\r\n\t\tif(this.props.userData.VSId !==undefined && this.props.userData.VSId !== null)\r\n\t\t{\r\n\t\tvar param = {\r\n\t\t\tVS_ID: this.props.userData.VSId,\r\n\t\t\tUSER_ID: this.props.user.user.Email\r\n\t\t}\r\n\t\tthis.props.getCollectCustomerSpendDetails(param)\r\n\t\t .then((response) => {\r\n\t\t\tif (response.data.Result.length > 0) {\r\n\t\t\tvar objState = this.state.customerSpend\r\n\t\t\t\r\n\t\t\t// var date = new Date(response.data.Result[0].NEED_BY_DATE); \r\n\t // objState.NEED_BY_DATE =((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) + '/' + ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) + '/' + date.getFullYear();\r\n\t objState.REQUESTOR_NAME = response.data.Result[0].REQUESTOR_NAME\r\n\t\t\tobjState.OUTPUT_FORMAT = response.data.Result[0].OUTPUT_FORMAT\r\n\t\t\tobjState.CUSTOMER_EMAIL = response.data.Result[0].CUSTOMER_EMAIL\r\n\t\t\tobjState.REQUESTOR_GROUP = response.data.Result[0].REQUESTOR_GROUP\r\n\t\t\tobjState.CUSTOMER_PROSPECT_PHASE = response.data.Result[0].CUSTOMER_PROSPECT_PHASE\r\n\t\t\tobjState.REQUEST_TYPE = response.data.Result[0].REQUEST_TYPE\r\n\t\t\tobjState.URGENCY = response.data.Result[0].URGENCY\r\n\r\n\t this.setState({ savedData:response.data.Result, customerSpend: objState, selectedCustomerPhaseValue: response.data.Result[0].CUSTOMER_PROSPECT_PHASE,\r\n\t\t\tselectedOutputFormat: response.data.Result[0].OUTPUT_FORMAT, selectedRequestType: response.data.Result[0].REQUEST_TYPE, \r\n\t\t\tselectedRequestorGroup: response.data.Result[0].REQUESTOR_GROUP, selectedUrgency: response.data.Result[0].URGENCY,\r\n\t\t needByDate: response.data.Result[0].NEED_BY_DATE, isDataSave: true\r\n\t \t})\r\n\t\t\t} else {\r\n\t\t\t //this.setState({ responseMsg: 'No result found.', isError: 'Yes', isLoading: false })\r\n\t\t\t}\r\n\t\r\n\t\t }).catch((error) => {\r\n\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n\t\t\t}\r\n\t\t })\r\n\t\t}\r\n\t }\r\n\r\n\tfetchSpendCollectionColumnDetails() {\r\n\t\tthis.props.fetchSpendCollectionColumnDetails()\r\n\t\t .then((response) => {\r\n\t\t\tif (response.data.Result.length > 0) {\r\n\t\t\t this.setState({ excelUploadColumns: response.data.Result })\r\n\t\t\t} else {\r\n\t\t\t this.setState({ responseMsg: 'No result found.', isError: 'Yes', isLoading: false })\r\n\t\t\t}\r\n\t\r\n\t\t }).catch((error) => {\r\n\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n\t\t\t}\r\n\t\t })\r\n\t }\r\n\r\n\thandleOuputFormatChange(data)\r\n\t{\r\n\t var customerSpend_obj = this.state.customerSpend\r\n\t customerSpend_obj.OUTPUT_FORMAT = data.value\t\r\n this.setState({ selectedOutputFormat: data.value, customerSpend: customerSpend_obj})\r\n\t}\r\n\r\n\thandleUrgencyChange(data){\r\n\t var customerSpend_obj = this.state.customerSpend\r\n\t customerSpend_obj.URGENCY = data.value\t\r\n this.setState({selectedUrgency:data.value, customerSpend: customerSpend_obj})\r\n\t}\r\n\r\n\thandleRequestTypeChange(data){\r\n\t\tvar customerSpend_obj = this.state.customerSpend\r\n\t customerSpend_obj.REQUEST_TYPE = data.value\t\r\n\t\tthis.setState({selectedRequestType : data.value, customerSpend: customerSpend_obj })\r\n\t}\r\n\r\n\thandleRequestorGroupChange(data){\r\n\t\tvar customerSpend_obj = this.state.customerSpend\r\n\t customerSpend_obj.REQUESTOR_GROUP = data.value\t\r\n\t\tvar fileName= \"\"\r\n\t\tswitch(data.value){\r\n\t\t\tcase 'NETWORK_DEP_LEAD':\r\n fileName = \"Executive_Template.xlsx\" \r\n\t\t\t\tbreak;\r\n\t\t\tcase 'ACOUNT_EXECUTIVE':\r\n\t\t\t\tfileName = \"Sales_Template.xlsx\" \r\n\t\t\t\tbreak;\t\t\r\n\t\t\tcase '':\r\n\t\t\t\tbreak;\t\r\n\t\t\t\tdefault:\r\n\t\t\t\t\tfileName = \"Executive_Template.xlsx\" \t\r\n\t\t}\r\n\r\n\t\tthis.setState({selectedRequestorGroup : data.value, customerSpend: customerSpend_obj, templateFileName: fileName})\r\n\t}\r\n\r\n\thandleCustomerPhaseChange(data){\r\n\t\tvar customerSpend_obj = this.state.customerSpend\r\n\t customerSpend_obj.CUSTOMER_PROSPECT_PHASE = data.value\t\r\n\t\tthis.setState({selectedCustomerPhaseValue : data.value, customerSpend: customerSpend_obj})\r\n\t}\r\n\r\n\thandleDateChange(date)\r\n\t{\r\n\t\tvar customerSpend_obj = this.state.customerSpend\r\n\t customerSpend_obj.NEED_BY_DATE = date\t\r\n\t\tthis.setState({ customerSpend: customerSpend_obj, needByDate: date})\r\n\t}\r\n\r\n\tonExpandClick(e){\r\n\t\tswitch(e.target.id){\r\n\t\t case \"loadReq\":\r\n\t\t\tthis.setState({ isExpand: ! this.state.isExpand})\r\n\t\t\tbreak;\r\n\t\t \r\n\t\t}\r\n\t}\r\n\r\n\t handleChange(e){\r\n\t\tconst files = e.target.files;\r\n\t\t\tif (files && files[0]) this.setState({ file: files[0], fileName: files[0].name, responseMsg: '', isError: 'No', isLoading: false, isSaveInProgress: false }, this.handleFile); \r\n\t }\r\n\t\r\n\t handleFile() {\r\n\t\tthis.setState({ responseMsg: \"\", isLoading: true, isSaveInProgress: true})\r\n\t\tconst reader = new FileReader();\r\n\t\tconst rABS = !!reader.readAsBinaryString;\r\n\t\r\n\t\treader.onload = (e) => {\r\n\t\t\t/* Parse data */\r\n\t\t\tconst bstr = e.target.result;\r\n\t\t\tconst wb = XLSX.read(bstr, { type: rABS ? 'binary' : 'array', bookVBA: true });\r\n\r\n\t\t\t/* Get first worksheet */\r\n\t\t\tconst wsname = wb.SheetNames[2];\r\n\t\t\tconst ws = wb.Sheets[wsname];\r\n\t\t\tvar excelCellAddress = ws['!ref'].split(':')\r\n\t\t\tvar startCellAddress = \"A3\"\r\n\t\t\tvar endCellAddress = excelCellAddress[1]\r\n\t\t\t/* Convert array of arrays */\r\n\t\t\tws['!ref'] = startCellAddress + \":\" + endCellAddress\r\n\r\n\t\t\t//console.log(\"excel cell address: \", ws['!ref'])\r\n\t\t\tconst data = XLSX.utils.sheet_to_json(ws, { defval: \"\" }); \r\n\t\t\tthis.setState({excelData: data}) \r\n\t\t\t\r\n\t\t\t//let excelData = data.filter(d=>d[\"Update Flag\"]) \r\n\t\t\tlet excelData = data\r\n\t\t\t//console.log(\"excel data: \", data)\r\n\t\t\t\r\n\t\t\t//validate invalid copy/paste data\r\n\t\t\t// excelData.map((item)=>{\r\n\t\t\t// //Validation Code goes here\r\n\t\t\t// }\r\n\t\t\t//) \r\n\t\r\n\t\t\tif(excelData.length == 0){\r\n\t\t\t this.setState({ responseMsg: this.props.content.invalidFileSelect, isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n\t\t\t return; \r\n\t\t\t}else{\r\n\t\t\t\tthis.handleSubmit()\r\n\t\t\t}\r\n\t\t};\r\n\t \r\n\t\tif (rABS) {\r\n\t\t\treader.readAsBinaryString(this.state.file);\r\n\t\t} else {\r\n\t\t\treader.readAsArrayBuffer(this.state.file);\r\n\t\t};\r\n\t\r\n\t\t//e.target.files = this.state.invalid && null\t\r\n\t } \r\n\r\n\t handleSubmit = (e) => {\r\n\t\t//let rowData = this.state.excelData.filter(d=>d[\"Update Flag\"])\t\t\r\n\t\tlet rowData = this.state.excelData\r\n\t \r\n\t\tif(rowData.length == 0){\r\n\t\tthis.setState({ responseMsg: this.props.content.noRecordForUpdate, isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n\t\treturn; \r\n\t\t}\r\n\t\t\r\n\t\t// this.setState({isLoading: true, isSaveInProgress: true})\r\n\t\tconst columnDetails = this.state.excelUploadColumns;\r\n\t\t\r\n\t\tconst recordsToInsert = [];\r\n\t\t rowData.forEach((item) => {\r\n\t\t\t\t// var excelDate = item[columnDetails.filter(d=>d.field === \"USER_DATE_FIELD\")[0].UI_FIELD_NAME]; \r\n\t\t\t\t// var converted_date;\r\n\t\t\t\t \r\n\t\t\t\t// if(isNaN(excelDate) || excelDate === \"\"){\r\n\t\t\t\t// converted_date = excelDate \r\n\t\t\t\t// }else{\r\n\t\t\t\t// var date = new Date(Math.round((item[columnDetails.filter(d=>d.field === \"USER_DATE_FIELD\")[0].UI_FIELD_NAME] - (25567 + 1)) * 86400 * 1000)); \r\n\t\t\t\t// var year = date.getFullYear();\r\n\t\t\t\t// var month = (1 + date.getMonth()).toString();\r\n\t\t\t\t// month = month.length > 1 ? month : '0' + month;\r\n\t \r\n\t\t\t\t// var day = date.getDate().toString();\r\n\t\t\t\t// day = day.length > 1 ? day : '0' + day;\r\n\t\t\t\t// converted_date = month + '/' + day + '/' + year;\r\n\t\t\t\t// } \r\n\t\t\t \r\n\t\t\t const record = {\r\n\t\t\t\t VS_ID: this.props.userData.VSId, \r\n\t\t\t\t DMC_ID: this.props.spendDetails.currentActiveRequest.DMC_ID, \r\n\t\t\t\t USER_ID: this.props.user.user.Email,\r\n\t \r\n\t\t\t\t TEMPLATE_NAME: \"SPEND_DATA_COLLECTION_TEMPLATE\",\t\t\t\t \r\n\t\t\t\t VENDOR_ID: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_ID\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_NAME: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_NAME\")[0].UI_FIELD_NAME],\r\n\t\t\t\t ERP_SYSTEM: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"ERP_SYSTEM\")[0].UI_FIELD_NAME],\r\n\t\t\t\t ERP_INVOICE_SPEND: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"ERP_INVOICE_SPEND\")[0].UI_FIELD_NAME],\r\n\t\t\t\t ERP_INVOICE_SPEND_CURRENCY: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"ERP_INVOICE_SPEND_CURRENCY\")[0].UI_FIELD_NAME],\r\n\t\t\t\t EXCHANGE_RATE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"EXCHANGE_RATE\")[0].UI_FIELD_NAME],\r\n\t\t\t\t ERP_INVOICE_SPEND_IN_STANDARD_CURRENCY: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"ERP_INVOICE_SPEND_IN_STANDARD_CURRENCY\")[0].UI_FIELD_NAME],\r\n\t\t\t\t STANDARD_ERP_INVOICE_SPEND_CURRENCY: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"STANDARD_ERP_INVOICE_SPEND_CURRENCY\")[0].UI_FIELD_NAME],\r\n\t\t\t\t ERP_INVOICE_COUNT: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"ERP_INVOICE_COUNT\")[0].UI_FIELD_NAME],\r\n\t\t\t\t INVOICE_METHOD: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"INVOICE_METHOD\")[0].UI_FIELD_NAME],\r\n\t\t\t\t INVOICE_ORIGINATION_COUNTRY: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"INVOICE_ORIGINATION_COUNTRY\")[0].UI_FIELD_NAME],\r\n\t\t\t\t ERP_PO_SPEND: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"ERP_PO_SPEND\")[0].UI_FIELD_NAME],\r\n\t\t\t\t ERP_PO_SPEND_CURRENCY: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"ERP_PO_SPEND_CURRENCY\")[0].UI_FIELD_NAME],\r\n\t\t\t\t ERP_PO_COUNT: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"ERP_PO_COUNT\")[0].UI_FIELD_NAME],\r\n\t\t\t\t BUYER_REGION: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"BUYER_REGION\")[0].UI_FIELD_NAME],\r\n\t\t\t\t BUSINESS_UNIT: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"BUSINESS_UNIT\")[0].UI_FIELD_NAME],\r\n\t\t\t\t ERP_COMMODITY_CODE_OR_DESCRIPTION_TIER_1: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"ERP_COMMODITY_CODE_OR_DESCRIPTION_TIER_1\")[0].UI_FIELD_NAME],\r\n\t\t\t\t ERP_COMMODITY_CODE_OR_DESCRIPTION_TIER_2: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"ERP_COMMODITY_CODE_OR_DESCRIPTION_TIER_2\")[0].UI_FIELD_NAME],\r\n\r\n\t\t\t\t VENDOR_TAX_ID: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_TAX_ID\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_VAT_ID: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_VAT_ID\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_DUNS: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_DUNS\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_AN_ID: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_AN_ID\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_ADDRESS_LINE_1: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_ADDRESS_LINE_1\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_ADDRESS_LINE_2: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_ADDRESS_LINE_2\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_CITY: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_CITY\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_STATE_PROVINCE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_STATE_PROVINCE\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_POSTAL_CODE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_POSTAL_CODE\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_COUNTRY_CODE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_COUNTRY_CODE\")[0].UI_FIELD_NAME],\r\n\t\t\t\t FISCAL_YEAR: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"FISCAL_YEAR\")[0].UI_FIELD_NAME],\r\n\t\t\t\t SITE_ID: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"SITE_ID\")[0].UI_FIELD_NAME],\r\n\t\t\t\t SITE_AUXILIARY_ID: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"SITE_AUXILIARY_ID\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_REMIT_NAME: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_REMIT_NAME\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_REMIT_ADDRESS_LINE_1: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_REMIT_ADDRESS_LINE_1\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_REMIT_ADDRESS_LINE_2: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_REMIT_ADDRESS_LINE_2\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_REMIT_ADDRESS_LINE_3: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_REMIT_ADDRESS_LINE_3\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_REMIT_CITY: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_REMIT_CITY\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_REMIT_PROVINCE_STATE_REGION: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_REMIT_PROVINCE_STATE_REGION\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_REMIT_POSTAL_CODE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_REMIT_POSTAL_CODE\")[0].UI_FIELD_NAME],\r\n\t\t\t\t REMITTANCE_ID: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"REMITTANCE_ID\")[0].UI_FIELD_NAME],\r\n\t\t\t\t SYSTEM_ID: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"SYSTEM_ID\")[0].UI_FIELD_NAME],\r\n\t\t\t\t WAVE_WAVE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"WAVE_WAVE\")[0].UI_FIELD_NAME],\r\n\t\t\t\t RELATIONSHIP_REQUEST_EMAIL_ADDRESS: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"RELATIONSHIP_REQUEST_EMAIL_ADDRESS\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_EMAIL_ADDRESS: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_EMAIL_ADDRESS\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_PHONE_COUNTRY_CODE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_PHONE_COUNTRY_CODE\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_PHONE_AREA_CODE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_PHONE_AREA_CODE\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_PHONE_NUMBER: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_PHONE_NUMBER\")[0].UI_FIELD_NAME],\r\n\t\t\t\t VENDOR_PHONE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"VENDOR_PHONE\")[0].UI_FIELD_NAME],\r\n\r\n\t\t\t\t CONTACT_FIRST_NAME: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"CONTACT_FIRST_NAME\")[0].UI_FIELD_NAME],\r\n\t\t\t\t CONTACT_LAST_NAME: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"CONTACT_LAST_NAME\")[0].UI_FIELD_NAME],\r\n\t\t\t\t CONTACT_PHONE_COUNTRY_CODE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"CONTACT_PHONE_COUNTRY_CODE\")[0].UI_FIELD_NAME],\r\n\t\t\t\t CONTACT_PHONE_AREA_CODE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"CONTACT_PHONE_AREA_CODE\")[0].UI_FIELD_NAME],\r\n\t\t\t\t CONTACT_PHONE_NUMBER: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"CONTACT_PHONE_NUMBER\")[0].UI_FIELD_NAME],\r\n\t\t\t\t CONTACT_PHONE_EXTENSION: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"CONTACT_PHONE_EXTENSION\")[0].UI_FIELD_NAME],\r\n\t\t\t\t CONTACT_PHONE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"CONTACT_PHONE\")[0].UI_FIELD_NAME],\r\n\t\t\t\t PREFERRED_LANGUAGE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"PREFERRED_LANGUAGE\")[0].UI_FIELD_NAME],\r\n\t\t\t\t BUYING_ORGANIZATION_ANID: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"BUYING_ORGANIZATION_ANID\")[0].UI_FIELD_NAME],\r\n\t\t\t\t LEGACY_VENDOR_ID: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"LEGACY_VENDOR_ID\")[0].UI_FIELD_NAME],\r\n\t\t\t\t SPOT_QUOTE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"SPOT_QUOTE\")[0].UI_FIELD_NAME],\r\n\t\t\t\t PROPOSED_ENABLEMENT_MODE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"PROPOSED_ENABLEMENT_MODE\")[0].UI_FIELD_NAME],\r\n\t\t\t\t AN_SUPPLIER_GROUP: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"AN_SUPPLIER_GROUP\")[0].UI_FIELD_NAME],\r\n\t\t\t\t SEGMENT_SEGMENT: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"SEGMENT_SEGMENT\")[0].UI_FIELD_NAME],\r\n\t\t\t\t QUOTE_GROUP: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"QUOTE_GROUP\")[0].UI_FIELD_NAME],\r\n\r\n\r\n\t\t\t\t USER_DEFINED_TEXT_FIELD_1: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"USER_DEFINED_TEXT_FIELD_1\")[0].UI_FIELD_NAME],\r\n\t\t\t\t USER_DEFINED_TEXT_FIELD_2: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"USER_DEFINED_TEXT_FIELD_2\")[0].UI_FIELD_NAME],\r\n\t\t\t\t USER_DEFINED_TEXT_FIELD_3: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"USER_DEFINED_TEXT_FIELD_3\")[0].UI_FIELD_NAME],\r\n\t\t\t\t USER_DEFINED_TEXT_FIELD_4: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"USER_DEFINED_TEXT_FIELD_4\")[0].UI_FIELD_NAME],\r\n\t\t\t\t USER_DEFINED_TEXT_FIELD_5: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"USER_DEFINED_TEXT_FIELD_5\")[0].UI_FIELD_NAME],\r\n\t\t\t\t USER_DEFINED_NUMERIC_FIELD_1: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"USER_DEFINED_NUMERIC_FIELD_1\")[0].UI_FIELD_NAME],\r\n\t\t\t\t USER_DEFINED_NUMERIC_FIELD_2: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"USER_DEFINED_NUMERIC_FIELD_2\")[0].UI_FIELD_NAME],\r\n\t\t\t\t USER_DEFINED_NUMERIC_FIELD_3: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"USER_DEFINED_NUMERIC_FIELD_3\")[0].UI_FIELD_NAME],\r\n\t\t\t\t USER_DEFINED_NUMERIC_FIELD_4: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"USER_DEFINED_NUMERIC_FIELD_4\")[0].UI_FIELD_NAME],\r\n\t\t\t\t USER_DEFINED_NUMERIC_FIELD_5: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"USER_DEFINED_NUMERIC_FIELD_5\")[0].UI_FIELD_NAME],\t \r\n\t\t\t\t USER_DEFINED_DATE_FIELD_1: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"USER_DEFINED_DATE_FIELD_1\")[0].UI_FIELD_NAME],\r\n\r\n\t\t\t\t DIRECT_SPEND: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"DIRECT_SPEND\")[0].UI_FIELD_NAME],\r\n\t\t\t\t EXCLUSION_REASON: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"EXCLUSION_REASON\")[0].UI_FIELD_NAME],\r\n\t\t\t\t ACT_CODE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"ACT_CODE\")[0].UI_FIELD_NAME],\r\n\t\t\t\t UNSPSC_CODE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"UNSPSC_CODE\")[0].UI_FIELD_NAME],\r\n\t\t\t\t CAPIQ_CODE: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"CAPIQ_CODE\")[0].UI_FIELD_NAME],\r\n\t\t\t\t SLA_FLAG: item[columnDetails.filter(d=>d.HANA_FIELD_NAME === \"SLA_FLAG\")[0].UI_FIELD_NAME],\r\n\r\n\t\t\t\t \r\n\t\t\t\t // USER_DATE_FIELD: converted_date\r\n\t\t\t\t \r\n\t\t\t };\r\n\t\t\t recordsToInsert.push(record); \r\n\t\t })\r\n\t\t this.setState({ recordInserted: recordsToInsert})\r\n\t\t this.props.uploadSpendCollectionData(recordsToInsert)\r\n\t\t\t .then((response) => {\r\n\t\t\t\t this.setState({ responseMsg: 'Record/s has been uploaded successfully', isError: 'No', isLoading: false, isSaveInProgress: false })\r\n\t\t\t\t //document.getElementById(\"excelFile\").value = \"\";\r\n\t\t\t\t this.getSpendQualityAssessmentData()\t\r\n\t\t\t }).catch((error) => {\r\n\t\t\t\t if (error.stack.includes('Network Error')) {\r\n\t\t\t\t\t //this.props.defineScopeLoading(false)\r\n\t\t\t\t\t this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n\t\t\t\t }\r\n\t\t\t\t else {\r\n\t\t\t\t\t //this.props.defineScopeLoading(false)\r\n\t\t\t\t\t // this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n\t\t\t\t }\r\n\t\t\t })\r\n\t\t}\r\n\r\n\t\tonRequestorChangeEvent(event) {\r\n\t\t\tvar customerSpend_obj = this.state.customerSpend\r\n\t\t\tcustomerSpend_obj.REQUESTOR_NAME = event.target.value\t\r\n\t\t\tthis.setState({ customerSpend: customerSpend_obj})\t\t\t\t\t\t\r\n\t\t}\r\n\r\n\t\tonCustomerEmailChangeEvent(event) {\r\n\t\t\tthis.setState({ customerEail: event.target.value });\r\n\t\t\t//this.props.userData.ValueStoryName = event.target.value;\t\t\t\t\r\n\t\t}\r\n\r\n\t\thandleSave(){\r\n\t\t\tthis.props.saveCollectCustomerSpend(this.state.customerSpend)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tthis.setState({ responseMsg: 'Record/s has been save successfully', isError: 'No', isLoading: false, isSaveInProgress: false })\t\t\r\n\t\t\t\tthis.setState({isDataSave: true})\t\t\t\t\t\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\t//this.props.defineScopeLoading(false)\r\n\t\t\t\t\tthis.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\t//this.props.defineScopeLoading(false)\r\n\t\t\t\t // this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t\t\t\r\n\t\t}\r\n\r\n\t\tgetSpendQualityAssessmentData() {\r\n\t\t\tthis.props.getSpendQualityAssessmentData()\r\n\t\t\t .then((response) => {\r\n\t\t\t\tif (response.data.Result.length > 0) {\r\n\t\t\t\t this.setState({ qualityAssessmentData: response.data.Result })\r\n\t\t\t\t this.doQualityAssesment()\r\n\t\t\t\t} else {\r\n\t\t\t\t this.setState({ responseMsg: 'No result found. Please try reimporting the file.', isError: 'Yes', isLoading: false })\r\n\t\t\t\t}\r\n\t\t\r\n\t\t\t }).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n\t\t\t\t}\r\n\t\t\t })\r\n\t\t }\r\n\r\n\t\t doQualityAssesment() {\r\n\t\t\t // Do quality assesment check on uploaded data. \r\n\t\t\t let uploadedExcelData = this.state.recordInserted //response.data.Result\r\n\t\t\t //let spendFilesQualityFields = this.state.spendFilesQualityFields;\r\n\t\t\t let errorMessagesArr = []\r\n\t\t\t let warningMessageArr = []\r\n\t\t\t let total = uploadedExcelData.length;\r\n\t\t\t let mappedColumns = this.state.columnMap;\r\n\t\t\t let qualityArr = this.state.qualityAssessmentData;\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t//quality assessment check \t\t\t \r\n\t\t\tfor (let i = 0; i < qualityArr.length; i++) {\r\n\t\t\t//let key = qualityArr[i]\r\n\t\t\t//let fieldName = mappedColumns.filter(item => item.ColumnField == key)\r\n\t\t\tlet count = 0;\r\n\t\t\tuploadedExcelData.map(item => {\r\n\t\t\t if (item[qualityArr[i].UI_HANA_FIELD_NAME] == 0 || item[qualityArr[i].UI_HANA_FIELD_NAME] == null || item[qualityArr[i].UI_HANA_FIELD_NAME] == '') {\r\n\t\t\t\tcount++;\r\n\t\t\t }\r\n\t\t\t})\r\n\t\t\tlet percent = ((count / total) * 100).toFixed(2);\r\n\t\t\tif (percent >= qualityArr[i].WARNING_BOTTOM_RANGE && percent <= qualityArr[i].WARNING_TOP_RANGE) {\r\n\t\t\t\t let msg = `Your spend file is missing ${percent}% of ${qualityArr[i].FIELD_NAME}. ${qualityArr[i].RECOMMENDATION_TEXT}`\r\n\t\t\t //errorMessagesArr.push(msg)\r\n\t\t\t if(qualityArr[i].WARNING_COLOR == 'Yellow') warningMessageArr.push(msg)\r\n\t\t\t if (qualityArr[i].WARNING_COLOR == 'Red') {\r\n\t\t\t\tlet errMsg = `Your spend file is missing ${percent}% of ${qualityArr[i].FIELD_NAME}. ${qualityArr[i].RECOMMENDATION_TEXT}`\r\n\t\t\t\terrorMessagesArr.push(errMsg)\r\n\t\t\t }\r\n\t\t\t} \r\n\t\t\t }\r\n\t\t\tthis.setState({ isLoading: false, uploadedExcelData: uploadedExcelData, errorMessagesArr: errorMessagesArr, warningMessageArr: warningMessageArr })\r\n\t\t\t\r\n\t\t }\r\n\r\n\t\tcompareKeyValuesInObject(originalUserData, userData) {\r\n\t\t\tif (originalUserData !== undefined && originalUserData !== null && userData !== undefined) {\r\n\t\t\t\tif (\r\n\t\t\t\toriginalUserData.REQUESTOR_NAME == userData[0].REQUESTOR_NAME\r\n\t\t\t\t&& originalUserData.OUTPUT_FORMAT == userData[0].OUTPUT_FORMAT\r\n\t\t\t\t&& originalUserData.CUSTOMER_EMAIL == userData[0].CUSTOMER_EMAIL\r\n\t\t\t\t&& originalUserData.REQUESTOR_GROUP == userData[0].REQUESTOR_GROUP\r\n\t\t\t\t&& originalUserData.CUSTOMER_PROSPECT_PHASE == userData[0].CUSTOMER_PROSPECT_PHASE\r\n\t\t\t\t&& originalUserData.REQUEST_TYPE == userData[0].REQUEST_TYPE\r\n\t\t\t\t&& originalUserData.URGENCY == userData[0].URGENCY\r\n\t\t\t\t//&& originalUserData.NEED_BY_DATE == new Date(userData[0].NEED_BY_DATE)\r\n\t\t\t\t) {\r\n\t\t\t\t\treturn true;\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\t\t}\t \r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n {this.props.content.noActiveRequestFile}\r\n
\r\n \t\r\n\t\t\t\t
\r\n\t\t\t\r\n {(this.state.isSaveInProgress) ?\r\n \r\n : null\r\n }\r\n
\t\r\n\t\t\t\t\t \r\n
\t\t\r\n\t\t\t\t\t\r\n {this.state.responseMsg}
\r\n \r\n\t\t\t\t\t\t{/* */}\r\n\t\t\t\t\t
\t\r\n\t \r\n\t\t\t\t\t\r\n {(this.state.isLoading) ?\r\n
\r\n\t\t\t\t\r\n\t\t\t\t\t \r\n\t\t\t\t\t
\r\n : this.state.warningMessageArr.length > 0 ? \r\n
: ''} \r\n {this.state.errorMessagesArr.length > 0 ? Field Assessment
\r\n - {this.state.warningMessageArr.map(item =>
- {item} )}
\r\n
: ''}\r\n Field Assessment
\r\n - {this.state.errorMessagesArr.map(item =>
- {item} )}
\r\n \r\n
\r\n \r\n {/*
\r\n */}\r\n\r\n\r\n
\r\n \r\n (this.formDispatch = dispatch)}\r\n //onSubmit={(formValue) => this.handleLoadButton(formValue)}\r\n >\r\n
\r\n \r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {(this.props.spendDetails.isLoading) ?\r\n \r\n : null\r\n }\r\n
\r\n \r\n \r\n
} \r\n position=\"center center\"\r\n on=\"hover\"\r\n {...(!this.state.btnDisabled && { disabled: true })}\r\n >\r\n {this.props.content.hoverText}\r\n \r\n\r\n {this.props.content.requestId}
\r\n\r\n \r\n 0\r\n ? this.state.RequestIds.filter(\r\n option =>\r\n option.value === this.state.selectedRequestId\r\n )\r\n : []}\r\n onChange={this.handleRequestChange}\r\n validators={{ required: validators.required }}\r\n validateOn=\"change\"\r\n options={this.state.RequestIds}\r\n isSearchable={false}\r\n noOptionsMessage={() => null}\r\n isDisabled={this.state.btnDisabled || !this.props.userData.AllowEdit}\r\n />\r\n
\r\n \r\n this.showModal(this.modelRef)}\r\n onClick={(formValue) => this.handleLoadButton(formValue)}\r\n color\r\n disabled={this.props.spendDetails.isLoading || this.state.btnDisabled || this.state.isRequestLoaded || !this.props.userData.AllowEdit}\r\n />\r\n this.getRequestData(this.state.selectedRequestId, true)}\r\n CancelButtonAction={() => this.hideModal(this.modelRef)}\r\n open={this.state.open}\r\n onOpen={this.closePopUp}\r\n okButtonFlag={okButtonFlag}\r\n ref={this.modelRef} instance={this}\r\n />\r\n
\r\n\r\n \r\n
\r\n \r\n {this.props.spendDetails.error !== null && typeof this.props.spendDetails.error !== 'object' ?
\r\n {this.props.spendDetails.error}
: ''}\r\n {this.props.spendDetails.message !== null && typeof this.props.spendDetails.message !== 'object' ? {this.props.spendDetails.message}
: ''}\r\n \r\n
\r\n \r\n {this.props.content.mNcTitle}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n | \r\n | {this.props.content.tblCol1} | \r\n{this.props.content.tblSAPRequester} | \r\n{this.props.content.tblCol2} | \r\n{this.props.content.tblCol3} | \r\n{this.props.content.tblCol4} | \r\n{this.props.content.tblLastEditDate} | \r\n{this.props.content.tblCol5} | \r\n\r\n |
|---|
\r\n {(this.state.isLoading) ?\r\n \r\n : this.state.duplicateWarning !== '' ?
\r\n \r\n
: ''}\r\n {this.state.warningMessageArr.length > 0 ? Duplicate Assessment
\r\n {this.state.duplicateWarning}
\r\n \r\n
: ''}\r\n {this.state.duplicateError !== '' ? Field Assessment
\r\n - {this.state.warningMessageArr.map(item =>
- {item} )}
\r\n
: ''}\r\n {this.state.errorMessagesArr.length > 0 ? Duplicate Assessment
\r\n {this.state.duplicateError}
\r\n \r\n
: ''}\r\n Field Assessment
\r\n - {this.state.errorMessagesArr.map(item =>
- {item} )}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {(this.props.content.companyTitle)}{
\r\n \r\n {/*
\r\n {this.props.content.companySubTitle}
\r\n {\"Value Story Details\"}
\r\n \r\n {/*
\r\n\r\n */}\r\n
\r\n : null } */}\r\n\r\n \r\n {/* Spend Data Collection Changes */}\r\n {/* \r\n
\r\n \r\n
\r\n\r\n {/* \r\n
\r\n \r\n {this.state.isExpand ?\r\n \r\n
\r\n {\"Load new request\"}
\r\n this.onExpandClick(e)} >{this.state.isExpand ? \"-\": \"+\"}
\r\n \r\n
: null} */}\r\n\r\n {/* \r\n
\r\n \r\n {this.state.isExpand ?\r\n \r\n
\r\n {\"Load new request\"}
\r\n this.onExpandClick(e)} >{this.state.isExpand ? \"-\": \"+\"}
\r\n \r\n (this.formDispatch = dispatch)}\r\n >\r\n
\r\n \r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {(this.props.spendDetails.isLoading) ?\r\n \r\n : null\r\n }\r\n
\r\n \r\n \r\n
}\r\n position=\"center center\"\r\n on=\"hover\"\r\n {...(!this.state.btnDisabled && { disabled: true })}\r\n >\r\n {this.props.content.hoverText}\r\n \r\n\r\n {this.props.content.requestId}
\r\n\r\n \r\n 0\r\n ? this.state.RequestIds.filter(\r\n option =>\r\n option.value === this.state.selectedRequestId\r\n )\r\n : []}\r\n onChange={this.handleRequestChange}\r\n validators={{ required: validators.required }}\r\n validateOn=\"change\"\r\n options={this.state.RequestIds}\r\n isSearchable={false}\r\n noOptionsMessage={() => null}\r\n isDisabled={this.state.btnDisabled || !this.props.userData.AllowEdit}\r\n />\r\n
\r\n \r\n this.handleLoadButton(formValue)}\r\n color\r\n disabled={this.props.spendDetails.isLoading || this.state.btnDisabled || this.state.isRequestLoaded || !this.props.userData.AllowEdit}\r\n />\r\n this.getRequestData(this.state.selectedRequestId, true)}\r\n CancelButtonAction={() => this.hideModal(this.modelRef)}\r\n open={this.state.open}\r\n onOpen={this.closePopUp}\r\n okButtonFlag={okButtonFlag}\r\n ref={this.modelRef} instance={this}\r\n />\r\n
\r\n\r\n \r\n
\r\n \r\n {this.props.spendDetails.error !== null && typeof this.props.spendDetails.error !== 'object' ?
\r\n {this.props.spendDetails.error}
: ''}\r\n {this.props.spendDetails.message !== null && typeof this.props.spendDetails.message !== 'object' ? {this.props.spendDetails.message}
: ''}\r\n \r\n
\r\n \r\n {this.props.content.mNcTitle}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n | \r\n | {this.props.content.tblCol1} | \r\n{this.props.content.tblSAPRequester} | \r\n{this.props.content.tblCol2} | \r\n{this.props.content.tblCol3} | \r\n{this.props.content.tblCol4} | \r\n{this.props.content.tblLastEditDate} | \r\n{this.props.content.tblCol5} | \r\n\r\n |
|---|
\r\n {(this.state.isLoading) ?\r\n \r\n : this.state.duplicateWarning !== '' ?
\r\n \r\n
: ''}\r\n {this.state.warningMessageArr.length > 0 ? Duplicate Assessment
\r\n {this.state.duplicateWarning}
\r\n \r\n
: ''}\r\n {this.state.duplicateError !== '' ? Field Assessment
\r\n - {this.state.warningMessageArr.map(item =>
- {item} )}
\r\n
: ''}\r\n {this.state.errorMessagesArr.length > 0 ? Duplicate Assessment
\r\n {this.state.duplicateError}
\r\n \r\n
: ''}\r\n Field Assessment
\r\n - {this.state.errorMessagesArr.map(item =>
- {item} )}
\r\n
\r\n \r\n {this.state.isCustomerSpendExpand ?\r\n \r\n
\r\n {\"Collect Customer Spend\"}
\r\n this.onExpandClick(e)} >{this.state.isExpand ? \"-\": \"+\"}
\r\n \r\n
: null} */}\r\n \r\n\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nclass SummaryTable extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n {\r\n }\r\n }\r\n render() {\r\n // var isMatchSummary = this.props.isMatchSummary\r\n var currencySymbol = this.props.currencySymbol\r\n var sortedData = this.props.resultData.sort((a, b) => (a.TEXT_ID > b.TEXT_ID) ? 1 : ((b.TEXT_ID > a.TEXT_ID) ? -1 : 0))\r\n var rows = sortedData.map(\r\n function (row) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n {this.props.content.name}{
\r\n {this.props.content.subTitle}
\r\n \r\n
\r\n \r\n
\r\n {this.props.content.recordCount}
\r\n \r\n
\r\n {this.props.spendDetails.currentActiveRequest !== ('' && undefined && null) && this.props.spendDetails.currentActiveRequest.Number_Of_Records !== undefined ? formatThousands(this.props.spendDetails.currentActiveRequest.Number_Of_Records) : 0}
\r\n\r\n
\r\n {this.props.content.classificationSummary}
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass Rows extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n {\r\n }\r\n }\r\n render() {\r\n var percent = Math.round(this.props.classifiedPercent * 100);\r\n //var isMatchSummary = this.props.isMatchSummary;\r\n return (\r\n | {this.props.content.total} | \r\n\r\n | {this.props.content.classified} | \r\n\r\n |
|---|
\r\n {/*
*/}\r\n
\r\n \r\n
\r\n \r\n
\r\n {\r\n this.props.headerText ?\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nSupplierDrillDownTabPanel.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n tabs: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n label: PropTypes.string.isRequired,\r\n id: PropTypes.number.isRequired,\r\n component: PropTypes.object.isRequired,\r\n }).isRequired)\r\n .isRequired,\r\n};\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n supplierDrilldownPendingChanges: state.spendDetails.supplierDrilldownPendingChanges,\r\n tabMessage: state.content.spendAnalysis.detailedFile.toggleTabMessage,\r\n spendDetails: state.spendDetails,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n trackSupplierDrillDownChanges: changes => dispatch(trackSupplierDrillDownChanges(changes))\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(SupplierDrillDownTabPanel));","import React, { Fragment } from 'react';\r\nimport { connect } from 'react-redux'\r\nimport ScrollArea from 'react-scrollbar'\r\nimport Button from 'UI/Button';\r\nimport { RadioButton } from 'material-ui';\r\n\r\nimport {\r\n getAllIndustriesSuccess,\r\n getAllIndustriesLoading,\r\n getAllIndustriesFailure,\r\n getAllIndustries,\r\n getAllIndustriesTreeStructure,\r\n selectedIndustryDetails,\r\n setSearchClearFlag\r\n} from 'actions/spendActions'\r\n\r\nclass IndustryOverridePopUp extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.myRef = React.createRef()\r\n this.state = {\r\n industries: [],\r\n searchText: '',\r\n isIndustrySelected: false,\r\n error: '',\r\n isLoading: true,\r\n industriesInitial: [],\r\n isError: false\r\n }\r\n this.loadIndustires = this.loadIndustries.bind(this)\r\n this.search = this.search.bind(this)\r\n this.clear = this.clear.bind(this)\r\n this.handleKeyDown = this.handleKeyDown.bind(this)\r\n this.radioButtonChecked = this.radioButtonChecked.bind(this)\r\n this.handleChange = this.handleChange.bind(this)\r\n }\r\n\r\n loadIndustries() {\r\n let L1Industries = [], L2Industries = [], L3Industries = [], L4Industries = [], L5Industries = [], L6Industries = [], L7Industries = [], L8Industries = [], L9Industries = [], filteredArray = [], industryMapping = []\r\n let key = 'children';\r\n let counter = 0\r\n this.props.getAllIndustries()\r\n .then((response) => {\r\n this.industryList = []\r\n this.processIndustries(response.data.Result, undefined, 1);\r\n this.props.getAllIndustriesLoading(false);\r\n this.props.getAllIndustriesTreeStructure(this.industryList.L1Industries)\r\n this.setState({ industries: this.industryList.L1Industries, industriesInitial: response.data.Result })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator', isError: true })\r\n }\r\n else {\r\n this.setState({ responseMsg: 'An error has occurred', isError: true })\r\n }\r\n })\r\n }\r\n \r\n processIndustries(filteredRows, topIndustryName, order) {\r\n var columnName = 'L'+order+'_INDUSTRY_NAME';\r\n var arrayName = 'L'+order+'Industries';\r\n var children = 'L'+(order + 1)+'Industries';\r\n var counter = 0;\r\n \r\n if(order === 10 || ((topIndustryName === 'Non-Procured Spend' || topIndustryName === 'Unclassified') && order === 3)) {\r\n return\r\n }\r\n\r\n this.industryList[arrayName] = []\r\n\r\n var uniqueIndustryNames = [... new Set(filteredRows.map((item) => {return item[columnName]}))]\r\n uniqueIndustryNames.forEach((industryName) => {\r\n if (!industryName.includes('(L'+(order-1)+')')) {\r\n if(order === 1) {\r\n topIndustryName = industryName\r\n } \r\n this.industryList[arrayName].push({\r\n 'industryCount': counter++, 'industry': industryName, 'level': order, 'topmostIndustry': topIndustryName, 'children': [], visible: false, checked: false, show: true\r\n });\r\n \r\n var filteredRowsTemp = filteredRows.filter(function (obj) {\r\n return obj[columnName] === industryName;\r\n });\r\n \r\n \r\n this.processIndustries(filteredRowsTemp, topIndustryName, order + 1)\r\n if (this.industryList[children] && this.industryList[children].length > 0) {\r\n if(!((topIndustryName === 'Non-Procured Spend' || topIndustryName === 'Unclassified') && order >= 2))\r\n this.industryList[arrayName][this.industryList[arrayName].length - 1]['children'] = this.industryList[children]\r\n }\r\n }\r\n })\r\n }\r\n\t\r\n\tcomponentDidMount() {\r\n this.loadIndustries();\r\n\t}\r\n\t\r\n\tgroupToggle(e, industry, level) {\r\n\t\tvar industries = this.state.industries;\r\n\t\tfor(var idx = 0; idx < industries.length; idx++) {\r\n var element = industries[idx]\r\n var currentVisibility = element.visible\r\n this.setVisibleFlag( element, industry, level)\r\n\t\t\tif(element.visible !== currentVisibility) {\r\n\t\t\t\tbreak\r\n\t\t\t}\r\n\t\t}\r\n\t\t\r\n\t\te.stopPropagation()\r\n\t\tthis.setState({industries: industries})\r\n\t}\r\n\r\n\tsetVisibleFlag(elt, industry, level){\r\n\t\tif(elt.children === undefined || elt.children.length === 0) {\r\n\t\t\tif(industry === elt.industry && level === elt.level) {\r\n\t\t\t\telt.visible = !elt.visible\r\n\t\t\t}\r\n\r\n\t\t\treturn;\r\n\t\t}\r\n\t\t\r\n\t\tif(industry === elt.industry && level === elt.level) {\r\n\t\t\telt.visible = !elt.visible\r\n\t\t\treturn\r\n\t\t} else {\r\n\t\t\telt.children.forEach((child) => {\r\n this.setVisibleFlag(child, industry, level)\r\n elt.visible = elt.visible || child.visible\r\n\t\t\t})\r\n\t\t}\r\n\t}\r\n\r\n\tradioButtonChecked(e, industry, level) {\r\n var industries = this.state.industries;\r\n\t\tfor(var idx = 0; idx < industries.length; idx++) {\r\n\t\t\tvar element = industries[idx]\r\n\t\t\tthis.setCheckedFlag( element, industry, level)\r\n }\r\n \r\n let selectedIndustryDetails = this.state.industriesInitial.find((obj) => {\r\n let name = 'L'+this.selectedIndustry.level+'_INDUSTRY_NAME'\r\n\t\t\treturn this.selectedIndustry.industry === obj[name] && this.selectedIndustry.level == obj.INDUSTRY_LEVEL && this.selectedIndustry.topmostIndustry == obj.L1_INDUSTRY_NAME\r\n })\r\n \r\n this.props.selectedIndustryDetails(selectedIndustryDetails)\r\n\r\n\t\t\r\n\t\te.stopPropagation()\r\n\t\tthis.setState({industries: industries})\r\n }\r\n \r\n setCheckedFlag(elt, industry, level){\r\n\t\tif(industry === elt.industry && level === elt.level) {\r\n elt.checked = true\r\n this.selectedIndustry = elt;\r\n\t\t} else {\r\n elt.checked = false\t\r\n }\r\n \r\n if(elt.children === undefined || elt.children.length === 0) {\r\n return;\r\n }\r\n \r\n elt.children.forEach((child) => {\r\n this.setCheckedFlag(child, industry, level)\r\n })\r\n }\r\n \r\n handleChange(e) {\r\n this.setState({searchText: e.target.value})\r\n }\r\n\r\n handleKeyDown(e) {\r\n if (e.key === 'Enter') {\r\n this.search()\r\n }\r\n }\r\n\r\n search() {\r\n let searchText = this.state.searchText\r\n var industries = this.state.industries;\r\n\t\tfor(var idx = 0; idx < industries.length; idx++) {\r\n\t\t\tvar element = industries[idx]\r\n\t\t\tthis.setVisibleFlagForSearch( element, searchText)\r\n }\r\n \r\n this.setState({industries: industries})\r\n }\r\n\r\n setVisibleFlagForSearch(elt, searchText){\r\n if(searchText.trim().length === 0) {\r\n elt.visible = false\r\n elt.show = true\r\n } else if(elt.industry.toLocaleLowerCase().indexOf(searchText.toLocaleLowerCase()) > -1) {\r\n elt.visible = true\r\n elt.show = true\r\n return\r\n\t\t} else {\r\n elt.visible = false\r\n elt.show = false\r\n }\r\n\r\n if(elt.children === undefined || elt.children.length === 0) {\r\n return;\r\n }\r\n \r\n for(var idx = 0; idx < elt.children.length; idx++) {\r\n var child = elt.children[idx]\r\n \r\n this.setVisibleFlagForSearch(child, searchText)\r\n elt.visible = elt.visible || child.visible\r\n elt.show = elt.show || child.show\r\n }\r\n\t}\r\n\r\n clear() {\r\n this.setState({searchText: ''}, this.search)\r\n }\r\n\r\n getChildrenElement(childrenTemp) {\r\n\t\tif(childrenTemp === undefined || childrenTemp.length === 0) {\r\n\t\t\treturn ''\r\n\t\t} else {\r\n\t\t\tvar children = childrenTemp.map((item) => {\r\n\t\t\t\treturn item.show ? {this.props.headerText}
: null\r\n }\r\n \r\n
\r\n {\r\n this.props.nextButtonLabel && this.props.nextButtonLabel != \"\" ?\r\n (\r\n \r\n \r\n \r\n {\r\n this.props.tabs.map((tab, i) => {\r\n var disabledTab = _state.isPopUpTabLoading && activeTab === tab.id ? false : _state.isPopUpTabLoading;\r\n return ( \r\n {\r\n this.props.tabs.map(tab => (\r\n activeTab === tab.id\r\n ? {tab.component} \r\n : null\r\n ))\r\n }\r\n
\r\n \r\n
\r\n ) : null\r\n }\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n \r\n
\r\n \r\n {this.props.tabMessage}\r\n
\r\n \r\n
\r\n \r\n this.continueNavigation(\"alert\")}\r\n color /> \r\n this.hideModal(\"alert\")}\r\n color /> \r\n
\r\n \r\n {item.children.length > 0 ?\r\n
\r\n\t\t this.groupToggle(e, item.industry, item.level)} style={{paddingLeft:\"5px\", marginTop: \"3px\"}} className=\"float-right plus-icon hand-cursor\">\r\n\t\t\t\t\t\t{item.visible ? : }\r\n\t\t\t\t\t
: ''}\r\n\t\t\t\t\t\r\n\t\t\t\t\t : }\r\n\t\t\t\t\t\r\n { !this.props.readOnly ?\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n this.radioButtonChecked(e, item.industry, item.level)}\r\n name={item.industry} \r\n value={item.industry} />
\r\n : null }\r\n\t\t\t\t\t\t{item.industry}
\r\n\t\t\t\t\t\r\n\t\t\t\t\t {item.visible ? this.getChildrenElement(item.children) : ''}\r\n\t\t\t\t
\r\n\t\t\t\t\r\n \r\n \r\n {this.state.isError? '' : \r\n this.state.industries.map((item) => {\r\n return (\r\n item.show ? \r\n : ''\r\n )}\r\n )\r\n }\r\n {this.state.isError? \r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n industryTree: state.spendDetails.industryTree,\r\n isIndustryTreeLoading: state.spendDetails.isIndustryTreeLoading,\r\n loading: state.spendDetails.isLoading,\r\n content: state.content,\r\n ui: state.content.ui\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getAllIndustriesSuccess: message => dispatch(getAllIndustriesSuccess(message)),\r\n getAllIndustriesFailure: error => dispatch(getAllIndustriesFailure(error)),\r\n getAllIndustriesLoading: bool => dispatch(getAllIndustriesLoading(bool)),\r\n getAllIndustries: () => dispatch(getAllIndustries()),\r\n getAllIndustriesTreeStructure: message => dispatch(getAllIndustriesTreeStructure(message)),\r\n setSearchClearFlag: message => dispatch(setSearchClearFlag(message)),\r\n selectedIndustryDetails: message => dispatch(selectedIndustryDetails(message))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(IndustryOverridePopUp); ","import React from 'react';\r\nimport {Tree} from 'primereact/tree';\r\n\r\n//Overrided CSS proporties to match AVATAR look and feel in App.scss (.p-tree, .p-component, .p-treenode-content, .p-treenode-childrenn)\r\nconst TreeList = (props) => {\r\n return(\r\n \r\n
\r\n {!this.state.isError && this.props.loading ?\r\n \r\n
\r\n {this.props.content.spendAnalysis.detailedFile.industry}
\r\n \r\n \r\n
\r\n \r\n Loading...
:\r\n \r\n
\r\n \r\n
\r\n \r\n this.handleKeyDown(e)} onChange={this.handleChange} placeholder='Search' />\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {item.children.length > 0 ?\r\n
\r\n this.groupToggle(e, item.industry, item.level)} style={{paddingLeft:\"5px\", marginTop: \"3px\"}} className=\"float-right plus-icon hand-cursor\">\r\n {item.visible ? : }\r\n
: ''}\r\n \r\n : }\r\n \r\n { (item.industry !== 'Non-Procured Spend' && item.industry !== 'Unclassified' && !this.props.readOnly)?
\r\n \r\n this.radioButtonChecked(e, item.industry, item.level)}\r\n name={item.industry} value={item.industry} />\r\n
: ''}\r\n {item.industry}
\r\n \r\n {item.visible ? this.getChildrenElement(item.children) : ''}\r\n
\r\n {this.state.responseMsg}
: ''}\r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default TreeList;","import React, { Fragment } from 'react';\r\nimport { connect } from 'react-redux'\r\nimport { formatThousands, convertToMillion } from 'utils/Utils'\r\nimport Popup from \"reactjs-popup\";\r\nimport Button from 'UI/Button';\r\nimport { path } from 'Constants'\r\nimport IndustryOverridePopUp from './IndustryOverridePopUp'\r\nimport { selectedIndustryDetails, trackSupplierDrillDownChanges, trackSupplierDrillDownSave } from 'actions/spendActions'\r\nimport TreeList from './TreeList'\r\nimport classNames from \"classnames\";\r\nimport {\r\n getInputAndClassificationData,\r\n getInputAndClassificationDataLoading,\r\n getInputAndClassificationDataSuccess,\r\n getInputAndClassificationDataFailure,\r\n storeVendorDetails,\r\n storeFinalIndustryID,\r\n storeInputAndClassificationDetails,\r\n supplierDrillDownUpdate,\r\n setPopUpTabLoadingStatus\r\n} from 'actions/spendActions'\r\n\r\nimport { PopupE } from 'UI/CustomComponents/Controls';\r\n\r\nclass InputandClassification extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n open: false,\r\n classificationData: [],\r\n originalOverrideIndustryID: null,\r\n overrideIndustryID: null,\r\n hierarchyPathTree: [],\r\n expandedKeys: {},\r\n isCapIQLicesend: false,\r\n isError: 'No',\r\n isLoading: true,\r\n responseMsg: '',\r\n isSaveInProgress: false\r\n }\r\n this.LoadData = this.LoadData.bind(this)\r\n this.outsidePopupClick = this.outsidePopupClick.bind(this)\r\n this.togglePopUp = this.togglePopUp.bind(this)\r\n this.industryOverride = this.industryOverride.bind(this)\r\n this.clearIndustryOverride = this.clearIndustryOverride.bind(this)\r\n this.handleSave = this.handleSave.bind(this)\r\n this.getNestedChildren = this.getNestedChildren.bind(this)\r\n //this.getWaterFallData = this.getWaterFallData.bind(this)\r\n }\r\n\r\n LoadData() {\r\n var self = this;\r\n this.props.setPopUpTabLoadingStatus(true);\r\n this.props.getInputAndClassificationData(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.user.user.Email, this.props.spendDetails.supplierDetails[\"SKEY\"])\r\n .then((response) => {\r\n if (response.status === 200) {\r\n this.props.setPopUpTabLoadingStatus(false);\r\n if (response.data.Result.length > 0) {\r\n var addressDetails = response.data.Result[0][\"VENDOR_ADDRESS\"].split(\"|\").map(item => item.trim());\r\n var address = addressDetails.filter(Boolean).join(' | ');\r\n var vendorDetails = { vendorName: response.data.Result[0][\"VENDOR_NAME\"], vendorAddress: address, scopeSource: response.data.Result[0][\"SCOPE_SOURCE\"], overrideIndustryID: response.data.Result[0][\"OVERRIDE_INDUSTRY_ID\"] }\r\n this.props.storeVendorDetails(vendorDetails)\r\n this.props.storeFinalIndustryID(response.data.Result[0][\"FINAL_INDUSTRY_ID\"])\r\n this.props.storeInputAndClassificationDetails(response.data.Result[0])\r\n\r\n var hierarchyTree = []\r\n var hierarcyPath = response.data.Result[0][\"FINAL_INDUSTRY_DESCRIPTION_PATH\"].split(' | ')\r\n hierarcyPath.map(function (item, index) {\r\n var obj = { 'key': index + 1, 'label': item, 'parent': index === 0 ? null : index }\r\n hierarchyTree.push(obj)\r\n })\r\n var objectData = []\r\n try {\r\n objectData = this.getNestedChildren(hierarchyTree, null)//Start with null as parent\r\n }\r\n catch (e) { }\r\n let expandedKeys = { ...this.state.expandedKeys };\r\n hierarchyTree.map(function (item) {\r\n expandedKeys[item.key] = true\r\n });\r\n this.setState({\r\n classificationData: response.data.Result[0], hierarchyPathTree: objectData, expandedKeys: expandedKeys,\r\n isLoading: false, isError: 'No', responseMsg: '', overrideIndustryID: response.data.Result[0][\"OVERRIDE_INDUSTRY_ID\"],\r\n originalOverrideIndustryID: response.data.Result[0][\"OVERRIDE_INDUSTRY_ID\"],\r\n isCapIQLicesend: self.props.user.user.applicationFeatures.findIndex(a => a.Action === 'CapIQLinkAccess') > -1 ? true : false\r\n })\r\n }\r\n else {\r\n this.setState({\r\n isLoading: false, isError: 'Yes', responseMsg: this.props.content.noData\r\n })\r\n }\r\n }\r\n else {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n this.setState({ isError: 'Yes', isLoading: 'false', responseMsg: this.props.content.error })\r\n }\r\n }).catch((error) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n this.setState({ isError: 'Yes', isLoading: 'false', responseMsg: this.props.content.error })\r\n })\r\n }\r\n\r\n togglePopUp() {\r\n this.setState({ open: !this.state.open })\r\n }\r\n\r\n outsidePopupClick() {\r\n this.setState({ open: false })\r\n }\r\n\r\n industryOverride() {\r\n if (this.props.overridedIndustryDetails !== undefined && this.props.overridedIndustryDetails !== null\r\n && this.props.overridedIndustryDetails.INDUSTRY_ID !== undefined && this.props.overridedIndustryDetails.INDUSTRY_ID !== null) {\r\n this.setState({ overrideIndustryID: this.props.overridedIndustryDetails.INDUSTRY_ID })\r\n if (this.props.overridedIndustryDetails.INDUSTRY_ID !== this.state.originalOverrideIndustryID)\r\n this.props.trackSupplierDrillDownChanges(true)\r\n else\r\n this.props.trackSupplierDrillDownChanges(false)\r\n this.props.selectedIndustryDetails(null)//Clear the previous selection\r\n this.togglePopUp();\r\n }\r\n }\r\n\r\n clearIndustryOverride() {\r\n if (this.state.originalOverrideIndustryID !== null)\r\n this.props.trackSupplierDrillDownChanges(true)\r\n else\r\n this.props.trackSupplierDrillDownChanges(false)\r\n this.setState({ overrideIndustryID: null, open: false })\r\n }\r\n\r\n handleSave() {\r\n if (this.state.overrideIndustryID !== this.state.originalOverrideIndustryID) {\r\n this.setState({ responseMsg: '', isError: 'No', isLoading: true, isSaveInProgress: true })\r\n const record = {\r\n VS_ID: this.props.spendDetails.currentActiveRequest.VS_ID,\r\n DMC_ID: this.props.spendDetails.currentActiveRequest.DMC_ID,\r\n DATA_COLLECTIONS_SKEY: this.props.spendDetails.supplierDetails[\"SKEY\"],\r\n USER_ID: this.props.user.user.Email,\r\n FLAG_SOLUTION: \"No\",\r\n FLAG_INDUSTRY: \"Yes\",\r\n FLAG_INP: \"No\",\r\n FLAG_CONFIRMED: \"No\",\r\n SCOPE_SOURCE: this.props.spendDetails.vendorDetails[\"scopeSource\"],\r\n OVERRIDE_GICS: this.state.overrideIndustryID,\r\n CONFIRMED: null,\r\n EXCLUSION_REASON: null,\r\n GOODS_OR_SERVICE: null,\r\n DIRECT_SPEND: null,\r\n SAP_ARIBA_BUY_PROCESS: null,\r\n SOURCING_ELIGIBLE: null,\r\n BUYING_INV_ELIGIBLE: null,\r\n REQUISITION_ABLE: null,\r\n REQUISITION_TYPE: null,\r\n CONTRACT_INV_ELIGIBLE: null,\r\n COMMERCE_AUTOMATION_ELIGIBLE: null,\r\n SUPP_CHAIN_COLLAB_ELIGIBLE: null,\r\n PAYABLES_ELIGIBLE: null,\r\n SAP_FIELDGLASS_ELIGIBLE: null,\r\n SAP_CONCUR_ELIGIBLE: null,\r\n REQUEST_NAME: \"InputAndClassification_Tab\"\r\n };\r\n this.props.setPopUpTabLoadingStatus(true);\r\n this.props.supplierDrillDownUpdate(record)\r\n .then((response) => {\r\n if (response.status == 200) {\r\n this.props.setPopUpTabLoadingStatus(false);\r\n if (response.data.Result.length > 0) {\r\n var addressDetails = response.data.Result[0][\"VENDOR_ADDRESS\"].split(\"|\").map(item => item.trim());\r\n var address = addressDetails.filter(Boolean).join(' | ');\r\n var vendorDetails = { vendorName: response.data.Result[0][\"VENDOR_NAME\"], vendorAddress: address, scopeSource: response.data.Result[0][\"SCOPE_SOURCE\"], overrideIndustryID: response.data.Result[0][\"OVERRIDE_INDUSTRY_ID\"] }\r\n this.props.storeVendorDetails(vendorDetails)\r\n this.props.storeFinalIndustryID(response.data.Result[0][\"FINAL_INDUSTRY_ID\"])\r\n this.props.storeInputAndClassificationDetails(response.data.Result[0])\r\n \r\n var hierarchyTree = []\r\n var hierarcyPath = response.data.Result[0][\"FINAL_INDUSTRY_DESCRIPTION_PATH\"].split(' | ')\r\n hierarcyPath.map(function (item, index) {\r\n var obj = { 'key': index + 1, 'label': item, 'parent': index === 0 ? null : index }\r\n hierarchyTree.push(obj)\r\n })\r\n var objectData = this.getNestedChildren(hierarchyTree, null)//Start with null as parent\r\n let expandedKeys = { ...this.state.expandedKeys };\r\n hierarchyTree.map(function (item) {\r\n expandedKeys[item.key] = true\r\n });\r\n this.props.trackSupplierDrillDownChanges(false)\r\n this.props.trackSupplierDrillDownSave(true)\r\n this.props.setPopUpTabLoadingStatus(false)\r\n this.setState({\r\n classificationData: response.data.Result[0], hierarchyPathTree: objectData, expandedKeys: expandedKeys,\r\n isLoading: false, isError: 'No', isSaveInProgress: false, responseMsg: this.props.content.overrideMessage, overrideIndustryID: response.data.Result[0][\"OVERRIDE_INDUSTRY_ID\"],\r\n originalOverrideIndustryID: response.data.Result[0][\"OVERRIDE_INDUSTRY_ID\"],\r\n isCapIQLicesend: this.props.user.user.applicationFeatures.findIndex(a => a.Action === 'CapIQLinkAccess') > -1 ? true : false\r\n })\r\n }\r\n else {\r\n this.setState({\r\n isLoading: false, isError: 'Yes', isSaveInProgress: false, responseMsg: this.props.content.noData\r\n })\r\n }\r\n }\r\n else {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n }\r\n }).catch((error) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isSaveInProgress: false, isLoading: false })\r\n }\r\n })\r\n }\r\n }\r\n\r\n //Convert parent-child data into nested JSON object\r\n getNestedChildren(arr, parent) {\r\n var out = []\r\n for (var i in arr) {\r\n if (arr[i].parent == parent) {\r\n var children = this.getNestedChildren(arr, arr[i].key)\r\n if (children.length) {\r\n arr[i].children = children\r\n }\r\n out.push(arr[i])\r\n }\r\n }\r\n return out\r\n }\r\n\r\n // getWaterFallData(arr, key) {\r\n // var out = []\r\n // while (key !== null)\r\n // {\r\n // let obj = this.state.nestedData.find(function(item) {\r\n // return (item.key === key);\r\n // });\r\n\r\n // out.unshift(obj.label)\r\n // key = obj.parent;\r\n // } \r\n // return out.filter(Boolean).join(\" | \");\r\n // }\r\n\r\n componentDidMount() {\r\n this.LoadData();\r\n //START - Verticle Line Spereator Logic\r\n // var _this = this\r\n // let parentsWithChildren = this.state.nestedData.map(function(item) {\r\n // return item.parent;\r\n // });\r\n // let parentsWithoutChildren = this.state.nestedData.filter(function(value) { \r\n // return (parentsWithChildren.indexOf(value.key) === -1)\r\n // });\r\n // let finalData = [];\r\n // parentsWithoutChildren.map(function(value) { \r\n // finalData.push(_this.getWaterFallData(_this.state.nestedData, value.key))\r\n // });\r\n // this.setState({ nestedVerticleData : finalData });\r\n //END - Verticle Line Spereator Logic\r\n\r\n //START - Nested Tree List Logic\r\n //var objectData = this.getNestedChildren(this.state.nestedData, null)//Start with null as parent\r\n //this.setState({ nestedTreeData : objectData });\r\n //End - Nested Tree List Logic\r\n }\r\n\r\n render() {\r\n //var _this = this\r\n //Concatinate Vendor and their address \r\n // var address = []\r\n // address.push(this.state.classificationData[\"VENDOR_NAME\"])\r\n // address.push(this.state.classificationData[\"VENDOR_ADDRESS\"])\r\n // var vendorDetails = address.filter(Boolean).join(' | ');\r\n var val = \"https://www.capitaliq.com/CIQDotNet/Lists/Constituents.aspx?subTypeId=\" + this.state.classificationData[\"FINAL_INDUSTRY_ID\"]\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content.spendAnalysis.supplierDrilldown.inputandClassification,\r\n overridedIndustryDetails: state.spendDetails.overridedIndustryDetails,\r\n spendDetails: state.spendDetails,\r\n user: state.default,\r\n currencySymbols: state.content.CurrencySymbols,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getInputAndClassificationDataSuccess: message => dispatch(getInputAndClassificationDataSuccess(message)),\r\n getInputAndClassificationDataFailure: error => dispatch(getInputAndClassificationDataFailure(error)),\r\n getInputAndClassificationDataLoading: bool => dispatch(getInputAndClassificationDataLoading(bool)),\r\n getInputAndClassificationData: (DMCId, VSId, userEmail, SKEY) => dispatch(getInputAndClassificationData(DMCId, VSId, userEmail, SKEY)),\r\n selectedIndustryDetails: message => dispatch(selectedIndustryDetails(message)),\r\n trackSupplierDrillDownChanges: message => dispatch(trackSupplierDrillDownChanges(message)),\r\n trackSupplierDrillDownSave: message => dispatch(trackSupplierDrillDownSave(message)),\r\n storeVendorDetails: (vendorDetails) => dispatch(storeVendorDetails(vendorDetails)),\r\n storeFinalIndustryID: (L5Industry) => dispatch(storeFinalIndustryID(L5Industry)),\r\n storeInputAndClassificationDetails: (deduplicationDetails) => dispatch(storeInputAndClassificationDetails(deduplicationDetails)),\r\n supplierDrillDownUpdate: (record) => dispatch(supplierDrillDownUpdate(record)),\r\n setPopUpTabLoadingStatus: bool => dispatch(setPopUpTabLoadingStatus(bool)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(InputandClassification); ","import React, { Fragment } from 'react';\r\nimport { connect } from 'react-redux'\r\nimport { formatThousands } from 'utils/Utils'\r\nimport { path } from 'Constants'\r\nimport { Tree } from 'primereact/tree';\r\nimport { RadioButton } from 'material-ui';\r\nimport classNames from \"classnames\";\r\nimport {\r\n getSPCapitalIQData,\r\n getSPCapitalIQLoading,\r\n getSPCapitalIQSuccess,\r\n getSPCapitalIQFailure,\r\n getCapIQClassificationIndustries,\r\n trackSupplierDrillDownChanges,\r\n trackSupplierDrillDownSave,\r\n supplierDrillDownUpdate,\r\n storeFinalIndustryID,\r\n setPopUpTabLoadingStatus\r\n} from 'actions/spendActions'\r\n\r\nimport { RadioButtonE } from 'UI/CustomComponents/Controls';\r\n\r\nclass SPCapitalIQData extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n SPCapitalIQData: [],\r\n hierarchyIndustryTree: [],\r\n expandedKeys: {},\r\n isCapIQLicesend: false,\r\n checkedIndustries: [],\r\n isError: 'No',\r\n isLoading: true,\r\n responseMsg: '',\r\n isSaveInProgress: false\r\n }\r\n\r\n this.getNestedChildren = this.getNestedChildren.bind(this)\r\n this.LoadData = this.LoadData.bind(this)\r\n this.nodeTemplate = this.nodeTemplate.bind(this)\r\n this.handleIndustrySelect = this.handleIndustrySelect.bind(this)\r\n this.handleSave = this.handleSave.bind(this)\r\n }\r\n\r\n //Convert parent-child data into nested JSON object\r\n getNestedChildren(arr, parent) {\r\n var out = []\r\n for (var i in arr) {\r\n if (arr[i].parent == parent) {\r\n var children = this.getNestedChildren(arr, arr[i].key)\r\n if (children.length) {\r\n arr[i].children = children\r\n }\r\n out.push(arr[i])\r\n }\r\n }\r\n return out\r\n }\r\n\r\n LoadData() {\r\n var self = this;\r\n this.props.setPopUpTabLoadingStatus(true);\r\n this.props.getSPCapitalIQData(this.props.spendDetails.supplierDetails[\"capIQId\"])\r\n .then((capIQResponse) => {\r\n if (capIQResponse.status === 200) {\r\n if (capIQResponse.data.Result.length > 0) {\r\n this.setState({\r\n SPCapitalIQData: capIQResponse.data.Result[0],\r\n isLoading: false, isError: 'No', responseMsg: '',\r\n isCapIQLicesend: self.props.user.user.applicationFeatures.findIndex(a => a.Action === 'CapIQLinkAccess') > -1 ? true : false\r\n });\r\n }\r\n else {\r\n this.setState({\r\n isLoading: false, isError: 'Yes', responseMsg: this.props.content.noData\r\n })\r\n }\r\n }\r\n else {\r\n this.setState({ isError: 'Yes', isLoading: 'false', responseMsg: this.props.content.error })\r\n }\r\n }).catch((error) => {\r\n this.setState({ isError: 'Yes', isLoading: 'false', responseMsg: this.props.content.error })\r\n })\r\n\r\n this.props.getCapIQClassificationIndustries(this.props.spendDetails.supplierDetails[\"capIQId\"])\r\n .then((response) => {\r\n if (response.status === 200) {\r\n this.props.setPopUpTabLoadingStatus(false);\r\n var hierarchyTree = []\r\n var checkedIndustries = []\r\n response.data.Result.map(function (row, index) {\r\n var obj = { 'key': row[\"INDUSTRY_ID\"], 'label': row[\"INDUSTRY_DESC\"], 'parent': row[\"SUB_PARENT_ID\"], 'industryLevel': row[\"INDUSTRY_LEVEL\"], 'primaryFlag': row[\"PRIMARY_FLAG\"] }\r\n hierarchyTree.push(obj)\r\n var industryCheckedFlags = { 'key': row[\"INDUSTRY_ID\"], 'checkedFlag': self.props.spendDetails.L5IndustryID === row[\"INDUSTRY_ID\"] ? true : false }\r\n checkedIndustries.push(industryCheckedFlags)\r\n })\r\n\r\n var objectData = []\r\n try {\r\n objectData = this.getNestedChildren(hierarchyTree, null)//Start with null as parent\r\n }\r\n catch (e) { }\r\n\r\n let expandedKeys = { ...this.state.expandedKeys };\r\n hierarchyTree.map(function (item) {\r\n expandedKeys[item.key] = true\r\n });\r\n this.setState({\r\n hierarchyIndustryTree: objectData,\r\n expandedKeys: expandedKeys, checkedIndustries: checkedIndustries,\r\n })\r\n }\r\n else {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n this.setState({ isError: 'Yes', isLoading: 'false', responseMsg: '' })\r\n }\r\n }).catch((error) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n this.setState({ isError: 'Yes', isLoading: 'false', responseMsg: '' })\r\n })\r\n }\r\n\r\n nodeTemplate(node) {\r\n if (node.industryLevel === 4 && node.primaryFlag === 1) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n \r\n
\r\n {this.props.content.userInformation}
\r\n \r\n
\r\n \r\n
\r\n {this.props.content.ref}
\r\n {this.props.content.vendorID}
\r\n {this.props.content.ERP}
\r\n {this.props.content.buyerRegion}
\r\n {this.props.content.businessUnit}
\r\n \r\n \r\n \r\n
\r\n {this.state.classificationData[\"REF_NUMBER\"] !== null ? this.state.classificationData[\"REF_NUMBER\"] : ''}
\r\n {this.state.classificationData[\"VENDOR_ID\"]}
\r\n {this.state.classificationData[\"ERP_SYSTEM\"]}
\r\n {this.state.classificationData[\"BUYER_REGION\"]}
\r\n {this.state.classificationData[\"BUSINESS_UNIT\"]}
\r\n \r\n \r\n {this.props.content.deduplication}
\r\n \r\n
\r\n \r\n
\r\n {this.props.content.dedupeKey}
\r\n {this.props.content.aggregatedRecords}
\r\n {this.props.content.aggregatedInvoiceSpend}
\r\n {this.props.content.aggregatedPOSpend}
\r\n {this.props.content.aggregatedInvoiceCount}
\r\n {this.props.content.aggregatedPOCount}
\r\n {this.props.content.aggregatedPaymentCount}
\r\n \r\n
\r\n {this.state.classificationData[\"DEDUP_KEY\"]}
\r\n {this.state.classificationData[\"AGGREGATE_RECORDS\"] !== null ? formatThousands(this.state.classificationData[\"AGGREGATE_RECORDS\"]) : ''}
\r\n {this.state.classificationData[\"AGGREGATE_INVOICE_SPEND\"] !== null ? this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()] + formatThousands(convertToMillion(this.state.classificationData[\"AGGREGATE_INVOICE_SPEND\"], true)) : ''}
\r\n {this.state.classificationData[\"AGGREGATE_PO_SPEND\"] !== null ? this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()] + formatThousands(convertToMillion(this.state.classificationData[\"AGGREGATE_PO_SPEND\"], true)) : ''}
\r\n {this.state.classificationData[\"AGGREGATE_INVOICE_COUNT\"] !== null ? formatThousands(this.state.classificationData[\"AGGREGATE_INVOICE_COUNT\"]) : ''}
\r\n {this.state.classificationData[\"AGGREGATE_PO_COUNT\"] !== null ? formatThousands(this.state.classificationData[\"AGGREGATE_PO_COUNT\"]) : ''}
\r\n {this.state.classificationData[\"AGGREGATE_PAYMENT_COUNT\"] !== null ? formatThousands(this.state.classificationData[\"AGGREGATE_PAYMENT_COUNT\"]) : ''}
\r\n {this.props.content.classification}
\r\n \r\n
\r\n {/* \r\n
\r\n {this.props.content.DMCCategorySource}
\r\n {this.props.content.DMCIndustryID}
\r\n {this.props.content.overrideIndustry}
\r\n {this.props.content.finalIndustryID}
\r\n {this.props.content.descriptionLevel}
\r\n {/* {this.props.content.saveOverrideIndustry}
*/}\r\n \r\n \r\n \r\n
\r\n {this.state.classificationData[\"DMC_CATEGORY_SOURCE\"]}
\r\n {this.state.classificationData[\"DMC_INDUSTRY_ID\"]}
\r\n \r\n this.setState({overrideIndustryID: event.target.value})}\r\n size=\"13\"\r\n style={{ fontSize: '0.75rem', height: '25px', textAlign: 'left' }}\r\n disabled\r\n />\r\n
\r\n {this.state.isCapIQLicesend && this.state.classificationData[\"FINAL_INDUSTRY_ID\"] !== undefined && this.state.classificationData[\"FINAL_INDUSTRY_ID\"] !== null ?\r\n \r\n :\r\n \r\n {this.state.classificationData[\"FINAL_INDUSTRY_ID\"]}
\r\n }\r\n {this.state.classificationData[\"FINAL_INDUSTRY_DESCRIPTION\"]}
\r\n \r\n {/* */}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
*/}\r\n {this.state.hierarchyPathTree.length > 0 ?\r\n \r\n
: null\r\n }\r\n \r\n
\r\n {this.props.content.hierarchyPath}
\r\n \r\n
\r\n \r\n {\r\n Object.keys(this.state.expandedKeys).length > 0 ?\r\n
\r\n \r\n
\r\n : null\r\n }\r\n {/* \r\n \r\n \r\n
*/}\r\n - \r\n {_this.state.nestedVerticleData.map((text, j) =>\r\n
- \r\n \r\n \r\n\t\t\t\t\t )}\r\n
\r\n this.handleIndustrySelect(node.key)} defaultValue={node.key} >{node.label}\r\n
\r\n \r\n )\r\n }\r\n else {\r\n if (node.industryLevel >= 3) {\r\n return (\r\n \r\n x.key === node.key).checkedFlag} onClick={() => this.handleIndustrySelect(node.key)}\r\n name={node.key} value={node.label} />\r\n
\r\n \r\n this.handleIndustrySelect(node.key)} defaultValue={node.key} >{node.label}\r\n
\r\n \r\n )\r\n }\r\n else {\r\n return (node.label)\r\n }\r\n }\r\n }\r\n\r\n handleIndustrySelect(key) {\r\n let updatedCheckedIndustries = []\r\n this.state.checkedIndustries.map(function (row) {\r\n if (key !== row['key'])\r\n row[\"checkedFlag\"] = false\r\n else\r\n row[\"checkedFlag\"] = true\r\n updatedCheckedIndustries.push(row)\r\n });\r\n\r\n if (this.props.spendDetails.L5IndustryID === key)\r\n this.props.trackSupplierDrillDownChanges(false)\r\n else\r\n this.props.trackSupplierDrillDownChanges(true)\r\n\r\n this.setState({ checkedIndustries: updatedCheckedIndustries })\r\n }\r\n\r\n handleSave() {\r\n var self = this;\r\n let GICSID = this.state.checkedIndustries.find(x => x.checkedFlag === true)\r\n if (GICSID !== undefined && GICSID !== null && GICSID[\"key\"] !== this.props.spendDetails.L5IndustryID) {\r\n this.setState({ responseMsg: '', isError: 'No', isSaveInProgress: true, isLoading: true })\r\n const record = {\r\n VS_ID: this.props.spendDetails.currentActiveRequest.VS_ID,\r\n DMC_ID: this.props.spendDetails.currentActiveRequest.DMC_ID,\r\n DATA_COLLECTIONS_SKEY: this.props.spendDetails.supplierDetails[\"SKEY\"],\r\n USER_ID: this.props.user.user.Email,\r\n FLAG_SOLUTION: \"No\",\r\n FLAG_INDUSTRY: \"Yes\",\r\n FLAG_INP: \"No\",\r\n FLAG_CONFIRMED: \"No\",\r\n SCOPE_SOURCE: this.props.spendDetails.vendorDetails[\"scopeSource\"],\r\n OVERRIDE_GICS: GICSID[\"key\"],\r\n CONFIRMED: null,\r\n EXCLUSION_REASON: null,\r\n GOODS_OR_SERVICE: null,\r\n DIRECT_SPEND: null,\r\n SAP_ARIBA_BUY_PROCESS: null,\r\n SOURCING_ELIGIBLE: null,\r\n BUYING_INV_ELIGIBLE: null,\r\n REQUISITION_ABLE: null,\r\n REQUISITION_TYPE: null,\r\n CONTRACT_INV_ELIGIBLE: null,\r\n COMMERCE_AUTOMATION_ELIGIBLE: null,\r\n SUPP_CHAIN_COLLAB_ELIGIBLE: null,\r\n PAYABLES_ELIGIBLE: null,\r\n SAP_FIELDGLASS_ELIGIBLE: null,\r\n SAP_CONCUR_ELIGIBLE: null,\r\n REQUEST_NAME: \"CAPIQ_Tab\"\r\n };\r\n this.props.setPopUpTabLoadingStatus(true)\r\n this.props.supplierDrillDownUpdate(record)\r\n .then((response) => {\r\n if (response.status == 200) {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n this.props.trackSupplierDrillDownChanges(false)\r\n this.props.trackSupplierDrillDownSave(true)\r\n this.props.storeFinalIndustryID(GICSID[\"key\"])\r\n this.setState({ responseMsg: this.props.content.overrideMessage, isError: 'No', isSaveInProgress: false, isLoading: false })\r\n }\r\n }).catch((error) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isSaveInProgress: false, isLoading: false })\r\n }\r\n else {\r\n this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isSaveInProgress: false, isLoading: false })\r\n }\r\n })\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.LoadData();\r\n }\r\n\r\n render() {\r\n var address = []\r\n address.push(this.state.SPCapitalIQData[\"COMPANY_NAME\"])\r\n var addressDetails = this.state.SPCapitalIQData[\"COMPANY_ADDRESS\"] !== undefined ? this.state.SPCapitalIQData[\"COMPANY_ADDRESS\"].split(\"|\").map(item => item.trim()) : undefined;\r\n var finalAddress = this.state.SPCapitalIQData[\"COMPANY_ADDRESS\"] !== undefined ? addressDetails.filter(Boolean).join(' | ') : undefined;\r\n address.push(finalAddress)\r\n var companyDetails = address.filter(Boolean).join(' | ');\r\n var val = \"https://www.capitaliq.com/ciqdotnet/company.aspx?leftlink=true&companyId=\" + this.state.SPCapitalIQData[\"COMPANY_ID\"]\r\n return (\r\n \r\n x.key === node.key).checkedFlag} onClick={() => this.handleIndustrySelect(node.key)}\r\n name={node.key} value={node.label} />\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content.spendAnalysis.supplierDrilldown.SPCapitalIQ,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n user: state.default,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getSPCapitalIQSuccess: message => dispatch(getSPCapitalIQSuccess(message)),\r\n getSPCapitalIQFailure: error => dispatch(getSPCapitalIQFailure(error)),\r\n getSPCapitalIQLoading: bool => dispatch(getSPCapitalIQLoading(bool)),\r\n getSPCapitalIQData: (CapIQID) => dispatch(getSPCapitalIQData(CapIQID)),\r\n getCapIQClassificationIndustries: (CapIQID) => dispatch(getCapIQClassificationIndustries(CapIQID)),\r\n trackSupplierDrillDownChanges: message => dispatch(trackSupplierDrillDownChanges(message)),\r\n trackSupplierDrillDownSave: message => dispatch(trackSupplierDrillDownSave(message)),\r\n supplierDrillDownUpdate: (record) => dispatch(supplierDrillDownUpdate(record)),\r\n storeFinalIndustryID: (L5Industry) => dispatch(storeFinalIndustryID(L5Industry)),\r\n setPopUpTabLoadingStatus: bool => dispatch(setPopUpTabLoadingStatus(bool)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SPCapitalIQData); ","import React, { Fragment } from 'react';\r\nimport { connect } from 'react-redux'\r\nimport { formatThousands } from 'utils/Utils'\r\nimport { Tree } from 'primereact/tree';\r\nimport { path } from 'Constants'\r\nimport { RadioButton } from 'material-ui';\r\nimport classNames from \"classnames\";\r\nimport {\r\n getSPCapitalIQUltimateParentData,\r\n getSPCapitalIQUltimateParentLoading,\r\n getSPCapitalIQUltimateParentSuccess,\r\n getSPCapitalIQUltimateParentFailure,\r\n getCapIQClassificationIndustries,\r\n trackSupplierDrillDownChanges,\r\n trackSupplierDrillDownSave,\r\n supplierDrillDownUpdate,\r\n storeFinalIndustryID,\r\n setPopUpTabLoadingStatus\r\n} from 'actions/spendActions'\r\n\r\nimport { RadioButtonE } from 'UI/CustomComponents/Controls';\r\n\r\nclass SPCapitalIQUltimateParent extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n SPCapitalIQUltimateParentData: [],\r\n hierarchyIndustryTree: [],\r\n expandedKeys: {},\r\n isCapIQLicesend: false,\r\n checkedIndustries: [],\r\n isError: 'No',\r\n isLoading: true,\r\n responseMsg: '',\r\n isSaveInProgress: false\r\n }\r\n\r\n this.getNestedChildren = this.getNestedChildren.bind(this)\r\n this.LoadData = this.LoadData.bind(this)\r\n this.nodeTemplate = this.nodeTemplate.bind(this)\r\n this.handleIndustrySelect = this.handleIndustrySelect.bind(this)\r\n this.handleSave = this.handleSave.bind(this)\r\n }\r\n\r\n //Convert parent-child data into nested JSON object\r\n getNestedChildren(arr, parent) {\r\n var out = []\r\n for (var i in arr) {\r\n if (arr[i].parent == parent) {\r\n var children = this.getNestedChildren(arr, arr[i].key)\r\n if (children.length) {\r\n arr[i].children = children\r\n }\r\n out.push(arr[i])\r\n }\r\n }\r\n return out\r\n }\r\n\r\n LoadData() {\r\n var self = this;\r\n this.props.setPopUpTabLoadingStatus(true);\r\n this.props.getSPCapitalIQUltimateParentData(this.props.spendDetails.supplierDetails[\"parentCapIQId\"])\r\n .then((capIQResponse) => {\r\n if (capIQResponse.status === 200) {\r\n if (capIQResponse.data.Result.length > 0) {\r\n this.setState({\r\n SPCapitalIQUltimateParentData: capIQResponse.data.Result[0],\r\n isLoading: false, isError: 'No', responseMsg: '',\r\n isCapIQLicesend: self.props.user.user.applicationFeatures.findIndex(a => a.Action === 'CapIQLinkAccess') > -1 ? true : false\r\n })\r\n }\r\n else {\r\n this.setState({\r\n isLoading: false, isError: 'Yes', responseMsg: this.props.content.noData\r\n })\r\n }\r\n }\r\n else {\r\n this.setState({ isError: 'Yes', isLoading: 'false', responseMsg: this.props.content.error })\r\n }\r\n }).catch((error) => {\r\n this.setState({ isError: 'Yes', isLoading: 'false', responseMsg: this.props.content.error })\r\n })\r\n\r\n this.props.getCapIQClassificationIndustries(this.props.spendDetails.supplierDetails[\"parentCapIQId\"])\r\n .then((response) => {\r\n if (response.status === 200) {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n if (response.data.Result.length > 0) {\r\n var hierarchyTree = []\r\n var checkedIndustries = []\r\n response.data.Result.map(function (row, index) {\r\n var obj = { 'key': row[\"INDUSTRY_ID\"], 'label': row[\"INDUSTRY_DESC\"], 'parent': row[\"SUB_PARENT_ID\"], 'industryLevel': row[\"INDUSTRY_LEVEL\"], 'primaryFlag': row[\"PRIMARY_FLAG\"] }\r\n hierarchyTree.push(obj)\r\n var industryCheckedFlags = { 'key': row[\"INDUSTRY_ID\"], 'checkedFlag': self.props.spendDetails.L5IndustryID === row[\"INDUSTRY_ID\"] ? true : false }\r\n checkedIndustries.push(industryCheckedFlags)\r\n })\r\n var objectData = []\r\n try {\r\n objectData = this.getNestedChildren(hierarchyTree, null)//Start with null as parent\r\n }\r\n catch (e) { }\r\n\r\n let expandedKeys = { ...this.state.expandedKeys };\r\n hierarchyTree.map(function (item) {\r\n expandedKeys[item.key] = true\r\n });\r\n this.setState({\r\n hierarchyIndustryTree: objectData,\r\n expandedKeys: expandedKeys, checkedIndustries: checkedIndustries\r\n })\r\n }\r\n else {\r\n this.setState({\r\n isLoading: false, isError: 'Yes', responseMsg: this.props.content.noData\r\n })\r\n }\r\n }\r\n else {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n this.setState({ isError: 'Yes', isLoading: 'false', responseMsg: '' })\r\n }\r\n }).catch((error) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n this.setState({ isError: 'Yes', isLoading: 'false', responseMsg: '' })\r\n })\r\n }\r\n\r\n nodeTemplate(node) {\r\n if (node.industryLevel === 4 && node.primaryFlag === 1) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.props.content.companyNameAndAddress}
\r\n {companyDetails}
\r\n {this.props.content.companyDetails}
\r\n \r\n
\r\n \r\n
\r\n {this.props.content.CapIQID}
\r\n {this.props.content.type}
\r\n {this.props.content.companyStatus}
\r\n {this.props.content.employees}
\r\n {this.props.content.website}
\r\n \r\n \r\n \r\n {this.state.isCapIQLicesend && this.state.SPCapitalIQData[\"COMPANY_ID\"] !== undefined && this.state.SPCapitalIQData[\"COMPANY_ID\"] !== null ?\r\n \r\n :\r\n
\r\n {this.state.SPCapitalIQData[\"COMPANY_ID\"]}
\r\n }\r\n {this.state.SPCapitalIQData[\"COMPANY_TYPE\"]}
\r\n {this.state.SPCapitalIQData[\"COMPANY_STATUS\"]}
\r\n {this.state.SPCapitalIQData[\"EMPLOYEE_COUNT\"] !== undefined && this.state.SPCapitalIQData[\"EMPLOYEE_COUNT\"] !== null ? formatThousands(this.state.SPCapitalIQData[\"EMPLOYEE_COUNT\"]) : ''}
\r\n \r\n {this.state.SPCapitalIQData[\"WEBPAGE\"] !== null ?\r\n {this.state.SPCapitalIQData[\"WEBPAGE\"]}\r\n : ''}\r\n
\r\n \r\n \r\n {this.props.content.financialInformation}
\r\n \r\n
\r\n {this.state.hierarchyIndustryTree.length > 0 ?\r\n \r\n
\r\n {this.props.content.currentFiscalYear}
\r\n {this.props.content.currency}
\r\n {this.props.content.totalRevenue}
\r\n {this.props.content.grossMargin}
\r\n {this.props.content.EBITDAMargin}
\r\n {this.props.content.daysSalesOutstanding}
\r\n \r\n \r\n
\r\n {this.state.SPCapitalIQData[\"FISCAL_YEAR\"]}
\r\n {this.state.SPCapitalIQData[\"CURRENCY_CODE\"]}
\r\n \r\n {this.state.SPCapitalIQData[\"TOT_REV\"] !== undefined && this.state.SPCapitalIQData[\"TOT_REV\"] !== null ?\r\n this.state.SPCapitalIQData[\"REV_UNIT_TYPE_VALUE\"] !== undefined && this.state.SPCapitalIQData[\"REV_UNIT_TYPE_VALUE\"] !== null ?\r\n formatThousands(((this.state.SPCapitalIQData[\"TOT_REV\"] * this.state.SPCapitalIQData[\"REV_UNIT_TYPE_VALUE\"]) / 1000000).toFixed(2)) + \" M\" :\r\n formatThousands(this.state.SPCapitalIQData[\"TOT_REV\"].toFixed(2)) : ''}\r\n
\r\n {this.state.SPCapitalIQData[\"GRO_MARG\"] !== undefined && this.state.SPCapitalIQData[\"GRO_MARG\"] !== null ? formatThousands(this.state.SPCapitalIQData[\"GRO_MARG\"].toFixed(2)) + ' % ' : ''}
\r\n {this.state.SPCapitalIQData[\"EBITDA_MARG\"] !== undefined && this.state.SPCapitalIQData[\"EBITDA_MARG\"] !== null ? formatThousands(this.state.SPCapitalIQData[\"EBITDA_MARG\"].toFixed(2)) + ' % ' : ''}
\r\n {this.state.SPCapitalIQData[\"DSO\"] !== undefined && this.state.SPCapitalIQData[\"DSO\"] !== null ? formatThousands(this.state.SPCapitalIQData[\"DSO\"].toFixed(2)) : ''}
\r\n \r\n \r\n
\r\n : null\r\n }\r\n \r\n
\r\n \r\n
\r\n {this.props.content.industryClassification}
\r\n \r\n {this.props.content.industryOverrideMessage}
\r\n {/* \r\n
*/}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {Object.keys(this.state.expandedKeys).length > 0 ?\r\n
\r\n \r\n
\r\n : null\r\n }\r\n \r\n this.handleIndustrySelect(node.key)} defaultValue={node.key} >{node.label}\r\n
\r\n \r\n )\r\n }\r\n else {\r\n if (node.industryLevel >= 3) {\r\n return (\r\n \r\n x.key === node.key).checkedFlag} onClick={() => this.handleIndustrySelect(node.key)}\r\n name={node.key} value={node.label} />\r\n
\r\n \r\n this.handleIndustrySelect(node.key)} defaultValue={node.key} >{node.label}\r\n
\r\n \r\n )\r\n }\r\n else {\r\n return (node.label)\r\n }\r\n }\r\n }\r\n\r\n handleIndustrySelect(key) {\r\n let updatedCheckedIndustries = []\r\n this.state.checkedIndustries.map(function (row) {\r\n if (key !== row['key'])\r\n row[\"checkedFlag\"] = false\r\n else\r\n row[\"checkedFlag\"] = true\r\n updatedCheckedIndustries.push(row)\r\n });\r\n\r\n if (this.props.spendDetails.L5IndustryID === key)\r\n this.props.trackSupplierDrillDownChanges(false)\r\n else\r\n this.props.trackSupplierDrillDownChanges(true)\r\n\r\n this.setState({ checkedIndustries: updatedCheckedIndustries })\r\n }\r\n\r\n handleSave() {\r\n var self = this;\r\n let GICSID = this.state.checkedIndustries.find(x => x.checkedFlag === true)\r\n if (GICSID !== undefined && GICSID !== null && GICSID[\"key\"] !== this.props.spendDetails.L5IndustryID) {\r\n this.setState({ responseMsg: '', isError: 'No', isSaveInProgress: true, isLoading: true })\r\n const record = {\r\n VS_ID: this.props.spendDetails.currentActiveRequest.VS_ID,\r\n DMC_ID: this.props.spendDetails.currentActiveRequest.DMC_ID,\r\n DATA_COLLECTIONS_SKEY: this.props.spendDetails.supplierDetails[\"SKEY\"],\r\n USER_ID: this.props.user.user.Email,\r\n FLAG_SOLUTION: \"No\",\r\n FLAG_INDUSTRY: \"Yes\",\r\n FLAG_INP: \"No\",\r\n FLAG_CONFIRMED: \"No\",\r\n SCOPE_SOURCE: this.props.spendDetails.vendorDetails[\"scopeSource\"],\r\n OVERRIDE_GICS: GICSID[\"key\"],\r\n CONFIRMED: null,\r\n EXCLUSION_REASON: null,\r\n GOODS_OR_SERVICE: null,\r\n DIRECT_SPEND: null,\r\n SAP_ARIBA_BUY_PROCESS: null,\r\n SOURCING_ELIGIBLE: null,\r\n BUYING_INV_ELIGIBLE: null,\r\n REQUISITION_ABLE: null,\r\n REQUISITION_TYPE: null,\r\n CONTRACT_INV_ELIGIBLE: null,\r\n COMMERCE_AUTOMATION_ELIGIBLE: null,\r\n SUPP_CHAIN_COLLAB_ELIGIBLE: null,\r\n PAYABLES_ELIGIBLE: null,\r\n SAP_FIELDGLASS_ELIGIBLE: null,\r\n SAP_CONCUR_ELIGIBLE: null,\r\n REQUEST_NAME: \"ParentCAPIQ_Tab\"\r\n };\r\n this.props.setPopUpTabLoadingStatus(true)\r\n this.props.supplierDrillDownUpdate(record)\r\n .then((response) => {\r\n if (response.status == 200) {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n this.props.trackSupplierDrillDownChanges(false)\r\n this.props.trackSupplierDrillDownSave(true)\r\n this.props.storeFinalIndustryID(GICSID[\"key\"])\r\n this.setState({ responseMsg: this.props.content.overrideMessage, isError: 'No', isSaveInProgress: false, isLoading: false })\r\n }\r\n }).catch((error) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isSaveInProgress: false, isLoading: false })\r\n }\r\n else {\r\n this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isSaveInProgress: false, isLoading: false })\r\n }\r\n })\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n if (this.props.spendDetails.supplierDetails[\"parentCapIQId\"] !== undefined && this.props.spendDetails.supplierDetails[\"parentCapIQId\"] !== null)\r\n this.LoadData();\r\n else\r\n this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isSaveInProgress: false, isLoading: false })\r\n }\r\n\r\n render() {\r\n let address = []\r\n let addressDetails = ''\r\n let finalAddress = ''\r\n let companyDetails = ''\r\n let val = ''\r\n if (this.props.spendDetails.supplierDetails[\"parentCapIQId\"] !== undefined && this.props.spendDetails.supplierDetails[\"parentCapIQId\"] !== null) {\r\n address.push(this.state.SPCapitalIQUltimateParentData[\"COMPANY_NAME\"])\r\n addressDetails = this.state.SPCapitalIQUltimateParentData[\"COMPANY_ADDRESS\"] !== undefined ? this.state.SPCapitalIQUltimateParentData[\"COMPANY_ADDRESS\"].split(\"|\").map(item => item.trim()) : undefined;\r\n finalAddress = this.state.SPCapitalIQUltimateParentData[\"COMPANY_ADDRESS\"] !== undefined ? addressDetails.filter(Boolean).join(' | ') : undefined;\r\n address.push(finalAddress)\r\n companyDetails = address.filter(Boolean).join(' | ');\r\n val = \"https://www.capitaliq.com/ciqdotnet/company.aspx?leftlink=true&companyId=\" + this.state.SPCapitalIQUltimateParentData[\"COMPANY_ID\"]\r\n }\r\n return (\r\n \r\n x.key === node.key).checkedFlag} onClick={() => this.handleIndustrySelect(node.key)}\r\n name={node.key} value={node.label} />\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content.spendAnalysis.supplierDrilldown.SPCapitalIQUltimateParent,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n user: state.default,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getSPCapitalIQUltimateParentSuccess: message => dispatch(getSPCapitalIQUltimateParentSuccess(message)),\r\n getSPCapitalIQUltimateParentFailure: error => dispatch(getSPCapitalIQUltimateParentFailure(error)),\r\n getSPCapitalIQUltimateParentLoading: bool => dispatch(getSPCapitalIQUltimateParentLoading(bool)),\r\n getSPCapitalIQUltimateParentData: (CapIQID) => dispatch(getSPCapitalIQUltimateParentData(CapIQID)),\r\n getCapIQClassificationIndustries: (CapIQID) => dispatch(getCapIQClassificationIndustries(CapIQID)),\r\n trackSupplierDrillDownChanges: message => dispatch(trackSupplierDrillDownChanges(message)),\r\n trackSupplierDrillDownSave: message => dispatch(trackSupplierDrillDownSave(message)),\r\n supplierDrillDownUpdate: (record) => dispatch(supplierDrillDownUpdate(record)),\r\n storeFinalIndustryID: (L5Industry) => dispatch(storeFinalIndustryID(L5Industry)),\r\n setPopUpTabLoadingStatus: bool => dispatch(setPopUpTabLoadingStatus(bool)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SPCapitalIQUltimateParent);","import React, { Fragment } from 'react';\r\nimport { connect } from 'react-redux'\r\nimport Select from 'react-select'\r\nimport classNames from \"classnames\"\r\nimport { path } from 'Constants'\r\nimport cloneDeep from 'lodash/cloneDeep';\r\nimport { roundFix, formatThousands, getNonEmptyValue, isColumnMapped } from 'utils/Utils'\r\nimport { Formik, withFormik } from 'formik'\r\nimport { ControlTextE, SelectE, CheckboxE, RadioButtonE, ButtonE, ButtonNativeE, TextAreaE, ControlTextNativeE } from 'UI/CustomComponents/Controls';\r\n\r\nimport {\r\n getSupplierDrillScopeDataLoading,\r\n getSupplierDrillScopeDataSuccess,\r\n getSupplierDrillScopeDataFailure,\r\n getSupplierDrillScopeData,\r\n defineScopeLoading,\r\n supplierDrillDownUpdate,\r\n trackSupplierDrillDownChanges,\r\n trackSupplierDrillDownSave,\r\n setPopUpTabLoadingStatus\r\n} from 'actions/spendActions'\r\n\r\nconst dropdownValues = [{ label: 'Yes', value: 'Yes' }, { label: 'No', value: 'No' }];\r\n//const directSpendValues = [{label: 'No', value: 'No'}, {label: 'Yes', value: 'Yes'}];\r\nconst scopeValues = [{ label: 'Industry', value: 'Industry' }, { label: 'Override', value: 'Override' }];\r\nconst requisitionValues = [{ label: 'Catalog', value: 'Catalog' }, { label: 'Adhoc (non-catalog)', value: 'Adhoc (non-catalog)' }, { label: 'N/A', value: 'N/A' }]\r\nconst aribaBuyProcessValues = [{ label: 'Requisition: Catalog, Spot-Buy or Release Contract', value: 'Requisition: Catalog, Spot-Buy or Release Contract' },\r\n{ label: 'Requisition: Non-Catalog or Tactical Sourcing', value: 'Requisition: Non-Catalog or Tactical Sourcing' },\r\n{ label: 'Requisition: External Talent', value: 'Requisition: External Talent' },\r\n{ label: 'Consultancy/SOW Services: Active Mgmt, otherwise Invoice Against Contract', value: 'Consultancy/SOW Services: Active Mgmt, otherwise Invoice Against Contract' },\r\n{ label: 'Other Services: Active Mgmt, otherwise Invoice Against Contract', value: 'Other Services: Active Mgmt, otherwise Invoice Against Contract' },\r\n{ label: 'Invoice Against Contract', value: 'Invoice Against Contract' },\r\n{ label: 'Direct/MRO: Plan Driven PO', value: 'Direct/MRO: Plan Driven PO' },\r\n{ label: 'Direct/MRO: Asset Plan via Catalog', value: 'Direct/MRO: Asset Plan via Catalog' },\r\n{ label: 'Non-PO Invoice', value: 'Non-PO Invoice' },\r\n{ label: 'Travel and Expense', value: 'Travel and Expense' }]\r\n\r\nconst validate = values => {\r\n const errors = {};\r\n if (!values.firstName) {\r\n errors.firstName = 'Required';\r\n } else if (values.firstName.length > 15) {\r\n errors.firstName = 'Must be 15 characters or less';\r\n }\r\n\r\n if (!values.lastName) {\r\n errors.lastName = 'Required';\r\n } else if (values.lastName.length > 20) {\r\n errors.lastName = 'Must be 20 characters or less';\r\n }\r\n\r\n if (!values.email) {\r\n errors.email = 'Required';\r\n } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(values.email)) {\r\n errors.email = 'Invalid email address';\r\n }\r\n\r\n return errors;\r\n}\r\n\r\nclass ScopeAndMatch extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n warningRecords: [],\r\n errorRecords: [],\r\n warningDiv: true,\r\n errorDiv: true,\r\n supplierScopeDataCurrent: {},\r\n directSpendValues: [{ label: '', value: '' }, { label: 'No', value: 'No' }, { label: 'Yes', value: 'Yes' }],\r\n supplierScopeData: {\r\n ANID_OF_MATCHED_SUPPLIER: '',\r\n AN_MATCH_CRITERIA: \"\",\r\n ARIBA_NETWORK_MATCH: \"\",\r\n BUYING_INVOICING_ELIGIBLE: \"\",\r\n CATALOG_PROVIDER: \"\",\r\n COMMERCE_AUTOMATION_ELIGIBLE: \"\",\r\n CONTRACT_INVOICING_ELIGIBLE: \"\",\r\n DATA_COLLECTIONS_SKEY: '',\r\n DIRECT_SPEND: \"\",\r\n ENTERPRISE_ACCOUNT_REASON: \"\",\r\n EXCLUSION_REASON: \"\",\r\n FG_EXTERNAL_WORKFORCE: \"\",\r\n FG_SERVICES: '',\r\n PAYABLES_ELIGIBLE: \"\",\r\n REQUISITIONABLE: \"\",\r\n REQUISITION_TYPE: \"\",\r\n SAP_ARIBA_BUY_PROCESS: \"\",\r\n SAP_CONCUR_ELIGIBLE: \"\",\r\n SPOT_BUY_ELIGIBLE: \"\",\r\n SAP_FIELDGLASS_ELIGIBLE: \"\",\r\n SCOPE_SOURCE: \"\",\r\n SOURCING_ELIGIBLE: \"\",\r\n STANDARD_ACCOUNT_ELIGIBLE: \"\",\r\n STANDARD_OR_ENTERPRISE_ACCOUNT: \"\",\r\n SUPPLIER_NAME_ON_AN: '',\r\n SUPP_CHAIN_COLLAB_ELIGIBLE: \"\",\r\n TRANSACTED_ON_AN_IN_LAST_12_MTH: '',\r\n VENDOR_NAME: \"\",\r\n characterCount: 150,\r\n isUserCommentTextboxClicked: 'No',\r\n warningMessage: '',\r\n remaingHistoricalCommentsLength: 150,\r\n historicalSupplierComments: '',\r\n isSaveInProgress: false\r\n }\r\n }\r\n\r\n this.handleScopeSourceChange = this.handleScopeSourceChange.bind(this)\r\n this.isDisabled = this.isDisabled.bind(this)\r\n this.onSave = this.onSave.bind(this)\r\n this.onUpdate = this.onUpdate.bind(this)\r\n this.validateForWarning = this.validateForWarning.bind(this)\r\n this.validateForError = this.validateForError.bind(this)\r\n this.warningToggle = this.warningToggle.bind(this)\r\n this.errorToggle = this.errorToggle.bind(this)\r\n this.addWarningErroredRecord = this.addWarningErroredRecord.bind(this)\r\n this.getValidationDiv = this.getValidationDiv.bind(this)\r\n this.handleChange = this.handleChange.bind(this)\r\n this.hasRecordErrors = this.hasRecordErrors.bind(this)\r\n this.hasPendingChange = this.hasPendingChange.bind(this)\r\n this.onChange = this.onChange.bind(this)\r\n this.onBlur = this.onBlur.bind(this)\r\n this.onFocus = this.onFocus.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n }\r\n\r\n loadData() {\r\n this.props.setPopUpTabLoadingStatus(true);\r\n this.setState({ isLoading: true, isError: 'No', responseMsg: '' })\r\n this.props.getSupplierDrillScopeData(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.user.user.Email, this.props.spendDetails.supplierDetails[\"SKEY\"])\r\n .then((response) => {\r\n if (response.status === 200) {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n var scopData = response.data.Result['SP_UI_SUPPLIER_DRILL_SCOPE_DETAILS']\r\n var commentData = response.data.Result['SP_UI_SUPPLIER_COMMENT']\r\n this.props.getSupplierDrillScopeDataSuccess(scopData)\r\n const supplierData = scopData[0];\r\n const directSpendValues = this.state.directSpendValues;\r\n const rowIdx = directSpendValues.findIndex(item => {\r\n return item.label === supplierData.DIRECT_SPEND\r\n })\r\n if (rowIdx === -1) {\r\n directSpendValues.splice(0, 0, { label: supplierData.DIRECT_SPEND, value: supplierData.DIRECT_SPEND });\r\n }\r\n\r\n if (commentData.length > 0) {\r\n var historicalCommentsLength = commentData[0]['USER_COMMENT'].length\r\n var totalHistoricalComments = []\r\n totalHistoricalComments = commentData[0]['USER_COMMENT'].split('\\r\\n')\r\n //Prefix Text for each new comment is -----> mm/dd/yyyy - email: @@@@ your comment @@@@\r\n var prefixTextlength = 15 + this.props.user.user.Email.length + totalHistoricalComments.length\r\n var historicalCommentsLengthWithPrefix = historicalCommentsLength + prefixTextlength\r\n if (2000 - historicalCommentsLengthWithPrefix > 0) {\r\n this.setState({\r\n isLoading: false, isError: 'No', responseMsg: '', supplierScopeData: supplierData,\r\n directSpendValues: directSpendValues, supplierScopeDataCurrent: cloneDeep(supplierData),\r\n historicalSupplierComments: commentData[0]['USER_COMMENT'], remaingHistoricalCommentsLength: 2000 - historicalCommentsLengthWithPrefix\r\n })\r\n }\r\n else {\r\n this.setState({\r\n isLoading: false, isError: 'No', responseMsg: '', supplierScopeData: supplierData,\r\n directSpendValues: directSpendValues, supplierScopeDataCurrent: cloneDeep(supplierData),\r\n historicalSupplierComments: commentData[0]['USER_COMMENT'], remaingHistoricalCommentsLength: 0\r\n })\r\n }\r\n }\r\n else {\r\n this.setState({\r\n isLoading: false, isError: 'No', responseMsg: '', supplierScopeData: supplierData,\r\n directSpendValues: directSpendValues, supplierScopeDataCurrent: cloneDeep(supplierData)\r\n })\r\n }\r\n }\r\n else {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n }\r\n }).catch((error) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n })\r\n }\r\n\r\n onChange(e) {\r\n if (document.getElementById(\"userComments\") !== null && document.getElementById(\"userComments\").value.length === 0 &&\r\n !this.hasPendingChange()) {\r\n this.props.trackSupplierDrillDownChanges(false)\r\n }\r\n else if (document.getElementById(\"userComments\") !== null && document.getElementById(\"userComments\").value.length === 1) {\r\n this.props.trackSupplierDrillDownChanges(true)\r\n }\r\n\r\n if (this.state.remaingHistoricalCommentsLength < 150) {\r\n if (this.state.remaingHistoricalCommentsLength > 0)\r\n document.getElementById(\"userComments\").maxLength = this.state.remaingHistoricalCommentsLength\r\n else\r\n document.getElementById(\"userComments\").maxLength = 0\r\n this.setState({\r\n warningMessage: this.props.supplierComments.historicalCharactersLeft,\r\n characterCount: this.state.remaingHistoricalCommentsLength - e.currentTarget.value.length, isUserCommentTextboxClicked: 'Yes'\r\n })\r\n }\r\n else {\r\n this.setState({ warningMessage: this.props.supplierComments.charactersLeft, characterCount: 150 - e.currentTarget.value.length, isUserCommentTextboxClicked: 'Yes' })\r\n }\r\n }\r\n\r\n onBlur(e) {\r\n this.setState({ isUserCommentTextboxClicked: 'No' })\r\n }\r\n\r\n onFocus(e) {\r\n if (this.state.remaingHistoricalCommentsLength < 150) {\r\n document.getElementById(\"userComments\").maxLength = this.state.remaingHistoricalCommentsLength\r\n this.setState({\r\n warningMessage: this.props.supplierComments.historicalCharactersLeft,\r\n characterCount: this.state.remaingHistoricalCommentsLength - e.currentTarget.value.length, isUserCommentTextboxClicked: 'Yes'\r\n })\r\n }\r\n else {\r\n this.setState({ warningMessage: this.props.supplierComments.charactersLeft, characterCount: 150 - e.currentTarget.value.length, isUserCommentTextboxClicked: 'Yes' })\r\n }\r\n }\r\n\r\n isDisabled(field, values) {\r\n if (!this.props.userData.AllowEdit) {\r\n return true;\r\n }\r\n\r\n const scopeSource = values.SCOPE_SOURCE;\r\n\r\n if (scopeSource === 'Override' && field === 'EXCLUSION_REASON')\r\n return false\r\n\r\n if (scopeSource === 'Override' && getNonEmptyValue(values.EXCLUSION_REASON) === '')\r\n return false\r\n\r\n return true;\r\n }\r\n\r\n handleChange(value, field, props) {\r\n //props.setFieldValue(field, value)\r\n this.props.trackSupplierDrillDownChanges(true)\r\n const supplierScopeData = this.state.supplierScopeData\r\n supplierScopeData[field] = value;\r\n props.values[field] = value;\r\n const validationRecords = this.onUpdate(props.values)\r\n this.setState({\r\n supplierScopeData: supplierScopeData, warningRecords: validationRecords.warningRecords,\r\n errorRecords: validationRecords.errorRecords\r\n })\r\n }\r\n\r\n onUpdate(values) {\r\n var warningRecords = this.state.warningRecords;\r\n var errorRecords = this.state.errorRecords;\r\n this.validateForWarning(warningRecords, values);\r\n this.validateForError(errorRecords, values);\r\n return { warningRecords: warningRecords, errorRecords: errorRecords }\r\n }\r\n\r\n validateForWarning(warningRecords, values) {\r\n const warningMessages = this.props.contentDetailedFile.validationMessage.warningMessage;\r\n const exclusionReasonWarning = warningMessages.exclusionReasonWarning;\r\n const buyingInvoicingFieldGlassEligibleWarning = warningMessages.buyingInvoicingFieldGlassEligibleWarning\r\n const buyingInvoicingSupplyChainEligibleWarning = warningMessages.buyingInvoicingSupplyChainEligibleWarning\r\n const buyingInvoicingConcurEligibleWarning = warningMessages.buyingInvoicingConcurEligibleWarning\r\n const fieldGlassSCCEligibleWarning = warningMessages.fieldGlassSCCEligibleWarning\r\n\r\n var exclusionReason = values.EXCLUSION_REASON\r\n if (getNonEmptyValue(exclusionReason) !== '') {\r\n this.addWarningErroredRecord(exclusionReasonWarning, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(exclusionReasonWarning, warningRecords, false)\r\n }\r\n\r\n var buyingInvoicing = values.BUYING_INVOICING_ELIGIBLE;\r\n var fieldGlassEligible = values.fieldGlassEligible\r\n if (getNonEmptyValue(buyingInvoicing) === 'Yes' && getNonEmptyValue(fieldGlassEligible) === 'Yes') {\r\n this.addWarningErroredRecord(buyingInvoicingFieldGlassEligibleWarning, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(buyingInvoicingFieldGlassEligibleWarning, warningRecords, false)\r\n }\r\n\r\n var supplyChainEligible = values.SUPP_CHAIN_COLLAB_ELIGIBLE\r\n if (getNonEmptyValue(buyingInvoicing) === 'Yes' && getNonEmptyValue(supplyChainEligible) === 'Yes') {\r\n this.addWarningErroredRecord(buyingInvoicingSupplyChainEligibleWarning, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(buyingInvoicingSupplyChainEligibleWarning, warningRecords, false)\r\n }\r\n\r\n var concurEligible = values.SAP_CONCUR_ELIGIBLE\r\n if (getNonEmptyValue(buyingInvoicing) === 'Yes' && getNonEmptyValue(concurEligible) === 'Yes') {\r\n this.addWarningErroredRecord(buyingInvoicingConcurEligibleWarning, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(buyingInvoicingConcurEligibleWarning, warningRecords, false)\r\n }\r\n\r\n var fieldGlassEligible = values.SAP_FIELDGLASS_ELIGIBLE\r\n if (getNonEmptyValue(supplyChainEligible) === 'Yes' && getNonEmptyValue(fieldGlassEligible) === 'Yes') {\r\n this.addWarningErroredRecord(fieldGlassSCCEligibleWarning, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(fieldGlassSCCEligibleWarning, warningRecords, false)\r\n }\r\n }\r\n\r\n validateForError(errorRecords, values) {\r\n const errorMessages = this.props.contentDetailedFile.validationMessage.errorMessage;\r\n const buyingInvoicingError = errorMessages.buyingInvoicingError;\r\n const requisitionableTypeError1 = errorMessages.requisitionableTypeError1;\r\n const requisitionableTypeError2 = errorMessages.requisitionableTypeError2;\r\n const contractInvoicingError = errorMessages.contractInvoicingError;\r\n const supplyCommerceError = errorMessages.supplyCommerceError;\r\n\r\n var buyingInvoicing = values.BUYING_INVOICING_ELIGIBLE;\r\n var requisitionable = values.REQUISITIONABLE;\r\n var contractInvoicing = values.CONTRACT_INVOICING_ELIGIBLE;\r\n\r\n if ((getNonEmptyValue(buyingInvoicing) === 'Yes' && getNonEmptyValue(requisitionable) === 'Yes' && getNonEmptyValue(contractInvoicing) === 'Yes') ||\r\n (getNonEmptyValue(buyingInvoicing) === 'Yes' && getNonEmptyValue(requisitionable) === 'No' && getNonEmptyValue(contractInvoicing) === 'No')) {\r\n this.addWarningErroredRecord(buyingInvoicingError, errorRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(buyingInvoicingError, errorRecords, false)\r\n }\r\n\r\n var requisitionableType = values.REQUISITION_TYPE;\r\n if (getNonEmptyValue(requisitionable) === 'Yes' && getNonEmptyValue(requisitionableType) === 'N/A') {\r\n this.addWarningErroredRecord(requisitionableTypeError1, errorRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(requisitionableTypeError1, errorRecords, false)\r\n }\r\n\r\n if (getNonEmptyValue(requisitionable) === 'No' && getNonEmptyValue(requisitionableType) !== 'N/A') {\r\n this.addWarningErroredRecord(requisitionableTypeError2, errorRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(requisitionableTypeError2, errorRecords, false)\r\n }\r\n\r\n if (getNonEmptyValue(contractInvoicing) === 'Yes' && getNonEmptyValue(buyingInvoicing) === 'No') {\r\n this.addWarningErroredRecord(contractInvoicingError, errorRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(contractInvoicingError, errorRecords, false)\r\n }\r\n\r\n var supplyChain = values.SUPP_CHAIN_COLLAB_ELIGIBLE;\r\n var commerceAutomation = values.COMMERCE_AUTOMATION_ELIGIBLE;\r\n\r\n if (getNonEmptyValue(supplyChain) === 'Yes' && getNonEmptyValue(commerceAutomation) === 'Yes') {\r\n this.addWarningErroredRecord(supplyCommerceError, errorRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(supplyCommerceError, errorRecords, false)\r\n }\r\n }\r\n\r\n addWarningErroredRecord(reason, records, add) {\r\n var arr = records[reason];\r\n if (getNonEmptyValue(arr) === '') {\r\n arr = []\r\n }\r\n\r\n var eltIdx = arr.indexOf((1));\r\n if (eltIdx === -1 && add) {\r\n arr.push(1)\r\n } else if (eltIdx !== -1 && !add) {\r\n arr.splice(eltIdx, 1)\r\n }\r\n\r\n records[reason] = arr;\r\n }\r\n\r\n onSave(supplierScopeDataNew) {\r\n this.props.defineScopeLoading(true)\r\n let supplierScopeDataOld = this.state.supplierScopeDataCurrent\r\n this.setState({ isLoading: true, isError: 'No', isSaveInProgress: true, responseMsg: '' })\r\n let industryId = this.props.spendDetails.vendorDetails.overrideIndustryID ? this.props.spendDetails.vendorDetails.overrideIndustryID : null;\r\n const record = {\r\n VS_ID: this.props.spendDetails.currentActiveRequest.VS_ID,\r\n DMC_ID: this.props.spendDetails.currentActiveRequest.DMC_ID,\r\n DATA_COLLECTIONS_SKEY: supplierScopeDataNew['DATA_COLLECTIONS_SKEY'],\r\n USER_ID: this.props.user.user.Email,\r\n FLAG_SOLUTION: supplierScopeDataNew[\"SCOPE_SOURCE\"] === \"Override\" ? \"Yes\" : \"No\",\r\n FLAG_INDUSTRY: supplierScopeDataNew[\"SCOPE_SOURCE\"] === \"Industry\" ? \"Yes\" : \"No\",\r\n FLAG_INP: this.markFlagINP(supplierScopeDataOld, supplierScopeDataNew) ? \"Yes\" : \"No\",\r\n FLAG_CONFIRMED: \"No\",\r\n SCOPE_SOURCE: supplierScopeDataNew[\"SCOPE_SOURCE\"],\r\n OVERRIDE_GICS: industryId,\r\n CONFIRMED: null,\r\n EXCLUSION_REASON: supplierScopeDataNew[\"EXCLUSION_REASON\"],\r\n GOODS_OR_SERVICE: supplierScopeDataNew['GOODS_OR_SERVICE'],\r\n DIRECT_SPEND: supplierScopeDataNew[\"DIRECT_SPEND\"],\r\n SAP_ARIBA_BUY_PROCESS: supplierScopeDataNew[\"SAP_ARIBA_BUY_PROCESS\"],\r\n SOURCING_ELIGIBLE: supplierScopeDataNew[\"SOURCING_ELIGIBLE\"],\r\n BUYING_INV_ELIGIBLE: supplierScopeDataNew[\"BUYING_INVOICING_ELIGIBLE\"],\r\n REQUISITION_ABLE: supplierScopeDataNew[\"REQUISITIONABLE\"],\r\n REQUISITION_TYPE: supplierScopeDataNew[\"REQUISITION_TYPE\"],\r\n CONTRACT_INV_ELIGIBLE: supplierScopeDataNew[\"CONTRACT_INVOICING_ELIGIBLE\"],\r\n COMMERCE_AUTOMATION_ELIGIBLE: supplierScopeDataNew[\"COMMERCE_AUTOMATION_ELIGIBLE\"],\r\n SUPP_CHAIN_COLLAB_ELIGIBLE: supplierScopeDataNew[\"SUPP_CHAIN_COLLAB_ELIGIBLE\"],\r\n PAYABLES_ELIGIBLE: supplierScopeDataNew[\"PAYABLES_ELIGIBLE\"],\r\n SAP_FIELDGLASS_ELIGIBLE: supplierScopeDataNew[\"SAP_FIELDGLASS_ELIGIBLE\"],\r\n SAP_CONCUR_ELIGIBLE: supplierScopeDataNew[\"SAP_CONCUR_ELIGIBLE\"],\r\n SPOT_BUY_ELIGIBLE: supplierScopeDataNew[\"SPOT_BUY_ELIGIBLE\"],\r\n USER_COMMENT: document.getElementById(\"userComments\") != null && document.getElementById(\"userComments\") !== undefined ? document.getElementById(\"userComments\").value : '',\r\n REQUEST_NAME: \"ScopeAndMatch_Tab\"\r\n };\r\n this.props.setPopUpTabLoadingStatus(true)\r\n this.props.supplierDrillDownUpdate(record)\r\n .then((response) => {\r\n if (response.status === 200) {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n if (response.data.Result['SP_UI_SUPPLIER_DRILL_SCOPE_DETAILS'].length === 0) {\r\n this.props.defineScopeLoading(false)\r\n\r\n } else {\r\n this.props.defineScopeLoading(false)\r\n const supplierData = response.data.Result['SP_UI_SUPPLIER_DRILL_SCOPE_DETAILS'][0];\r\n var commentData = response.data.Result['SP_UI_SUPPLIER_COMMENT']\r\n const directSpendValues = this.state.directSpendValues;\r\n const rowIdx = directSpendValues.findIndex(item => {\r\n return item.label === supplierData.DIRECT_SPEND\r\n })\r\n if (rowIdx === -1) {\r\n directSpendValues.splice(0, 0, { label: supplierData.DIRECT_SPEND, value: supplierData.DIRECT_SPEND });\r\n }\r\n this.props.trackSupplierDrillDownChanges(false)\r\n this.props.trackSupplierDrillDownSave(true)\r\n document.getElementById(\"userComments\").value = ''\r\n\r\n if (commentData.length > 0) {\r\n var historicalCommentsLength = commentData[0]['USER_COMMENT'].length\r\n var totalHistoricalComments = []\r\n totalHistoricalComments = commentData[0]['USER_COMMENT'].split('\\r\\n')\r\n //Prefix Text for each new comment is -----> mm/dd/yyyy - email: @@@@ your comment @@@@\r\n var prefixTextlength = 15 + this.props.user.user.Email.length + totalHistoricalComments.length\r\n var historicalCommentsLengthWithPrefix = historicalCommentsLength + prefixTextlength\r\n if (2000 - historicalCommentsLengthWithPrefix > 0) {\r\n this.setState({\r\n historicalSupplierComments: commentData[0]['USER_COMMENT'],\r\n directSpendValues: directSpendValues, supplierScopeData: supplierData,\r\n supplierScopeDataCurrent: cloneDeep(supplierData), responseMsg: this.props.content.success,\r\n warningRecords: [], warningDiv: false, errorRecords: [], errorDiv: false,\r\n isError: 'No', isSaveInProgress: false, isLoading: false, remaingHistoricalCommentsLength: 2000 - historicalCommentsLengthWithPrefix\r\n })\r\n }\r\n else {\r\n this.setState({\r\n historicalSupplierComments: commentData[0]['USER_COMMENT'],\r\n directSpendValues: directSpendValues, supplierScopeData: supplierData,\r\n supplierScopeDataCurrent: cloneDeep(supplierData), responseMsg: this.props.content.success,\r\n warningRecords: [], warningDiv: false, errorRecords: [], errorDiv: false,\r\n isError: 'No', isSaveInProgress: false, isLoading: false, remaingHistoricalCommentsLength: 0\r\n })\r\n }\r\n }\r\n else {\r\n this.setState({\r\n historicalSupplierComments: '',\r\n directSpendValues: directSpendValues, supplierScopeData: supplierData,\r\n supplierScopeDataCurrent: cloneDeep(supplierData), responseMsg: this.props.content.success,\r\n warningRecords: [], warningDiv: false, errorRecords: [], errorDiv: false,\r\n isError: 'No', isSaveInProgress: false, isLoading: false, remaingHistoricalCommentsLength: 150\r\n })\r\n }\r\n }\r\n }\r\n else {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n }\r\n }).catch((error) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isSaveInProgress: false, isLoading: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isSaveInProgress: false, isLoading: false })\r\n }\r\n })\r\n }\r\n\r\n markFlagINP(supplierDataOld, supplierDataNew) {\r\n if (supplierDataOld[\"EXCLUSION_REASON\"] !== supplierDataNew[\"EXCLUSION_REASON\"]\r\n || supplierDataOld[\"DIRECT_SPEND\"] !== supplierDataNew[\"DIRECT_SPEND\"]) {\r\n return true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n handleScopeSourceChange(data, field, props) {\r\n this.setState({ scopeSource: data.value })\r\n }\r\n\r\n hasRecordErrors() {\r\n const errorRecords = this.state.errorRecords\r\n var errorRecordSize = 0;\r\n Object.values(errorRecords).forEach((item) => {\r\n errorRecordSize += item.length;\r\n })\r\n\r\n return errorRecordSize > 0\r\n }\r\n\r\n hasPendingChange() {\r\n for (const key in this.state.supplierScopeData) {\r\n if (this.state.supplierScopeData[key] !== this.state.supplierScopeDataCurrent[key] ||\r\n (document.getElementById(\"userComments\") !== null && document.getElementById(\"userComments\").value.length > 0)) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n getValidationDiv() {\r\n const warningRecords = this.state.warningRecords;\r\n const errorRecords = this.state.errorRecords;\r\n\r\n var warningRecordSize = 0;\r\n var totalWarningRecords = []\r\n Object.values(warningRecords).forEach((item) => {\r\n totalWarningRecords = totalWarningRecords.concat(item);\r\n })\r\n var warningDiv = Object.keys(warningRecords).map((key, index) => (\r\n warningRecords[key].length !== 0 ?\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.props.content.companyNameAndAddress}
\r\n {companyDetails}
\r\n {this.props.content.companyDetails}
\r\n \r\n
\r\n \r\n
\r\n {this.props.content.CapIQID}
\r\n {this.props.content.type}
\r\n {this.props.content.companyStatus}
\r\n {this.props.content.employees}
\r\n {this.props.content.website}
\r\n \r\n \r\n \r\n {this.state.isCapIQLicesend && this.state.SPCapitalIQUltimateParentData[\"COMPANY_ID\"] !== undefined && this.state.SPCapitalIQUltimateParentData[\"COMPANY_ID\"] !== null ?\r\n \r\n :\r\n
\r\n {this.state.SPCapitalIQUltimateParentData[\"COMPANY_ID\"]}
\r\n }\r\n {this.state.SPCapitalIQUltimateParentData[\"COMPANY_TYPE\"]}
\r\n {this.state.SPCapitalIQUltimateParentData[\"COMPANY_STATUS\"]}
\r\n {this.state.SPCapitalIQUltimateParentData[\"EMPLOYEE_COUNT\"] !== undefined && this.state.SPCapitalIQUltimateParentData[\"EMPLOYEE_COUNT\"] !== null ? formatThousands(this.state.SPCapitalIQUltimateParentData[\"EMPLOYEE_COUNT\"]) : ''}
\r\n \r\n {this.state.SPCapitalIQUltimateParentData[\"WEBPAGE\"] !== null ?\r\n {this.state.SPCapitalIQUltimateParentData[\"WEBPAGE\"]}\r\n : ''}\r\n
\r\n \r\n \r\n {this.props.content.financialInformation}
\r\n \r\n
\r\n {this.state.hierarchyIndustryTree.length > 0 ?\r\n \r\n
\r\n {this.props.content.currentFiscalYear}
\r\n {this.props.content.currency}
\r\n {this.props.content.totalRevenue}
\r\n {this.props.content.grossMargin}
\r\n {this.props.content.EBITDAMargin}
\r\n {this.props.content.daysSalesOutstanding}
\r\n \r\n \r\n
\r\n {this.state.SPCapitalIQUltimateParentData[\"FISCAL_YEAR\"]}
\r\n {this.state.SPCapitalIQUltimateParentData[\"CURRENCY_CODE\"]}
\r\n \r\n {this.state.SPCapitalIQUltimateParentData[\"TOT_REV\"] !== undefined && this.state.SPCapitalIQUltimateParentData[\"TOT_REV\"] !== null ?\r\n this.state.SPCapitalIQUltimateParentData[\"REV_UNIT_TYPE_VALUE\"] !== undefined && this.state.SPCapitalIQUltimateParentData[\"REV_UNIT_TYPE_VALUE\"] !== null ?\r\n formatThousands(((this.state.SPCapitalIQUltimateParentData[\"TOT_REV\"] * this.state.SPCapitalIQUltimateParentData[\"REV_UNIT_TYPE_VALUE\"]) / 1000000).toFixed(2)) + \" M\" :\r\n formatThousands(this.state.SPCapitalIQUltimateParentData[\"TOT_REV\"].toFixed(2)) : ''}\r\n
\r\n {this.state.SPCapitalIQUltimateParentData[\"GRO_MARG\"] !== undefined && this.state.SPCapitalIQUltimateParentData[\"GRO_MARG\"] !== null ? formatThousands(this.state.SPCapitalIQUltimateParentData[\"GRO_MARG\"].toFixed(2)) + ' % ' : ''}
\r\n {this.state.SPCapitalIQUltimateParentData[\"EBITDA_MARG\"] !== undefined && this.state.SPCapitalIQUltimateParentData[\"EBITDA_MARG\"] !== null ? formatThousands(this.state.SPCapitalIQUltimateParentData[\"EBITDA_MARG\"].toFixed(2)) + ' % ' : ''}
\r\n {this.state.SPCapitalIQUltimateParentData[\"DSO\"] !== undefined && this.state.SPCapitalIQUltimateParentData[\"DSO\"] !== null ? formatThousands(this.state.SPCapitalIQUltimateParentData[\"DSO\"].toFixed(2)) : ''}
\r\n \r\n \r\n
: null\r\n }\r\n \r\n
\r\n \r\n
\r\n {this.props.content.industryClassification}
\r\n \r\n {this.props.content.industryOverrideMessage}
\r\n {/* \r\n
*/}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n Object.keys(this.state.expandedKeys).length > 0 ?\r\n
\r\n \r\n
\r\n : null\r\n }\r\n \r\n
: ''\r\n ))\r\n\r\n var errorRecordSize = 0;\r\n var totalErrorRecords = []\r\n Object.values(errorRecords).forEach((item) => {\r\n totalErrorRecords = totalErrorRecords.concat(item);\r\n })\r\n\r\n var errorDiv = Object.keys(errorRecords).map((key, index) => (\r\n errorRecords[key].length !== 0 ?\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {key}\r\n
\r\n \r\n
: ''\r\n ))\r\n\r\n var validationDiv = (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {key}\r\n
\r\n \r\n
)\r\n\r\n return validationDiv;\r\n }\r\n\r\n warningToggle() {\r\n this.setState((previousState) => { return { warningDiv: !previousState.warningDiv } })\r\n }\r\n\r\n errorToggle() {\r\n this.setState((previousState) => { return { errorDiv: !previousState.errorDiv } })\r\n }\r\n\r\n render() {\r\n const validationDiv = this.getValidationDiv();\r\n\r\n return (\r\n \r\n {totalWarningRecords.length > 0 ?\r\n
\r\n \r\n
: ''}\r\n {totalErrorRecords.length > 0 ?\r\n \r\n \r\n {totalWarningRecords.length} {this.props.contentDetailedFile.validationWarningText} {this.props.contentDetailedFile.warningChangeMessage}\r\n
\r\n {totalWarningRecords.length} {this.props.contentDetailedFile.validationWarningText} {this.props.contentDetailedFile.warningChangeMessage}\r\n \r\n {this.state.warningDiv ? : }\r\n
\r\n {this.state.warningDiv ? warningDiv : ''}\r\n : }\r\n \r\n
: ''}\r\n \r\n \r\n {totalErrorRecords.length} {this.props.contentDetailedFile.validationErrorText} {this.props.contentDetailedFile.validationThatText} {this.props.contentDetailedFile.validationMustText} {this.props.contentDetailedFile.errorChangeMessage}\r\n
\r\n {totalErrorRecords.length} {this.props.contentDetailedFile.validationErrorText} {this.props.contentDetailedFile.validationThatText} {this.props.contentDetailedFile.validationMustText} {this.props.contentDetailedFile.errorChangeMessage}\r\n \r\n {this.state.errorDiv ? : }\r\n
\r\n {this.state.errorDiv ? errorDiv : ''}\r\n : }\r\n \r\n {\r\n this.onSave(values)\r\n actions.setSubmitting(false);\r\n }}\r\n render={props => (\r\n
\r\n \r\n \r\n )} />\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n ui: state.content.ui,\r\n content: state.content.spendAnalysis.supplierDrilldown.scopeandMatch,\r\n supplierComments: state.content.spendAnalysis.supplierDrilldown.supplierComments,\r\n contentDetailedFile: state.content.spendAnalysis.detailedFile,\r\n spendDetails: state.spendDetails,\r\n user: state.default,\r\n userData: state.valueStory\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getSupplierDrillScopeDataSuccess: message => dispatch(getSupplierDrillScopeDataSuccess(message)),\r\n getSupplierDrillScopeDataFailure: error => dispatch(getSupplierDrillScopeDataFailure(error)),\r\n getSupplierDrillScopeDataLoading: bool => dispatch(getSupplierDrillScopeDataLoading(bool)),\r\n getSupplierDrillScopeData: (DMCId, VSId, userEmail, SKEY) => dispatch(getSupplierDrillScopeData(DMCId, VSId, userEmail, SKEY)),\r\n defineScopeLoading: bool => dispatch(defineScopeLoading(bool)),\r\n supplierDrillDownUpdate: (record) => dispatch(supplierDrillDownUpdate(record)),\r\n trackSupplierDrillDownChanges: message => dispatch(trackSupplierDrillDownChanges(message)),\r\n trackSupplierDrillDownSave: message => dispatch(trackSupplierDrillDownSave(message)),\r\n setPopUpTabLoadingStatus: bool => dispatch(setPopUpTabLoadingStatus(bool)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ScopeAndMatch); ","import React, { Component } from 'react'\r\nimport CustomGrid from 'UI/CustomGrid'\r\nimport { connect } from 'react-redux'\r\nimport { Filters } from \"react-data-grid-addons\";\r\n\r\nimport {\r\n industrySupplierLoading,\r\n industrySupplierSuccess,\r\n industrySupplierFailure,\r\n getIndustrySupplierScopeDetails,\r\n setPopUpTabLoadingStatus,\r\n getSupplierDeduplicationData\r\n} from 'actions/spendActions'\r\nimport { getNonEmptyValue, LeftAlignFormatter, formatter, formatThousands, convertToMillion } from \"../../utils/Utils\";\r\n\r\n\r\nconst {\r\n NumericFilter\r\n} = Filters;\r\n\r\n\r\nclass SupplierDeduplication extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n responseMsg: '',\r\n industrySupplierData: {\r\n DMC_ID: this.props.spendDetails.currentActiveRequest.DMC_ID,\r\n VS_ID: this.props.spendDetails.currentActiveRequest.VS_ID,\r\n User_Email: '',\r\n Solution: 'No Filter'\r\n },\r\n data: {},\r\n columns: [],\r\n aggregatedData: { INVOICE_COUNT: 0, INVOICE_SPEND: 0.0, PO_COUNT: 0, PO_SPEND: 0.0, UNIQUE_SUPPLIERS: 0 },\r\n isLoading: true,\r\n currencySymbol: ''\r\n }\r\n\r\n this.loadData = this.loadData.bind(this)\r\n this.validate = this.validate.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData(this.props);\r\n }\r\n\r\n loadData(nextProps) {\r\n \r\n let currencySymbol = this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency !== undefined && this.props.spendDetails.currentActiveRequest.Currency !== ''?\r\n this.props.spendDetails.currentActiveRequest.Currency.trim() : 'USD']\r\n\r\n this.props.setPopUpTabLoadingStatus(true)\r\n this.props.getSupplierDeduplicationData(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.user.user.Email, this.props.spendDetails.supplierDetails[\"SKEY\"])\r\n .then((response) => {\r\n if (response !== undefined && response.status === 200 && response.data.Result !== undefined) {\r\n setTimeout(() => { this.props.industrySupplierSuccess('') }, 2000)\r\n let columns = this.initializeColumns(response.data.Result);\r\n \r\n this.setState({ data: response.data.Result, columns: columns, isLoading: false, currencySymbol: currencySymbol });\r\n } else if (response.response && response.response.status == 400) {\r\n this.setState({ data: [], columns: [], isLoading: false, isError: 'No', message: 'No Result Found' })\r\n } else if (response && response.stack && response.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: this.props.validation.networkError, isError: 'Yes', isLoading: false })\r\n }\r\n this.props.setPopUpTabLoadingStatus(false)\r\n }).catch((error) => {\r\n this.props.setPopUpTabLoadingStatus(false);\r\n this.setState({ responseMsg: this.props.validation.error, isError: 'Yes', isLoading: false })\r\n })\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (\r\n nextProps.spendDetails.industryGICS_Details && nextProps.spendDetails.industryGICS_Details.SKEY !== (this.props.spendDetails.industryGICS_Details ? this.props.spendDetails.industryGICS_Details.SKEY : undefined)) {\r\n this.loadData(nextProps);\r\n }\r\n }\r\n\r\n initializeColumns() {\r\n let columns = []\r\n\r\n let tableColumn = {\r\n name: 'Ref.#',\r\n key: 'REF_NUMBER',\r\n width: 120,\r\n sortable: true,\r\n editable: false,\r\n resizable: true,\r\n filterable: true,\r\n screenSeq: 0,\r\n mandatory: 'No',\r\n exportFl: true,\r\n //editProperty: fieldConfig.is_editable,\r\n formatter: LeftAlignFormatter,\r\n helpText: this.props.supplierDeduplication.column_help_text,\r\n filterRenderer: NumericFilter\r\n }\r\n\r\n columns.push(tableColumn);\r\n\r\n\r\n tableColumn = {\r\n name: 'Vendor Id',\r\n key: 'VENDOR_ID',\r\n width: 120,\r\n sortable: true,\r\n editable: false,\r\n resizable: true,\r\n filterable: true,\r\n screenSeq: 0,\r\n mandatory: 'No',\r\n exportFl: true,\r\n //editProperty: fieldConfig.is_editable,\r\n formatter: LeftAlignFormatter,\r\n helpText: this.props.supplierDeduplication.column_help_text\r\n }\r\n\r\n columns.push(tableColumn);\r\n\r\n tableColumn = {\r\n name: 'Vendor Name',\r\n key: 'VENDOR_NAME',\r\n width: 250,\r\n sortable: true,\r\n editable: false,\r\n resizable: true,\r\n filterable: true,\r\n screenSeq: 0,\r\n mandatory: 'No',\r\n exportFl: true,\r\n //editProperty: fieldConfig.is_editable,\r\n formatter: LeftAlignFormatter,\r\n helpText: this.props.supplierDeduplication.column_help_text\r\n }\r\n\r\n columns.push(tableColumn);\r\n\r\n tableColumn = {\r\n name: 'ERP System',\r\n key: 'ERP_SYSTEM',\r\n width: 350,\r\n sortable: true,\r\n editable: false,\r\n resizable: true,\r\n filterable: true,\r\n screenSeq: 0,\r\n mandatory: 'No',\r\n exportFl: true,\r\n //editProperty: fieldConfig.is_editable,\r\n formatter: LeftAlignFormatter,\r\n helpText: this.props.supplierDeduplication.column_help_text\r\n }\r\n\r\n columns.push(tableColumn);\r\n\r\n tableColumn = {\r\n name: 'Business Unit',\r\n key: 'BUSINESS_UNIT',\r\n width: 120,\r\n sortable: true,\r\n editable: false,\r\n resizable: true,\r\n filterable: true,\r\n screenSeq: 0,\r\n mandatory: 'No',\r\n exportFl: true,\r\n //editProperty: fieldConfig.is_editable,\r\n formatter: LeftAlignFormatter,\r\n helpText: this.props.supplierDeduplication.column_help_text\r\n }\r\n columns.push(tableColumn);\r\n\r\n tableColumn = {\r\n name: 'ERP Invoice Spend in Standard Currency',\r\n key: 'ERP_INV_SPEND_STD_CURRENCY',\r\n width: 200,\r\n sortable: true,\r\n editable: false,\r\n resizable: true,\r\n filterable: true,\r\n screenSeq: 1,\r\n mandatory: 'No',\r\n exportFl: true,\r\n //editProperty: fieldConfig.is_editable,\r\n formatter: formatter('AlignCurrencyFormatter'),\r\n helpText: this.props.supplierDeduplication.column_help_text,\r\n filterRenderer: NumericFilter\r\n }\r\n\r\n columns.push(tableColumn);\r\n\r\n\r\n tableColumn = {\r\n name: 'ERP Invoice Count',\r\n key: 'ERP_INVOICE_COUNT',\r\n width: 200,\r\n sortable: true,\r\n editable: false,\r\n resizable: true,\r\n filterable: true,\r\n screenSeq: 2,\r\n mandatory: 'No',\r\n exportFl: true,\r\n //editProperty: fieldConfig.is_editable,\r\n formatter: formatter('AlignFormatter'),\r\n helpText: this.props.supplierDeduplication.column_help_text,\r\n filterRenderer: NumericFilter\r\n }\r\n\r\n columns.push(tableColumn);\r\n\r\n tableColumn = {\r\n name: 'ERP PO Spend',\r\n key: 'ERP_PO_SPEND',\r\n width: 200,\r\n sortable: true,\r\n editable: false,\r\n resizable: true,\r\n filterable: true,\r\n screenSeq: 3,\r\n mandatory: 'No',\r\n exportFl: true,\r\n //editProperty: fieldConfig.is_editable,\r\n formatter: formatter('AlignCurrencyFormatter'),\r\n helpText: this.props.supplierDeduplication.column_help_text,\r\n filterRenderer: NumericFilter\r\n }\r\n\r\n columns.push(tableColumn);\r\n\r\n tableColumn = {\r\n name: 'ERP PO Count',\r\n key: 'ERP_PO_COUNT',\r\n width: 200,\r\n sortable: true,\r\n editable: false,\r\n resizable: true,\r\n filterable: true,\r\n screenSeq: 3,\r\n mandatory: 'No',\r\n exportFl: true,\r\n //editProperty: fieldConfig.is_editable,\r\n formatter: formatter('AlignFormatter'),\r\n helpText: this.props.supplierDeduplication.column_help_text,\r\n filterRenderer: NumericFilter\r\n }\r\n\r\n columns.push(tableColumn);\r\n return columns;\r\n }\r\n \r\n validateRow(records) {\r\n var errorRecords = []\r\n const columns = this.state.columns\r\n\r\n for (let idx = 0; idx < records.length; idx++) {\r\n const row = records[idx]\r\n for (let idx = 0; idx < columns.length; idx++) {\r\n const column = columns[idx]\r\n if (getNonEmptyValue(row[column.key]) === '' && column.mandatory) {\r\n errorRecords.push(row)\r\n break;\r\n }\r\n }\r\n\r\n }\r\n\r\n return errorRecords;\r\n }\r\n\r\n validate(record, warningErrorRecords) {\r\n\r\n return warningErrorRecords\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n user: state.default,\r\n spendDetails: state.spendDetails,\r\n supplierDeduplication: state.content.spendAnalysis.supplierDrilldown.supplierDeduplication,\r\n validation: state.content.validation,\r\n currencySymbols: state.content.CurrencySymbols\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n industrySupplierLoading: (bool) => dispatch(industrySupplierLoading(bool)),\r\n industrySupplierSuccess: (bool) => dispatch(industrySupplierSuccess(bool)),\r\n industrySupplierFailure: (error) => dispatch(industrySupplierFailure(error)),\r\n getIndustrySupplierScopeDetails: (formValues) => dispatch(getIndustrySupplierScopeDetails(formValues)),\r\n setPopUpTabLoadingStatus: bool => dispatch(setPopUpTabLoadingStatus(bool)),\r\n getSupplierDeduplicationData: (DMCId, VSId, userEmail, SKEY) => dispatch(getSupplierDeduplicationData(DMCId, VSId, userEmail, SKEY))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SupplierDeduplication); ","import React, { Fragment } from 'react';\r\nimport { connect } from 'react-redux'\r\nimport SupplierDrillDownTabPanel from '../Tabs/SupplierDrillDownTabPanel'\r\nimport InputandClassification from 'components/Spend/InputandClassification'\r\nimport SPCapitalIQ from 'components/Spend/SPCapitalIQ'\r\nimport SPCapitalIQUltimateParent from 'components/Spend/SPCapitalIQUltimateParent'\r\nimport ScopeAndMatch from 'components/Spend/ScopeAndMatch'\r\nimport SupplierDeduplication from 'components/Spend/SupplierDeduplication'\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nimport { modalStyle, modalContentStyle, changeModalBorderStyle, drilldownModalBorderContentStyle, changeModalBorderRectStyle } from 'Constants'\r\n// const supplierDrilldownModalContentStyle = Object.assign({}, drilldownModalBorderContentStyle);\r\n// supplierDrilldownModalContentStyle.padding = \"20px\";\r\n// //supplierDrilldownModalContentStyle.border = \"1px solid\";\r\n// supplierDrilldownModalContentStyle.overflowY = \"hidden\";\r\n// const supplierDrilldownModalStyle = Object.assign({}, changeModalBorderStyle);\r\n// supplierDrilldownModalStyle.width = \"90%\";\r\n// supplierDrilldownModalStyle.height = \"750px\";\r\n// supplierDrilldownModalStyle.maxWidth = \"1400px\";\r\n\r\nclass SupplierDrillDownPopup extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.myRef = React.createRef()\r\n this.state = {\r\n tabId: 1,\r\n tabs: [],\r\n tabsWithoutCapIQ: [],\r\n tabsWithoutParentCapIQ: [],\r\n tabsWithoutCapIQAndParentCapIQ: [],\r\n isCapIQLicesend: false,\r\n classificationData: []\r\n }\r\n\r\n this.dispatchTabChange = this.dispatchTabChange.bind(this)\r\n this.intializeSupplierTabs = this.intializeSupplierTabs.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n //this.checkDedupAggregatedRecord();\r\n this.intializeSupplierTabs();\r\n this.setState({ isCapIQLicesend: this.props.user.user.applicationFeatures.findIndex(a => a.Action === this.props.capIQ.capIQAction) > -1 ? true : false })\r\n }\r\n\r\n intializeSupplierTabs() {\r\n\r\n const tabs = [{\r\n id: 1,\r\n label: this.props.content.inputandClassification,\r\n component: ({this.props.supplierDeduplication.tabHeader}
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n {this.props.supplierDeduplication.aggregateRecords + \":\"}
\r\n {formatThousands(this.props.spendDetails.inputAndClassificationDetails.AGGREGATE_RECORDS)}
\r\n \r\n
\r\n {this.props.supplierDeduplication.aggregateInvoiceSpend + \":\"}
\r\n {this.state.currencySymbol}{convertToMillion(this.props.spendDetails.inputAndClassificationDetails.AGGREGATE_INVOICE_SPEND, true)}
\r\n \r\n
\r\n \r\n {this.props.supplierDeduplication.aggregatePOSpend + \":\"}
\r\n {this.state.currencySymbol}{convertToMillion(this.props.spendDetails.inputAndClassificationDetails.AGGREGATE_PO_SPEND, true)}
\r\n \r\n
\r\n {this.props.supplierDeduplication.aggregateInvoiceCount + \":\"}
\r\n {formatThousands(this.props.spendDetails.inputAndClassificationDetails.AGGREGATE_INVOICE_COUNT)}
\r\n \r\n
\r\n {this.props.supplierDeduplication.aggregatePOCount + \":\"}
\r\n {formatThousands(this.props.spendDetails.inputAndClassificationDetails.AGGREGATE_PO_COUNT)}
\r\n \r\n {this.refs.supplierDrilldown ? this.props.open ?\r\n this.refs.supplierDrilldown.show() :\r\n this.refs.supplierDrilldown.hide() : ''}\r\n {\r\n // if (e === 'backdrop') {\r\n // this.props.outsidePopupClick()\r\n // }\r\n // }}\r\n >\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n //content: state.content,\r\n //ui: state.content.ui,\r\n content: state.content.spendAnalysis.supplierDrilldown.tabNames,\r\n spendDetails: state.spendDetails,\r\n user: state.default,\r\n capIQ: state.content.spendAnalysis.detailedFile\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SupplierDrillDownPopup); ","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\n\r\nimport { modalStyle, modalContentStyle, changeModalStyle, changeModalContentStyle } from 'Constants'\r\n\r\nimport Modal from 'reboron/OutlineModal'\r\nimport Button from 'UI/Button'\r\nimport TabContainer from './TabContainer';\r\nimport { AppBar } from '@material-ui/core';\r\nimport {\r\n trackIndustryDrillScopeChanges\r\n} from 'actions/spendActions'\r\nimport { connect } from 'react-redux'\r\n\r\n\r\nconst styles = theme => ({\r\n root: {\r\n flexGrow: 1,\r\n backgroundColor: theme.palette.background.paper,\r\n borderBottom: \"1px solid grey\",\r\n boxShadow: \"none\"\r\n },\r\n indicator: {\r\n backgroundColor: \"#008fd3\",\r\n },\r\n textColor: {\r\n // color: \"#008fd3\",\r\n },\r\n paddingTop: {\r\n paddingTop: \"20px\"\r\n },\r\n tabs: {\r\n borderLeft: \"1px solid grey\",\r\n borderRight: \"1px solid grey\",\r\n padding: \"10px\"\r\n },\r\n borderBothSides: {\r\n borderLeft: \"1px solid grey\",\r\n borderRight: \"1px solid grey\",\r\n },\r\n borderLeftSide: {\r\n borderLeft: \"1px solid grey\",\r\n }\r\n});\r\n\r\nclass SupplierIndustriesTabPanel extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n activeTab: props.tabId,\r\n toggle: false,\r\n nextTab: 5,\r\n event: null,\r\n activeTabCopy: props.tabId\r\n };\r\n this.showModal = this.showModal.bind(this)\r\n this.hideModal = this.hideModal.bind(this)\r\n this.closeModal = this.closeModal.bind(this)\r\n this.handleChange = this.handleChange.bind(this)\r\n }\r\n\r\n showModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n this.refs[action].hide()\r\n }\r\n\r\n closeModal(action) {\r\n let activeTab = this.state.activeTabCopy\r\n this.props.trackIndustryDrillScopeChanges(false)\r\n this.setState({ toggle: false, activeTab: activeTab }, this.refs[action].hide())\r\n if (this.props.dispatchTabChange) {\r\n if (this.props.handleNextButton) {\r\n this.props.handleNextButton(activeTab)\r\n }\r\n this.props.dispatchTabChange(activeTab)\r\n\r\n }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.change != null) {\r\n this.setState({ toggle: nextProps.change })\r\n } \r\n }\r\n handleChange = (event, activeTab) => {\r\n const flag = this.state.toggle\r\n if (!flag) {\r\n this.setState({ activeTab: activeTab });\r\n }else {\r\n this.setState({ activeTabCopy: activeTab }, this.showModal(\"terms\"));\r\n\r\n }\r\n };\r\n\r\n render() {\r\n const { classes } = this.props;\r\n const { activeTab } = this.state;\r\n const _state = this.props.spendDetails\r\n return (\r\n \r\n {this.props.spendDetails.vendorDetails !== undefined ?\r\n
\r\n \r\n
\r\n :\r\n null}\r\n {this.props.spendDetails.vendorDetails[\"vendorName\"]}![](\"images/google_logo.svg\")
\r\n {this.props.spendDetails.vendorDetails[\"vendorAddress\"]}
\r\n \r\n { -1 ? this.state.tabsWithoutCapIQAndParentCapIQ : ((this.props.spendDetails.supplierDetails[\"capIQId\"] && this.props.spendDetails.supplierDetails[\"parentCapIQId\"]) &&\r\n (this.props.spendDetails.supplierDetails[\"capIQId\"] !== this.props.spendDetails.supplierDetails[\"parentCapIQId\"]) ?\r\n this.state.tabs : (this.props.spendDetails.supplierDetails[\"capIQId\"] && this.props.spendDetails.supplierDetails[\"parentCapIQId\"]) &&\r\n (this.props.spendDetails.supplierDetails[\"capIQId\"] === this.props.spendDetails.supplierDetails[\"parentCapIQId\"]) ?\r\n this.state.tabsWithoutParentCapIQ : this.props.spendDetails.supplierDetails[\"capIQId\"] && !this.props.spendDetails.supplierDetails[\"parentCapIQId\"] ?\r\n this.state.tabsWithoutParentCapIQ : !this.props.spendDetails.supplierDetails[\"capIQId\"] && this.props.spendDetails.supplierDetails[\"parentCapIQId\"] ?\r\n this.state.tabsWithoutCapIQ : this.state.tabsWithoutCapIQAndParentCapIQ)}\r\n tabId={1}\r\n dispatchTabChange={this.dispatchTabChange}\r\n dispatchLastButtonClick={this.dispatchLastButtonClick}\r\n />}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nSupplierIndustriesTabPanel.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n tabs: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n label: PropTypes.string.isRequired,\r\n id: PropTypes.number.isRequired,\r\n component: PropTypes.object.isRequired,\r\n }).isRequired)\r\n .isRequired,\r\n};\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n change: state.spendDetails.industryDrillScopePendingChanges,\r\n tabMessage: state.content.spendAnalysis.detailedFile.toggleTabMessage,\r\n spendDetails: state.spendDetails,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n trackIndustryDrillScopeChanges: changes => dispatch(trackIndustryDrillScopeChanges(changes))\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(SupplierIndustriesTabPanel));\r\n// export default withStyles(styles)(SupplierIndustriesTabPanel);","import React, { Fragment } from 'react';\r\nimport { connect } from 'react-redux'\r\nimport Select from 'react-select'\r\nimport classNames from \"classnames\"\r\nimport { path } from 'Constants'\r\nimport cloneDeep from 'lodash/cloneDeep';\r\nimport { roundFix, formatThousands, getNonEmptyValue, isColumnMapped, convertToMillion } from 'utils/Utils'\r\nimport { Formik, withFormik } from 'formik'\r\nimport {\r\n getIndustryDrillScopeDetailsLoading,\r\n getIndustryDrillScopeDetailsSuccess,\r\n getIndustryDrillScopeDetailsFailure,\r\n getIndustryDrillScopeDetails,\r\n industryDrillScopeUpdateLoading,\r\n trackSupplierDrillDownSave,\r\n trackIndustryDrillScopeChanges,\r\n storeIndustryDetails,\r\n industryDrillScopeUpdate,\r\n getIndustrySpend,\r\n setPopUpTabLoadingStatus\r\n} from 'actions/spendActions'\r\n\r\n//UI Components\r\nimport { RadioButton } from 'material-ui';\r\nimport { ControlTextE, SelectE, CheckboxE, RadioButtonE, ButtonE, ButtonNativeE, TextAreaE } from 'UI/CustomComponents/Controls';\r\n\r\nconst dropdownValues = [{ label: 'Yes', value: 'Yes' }, { label: 'No', value: 'No' }];\r\n//const directSpendValues = [{label: 'No', value: 'No'}, {label: 'Yes', value: 'Yes'}];\r\nconst scopeValues = [{ label: 'Industry', value: 'Industry' }, { label: 'Override', value: 'Override' }];\r\nconst requisitionValues = [{ label: 'Catalog', value: 'Catalog' }, { label: 'Adhoc (non-catalog)', value: 'Adhoc (non-catalog)' }, { label: 'N/A', value: 'N/A' }]\r\nconst aribaBuyProcessValues = [{ label: 'Requisition: Catalog, Spot-Buy or Release Contract', value: 'Requisition: Catalog, Spot-Buy or Release Contract' },\r\n{ label: 'Requisition: Non-Catalog or Tactical Sourcing', value: 'Requisition: Non-Catalog or Tactical Sourcing' },\r\n{ label: 'Requisition: External Talent', value: 'Requisition: External Talent' },\r\n{ label: 'Consultancy/SOW Services: Active Mgmt, otherwise Invoice Against Contract', value: 'Consultancy/SOW Services: Active Mgmt, otherwise Invoice Against Contract' },\r\n{ label: 'Other Services: Active Mgmt, otherwise Invoice Against Contract', value: 'Other Services: Active Mgmt, otherwise Invoice Against Contract' },\r\n{ label: 'Invoice Against Contract', value: 'Invoice Against Contract' },\r\n{ label: 'Direct/MRO: Plan Driven PO', value: 'Direct/MRO: Plan Driven PO' },\r\n{ label: 'Direct/MRO: Asset Plan via Catalog', value: 'Direct/MRO: Asset Plan via Catalog' },\r\n{ label: 'Non-PO Invoice', value: 'Non-PO Invoice' },\r\n{ label: 'Travel and Expense', value: 'Travel and Expense' }]\r\n\r\nconst validate = values => {\r\n const errors = {};\r\n if (!values.firstName) {\r\n errors.firstName = 'Required';\r\n } else if (values.firstName.length > 15) {\r\n errors.firstName = 'Must be 15 characters or less';\r\n }\r\n\r\n if (!values.lastName) {\r\n errors.lastName = 'Required';\r\n } else if (values.lastName.length > 20) {\r\n errors.lastName = 'Must be 20 characters or less';\r\n }\r\n\r\n if (!values.email) {\r\n errors.email = 'Required';\r\n } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(values.email)) {\r\n errors.email = 'Invalid email address';\r\n }\r\n\r\n return errors;\r\n};\r\n\r\nclass IndustriesScopeAndMatch extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n warningRecords: [],\r\n errorRecords: [],\r\n warningDiv: true,\r\n errorDiv: true,\r\n scopeNotes: false,\r\n industryScopeDataCurrent: {},\r\n directSpendValues: [{ label: 'No', value: 'No' }, { label: 'Yes', value: 'Yes' }],\r\n industryScopeData: {},\r\n userComment: '',\r\n isUserCommentTextboxClicked: 'No',\r\n scopeChildFlag: 'NO',\r\n commentChildFlag: 'NO',\r\n skey: null,\r\n characterCount: 150,\r\n warningMessage: '',\r\n remaingHistoricalCommentsLength: 150,\r\n historicalSupplierComments: '',\r\n totalAggregatedData: { INVOICE_COUNT: 0, INVOICE_SPEND: 0.0, PO_COUNT: 0, PO_SPEND: 0.0, UNIQUE_SUPPLIERS: 0 },\r\n currentAggregatedData: { INVOICE_COUNT: 0, INVOICE_SPEND: 0.0, PO_COUNT: 0, PO_SPEND: 0.0, UNIQUE_SUPPLIERS: 0 },\r\n childAggregatedData: { INVOICE_COUNT: 0, INVOICE_SPEND: 0.0, PO_COUNT: 0, PO_SPEND: 0.0, UNIQUE_SUPPLIERS: 0 },\r\n showFlag: false,\r\n isSaveInProgress: false\r\n }\r\n\r\n this.handleScopeSourceChange = this.handleScopeSourceChange.bind(this)\r\n this.isDisabled = this.isDisabled.bind(this)\r\n this.onSave = this.onSave.bind(this)\r\n this.onUpdate = this.onUpdate.bind(this)\r\n this.validateForWarning = this.validateForWarning.bind(this)\r\n this.validateForError = this.validateForError.bind(this)\r\n this.warningToggle = this.warningToggle.bind(this)\r\n this.errorToggle = this.errorToggle.bind(this)\r\n this.addWarningErroredRecord = this.addWarningErroredRecord.bind(this)\r\n this.getValidationDiv = this.getValidationDiv.bind(this)\r\n this.handleChange = this.handleChange.bind(this)\r\n this.hasRecordErrors = this.hasRecordErrors.bind(this)\r\n this.hasPendingChange = this.hasPendingChange.bind(this)\r\n this.toggleScopeNotes = this.toggleScopeNotes.bind(this)\r\n this.RadioButtonChecked = this.RadioButtonChecked.bind(this)\r\n this.toggleShow = this.toggleShow.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData(this.props.spendDetails.industryGICS_Details[\"SKEY\"]);\r\n this.loadSpendData(this.props.spendDetails.industryGICS_Details[\"SKEY\"])\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.spendDetails.industryGICS_Details[\"SKEY\"] != this.state.skey) {\r\n this.loadData(nextProps.spendDetails.industryGICS_Details[\"SKEY\"]);\r\n this.loadSpendData(nextProps.spendDetails.industryGICS_Details[\"SKEY\"])\r\n this.setState({ skey: nextProps.spendDetails.industryGICS_Details[\"SKEY\"] })\r\n }\r\n }\r\n\r\n toggleScopeNotes() {\r\n this.setState({ scopeNotes: !this.state.scopeNotes })\r\n }\r\n\r\n toggleShow() {\r\n this.setState({ showFlag: !this.state.showFlag })\r\n }\r\n\r\n RadioButtonChecked(value) {\r\n if (value.target.value == 'scopeChildYes') {\r\n let data = this.state.industryScopeData\r\n data.scopeChildFlag = 'YES'\r\n this.setState({ scopeChildFlag: 'YES', industryScopeData: data })\r\n } else if (value.target.value == 'commentChildYes') {\r\n this.setState({ commentChildFlag: 'YES' })\r\n } else if (value.target.value == 'commentChildNo') {\r\n this.setState({ commentChildFlag: 'NO' })\r\n } else {\r\n let data = this.state.industryScopeData\r\n data.scopeChildFlag = 'NO'\r\n this.setState({ scopeChildFlag: 'NO', industryScopeData: data })\r\n }\r\n }\r\n\r\n loadSpendData(key) {\r\n\r\n let currencySymbol = this.props.spendDetails.currentActiveRequest !== undefined ?\r\n this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()] : ''\r\n this.props.setPopUpTabLoadingStatus(true)\r\n this.props.getIndustrySpend({\r\n DMCID: this.props.spendDetails.currentActiveRequest.DMC_ID,\r\n VSID: this.props.spendDetails.currentActiveRequest.VS_ID, EMAIL: this.props.user.user.Email, GICSID: key,\r\n Country: 'all', Confirmed: 'all',\r\n Solution: 'No Filter'\r\n }).then((response) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n if (response.status !== undefined && response.status === 200) {\r\n let obj = this.getTotalAggregateData(response.data.Result, currencySymbol)\r\n let currObj = this.getCurrentAggregateData(response.data.Result, currencySymbol)\r\n let childObj = this.getChildAggregateData(response.data.Result, currencySymbol)\r\n this.setState({ data: obj, totalAggregatedData: obj.totalAggregatedData, currentAggregatedData: currObj.currentAggregatedData, childAggregatedData: childObj.childAggregatedData, currencySymbol: currencySymbol, isError: 'No', isLoading: false });\r\n } else if (response.response && response.response.status == 400) {\r\n this.setState({ data: [], totalAggregatedData: this.state.totalAggregatedData, currentAggregatedData: this.state.currentAggregatedData, childAggregatedData: this.state.childAggregatedData, currencySymbol: currencySymbol, isLoading: false, isError: 'No', message: 'No Result Found' })\r\n } else if (response && response.stack && response.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n }).catch((error) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n })\r\n\r\n }\r\n\r\n getTotalAggregateData(result, currencySymbol) {\r\n let totalAggregatedData = { INVOICE_COUNT: 0, INVOICE_SPEND: 0.0, PO_COUNT: 0, PO_SPEND: 0.0, UNIQUE_SUPPLIERS: 0 };\r\n result.forEach(item => {\r\n totalAggregatedData.INVOICE_COUNT += item.INVOICE_COUNT\r\n totalAggregatedData.INVOICE_SPEND += item.INVOICE_SPEND\r\n totalAggregatedData.PO_COUNT += item.PO_COUNT\r\n totalAggregatedData.PO_SPEND += item.PO_SPEND\r\n totalAggregatedData.UNIQUE_SUPPLIERS += item.COUNT_VENDOR_ID\r\n\r\n item['FINAL_GICS_DESC_COMB'] = item['FINAL_GICS_DESC'] + ' (' + item['FINAL_GICS'] + ')'\r\n item['PARENT_GICS_DESC_COMB'] = item['PARENT_GICS_DESC'] + ' (' + item['PARENT_GICS'] + ')'\r\n item['currencySymbol'] = currencySymbol\r\n })\r\n\r\n result.sort((a, b) => { return a.FINAL_GICS - b.FINAL_GICS })\r\n return { totalAggregatedData: totalAggregatedData, rows: result }\r\n }\r\n\r\n getCurrentAggregateData(result, currencySymbol) {\r\n let currentAggregatedData = { INVOICE_COUNT: 0, INVOICE_SPEND: 0.0, PO_COUNT: 0, PO_SPEND: 0.0, UNIQUE_SUPPLIERS: 0 };\r\n let currentGICS = this.props.spendDetails.industryGICS_Details[\"SKEY\"];\r\n //FINAL_GICS\r\n //PARENT_GICS_LEVEL\r\n //FINAL_GICS_INDUSTRY_LEVEL\r\n result.forEach(item => {\r\n if (item.FINAL_GICS == currentGICS) {\r\n currentAggregatedData.INVOICE_COUNT += item.INVOICE_COUNT\r\n currentAggregatedData.INVOICE_SPEND += item.INVOICE_SPEND\r\n currentAggregatedData.PO_COUNT += item.PO_COUNT\r\n currentAggregatedData.PO_SPEND += item.PO_SPEND\r\n currentAggregatedData.UNIQUE_SUPPLIERS += item.COUNT_VENDOR_ID\r\n\r\n item['FINAL_GICS_DESC_COMB'] = item['FINAL_GICS_DESC'] + ' (' + item['FINAL_GICS'] + ')'\r\n item['PARENT_GICS_DESC_COMB'] = item['PARENT_GICS_DESC'] + ' (' + item['PARENT_GICS'] + ')'\r\n item['currencySymbol'] = currencySymbol\r\n }\r\n\r\n })\r\n\r\n result.sort((a, b) => { return a.FINAL_GICS - b.FINAL_GICS })\r\n return { currentAggregatedData: currentAggregatedData, rows: result }\r\n }\r\n\r\n getChildAggregateData(result, currencySymbol) {\r\n let childAggregatedData = { INVOICE_COUNT: 0, INVOICE_SPEND: 0.0, PO_COUNT: 0, PO_SPEND: 0.0, UNIQUE_SUPPLIERS: 0 };\r\n let level = this.props.spendDetails.industryGICS_Details[\"level\"];\r\n result.forEach(item => {\r\n if (item.PARENT_GICS_LEVEL == level || item.PARENT_GICS_LEVEL > level) {\r\n childAggregatedData.INVOICE_COUNT += item.INVOICE_COUNT\r\n childAggregatedData.INVOICE_SPEND += item.INVOICE_SPEND\r\n childAggregatedData.PO_COUNT += item.PO_COUNT\r\n childAggregatedData.PO_SPEND += item.PO_SPEND\r\n childAggregatedData.UNIQUE_SUPPLIERS += item.COUNT_VENDOR_ID\r\n\r\n item['FINAL_GICS_DESC_COMB'] = item['FINAL_GICS_DESC'] + ' (' + item['FINAL_GICS'] + ')'\r\n item['PARENT_GICS_DESC_COMB'] = item['PARENT_GICS_DESC'] + ' (' + item['PARENT_GICS'] + ')'\r\n item['currencySymbol'] = currencySymbol\r\n }\r\n })\r\n\r\n result.sort((a, b) => { return a.FINAL_GICS - b.FINAL_GICS })\r\n return { childAggregatedData: childAggregatedData, rows: result }\r\n }\r\n\r\n loadData(key) {\r\n this.props.setPopUpTabLoadingStatus(true)\r\n this.setState({ isLoading: true, isError: 'No' })\r\n let industryGICS_Id = key;\r\n this.props.getIndustryDrillScopeDetails(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.user.user.Email, industryGICS_Id)\r\n .then((response) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n if (response.status === 200) {\r\n this.props.getIndustryDrillScopeDetailsSuccess(response.data.Result)\r\n let skey = this.props.spendDetails.industryGICS_Details[\"SKEY\"];\r\n const supplierData = response.data.Result[0];\r\n let commentData = supplierData.USER_COMMENT;\r\n\r\n if (commentData != null && commentData.length > 0) {\r\n var historicalCommentsLength = commentData.length\r\n var totalHistoricalComments = []\r\n totalHistoricalComments = commentData.split('\\r\\n')\r\n //Prefix Text for each new comment is -----> mm/dd/yyyy - email: @@@@ your comment @@@@\r\n var prefixTextlength = 15 + this.props.user.user.Email.length + totalHistoricalComments.length\r\n var historicalCommentsLengthWithPrefix = historicalCommentsLength + prefixTextlength\r\n if (2000 - historicalCommentsLengthWithPrefix > 0) {\r\n this.setState({\r\n historicalSupplierComments: commentData, remaingHistoricalCommentsLength: 2000 - historicalCommentsLengthWithPrefix\r\n })\r\n }\r\n else {\r\n this.setState({\r\n historicalSupplierComments: commentData[0]['USER_COMMENT'], remaingHistoricalCommentsLength: 0\r\n })\r\n }\r\n }\r\n\r\n supplierData.scopeChildFlag = this.state.scopeChildFlag;\r\n supplierData.userComment = this.state.userComment;\r\n //set headers for popup\r\n //storeIndustryDetails: (data) => dispatch(storeIndustryDetails(data))\r\n let industryName = this.props.spendDetails.industryGICS_Details[\"industry\"];\r\n let industryGICS = this.props.spendDetails.industryGICS_Details[\"SKEY\"];\r\n let level = this.props.spendDetails.industryGICS_Details[\"level\"];\r\n let header = industryGICS + ': ' + industryName;\r\n let subHeader = [];\r\n\r\n for (let i = 1; i <= level; i++) {\r\n let industry = 'L' + i + '_' + 'INDUSTRY_NAME'\r\n let industryId = 'L' + i + '_' + 'INDUSTRY_ID'\r\n subHeader.push({ name: supplierData[industry], gicsId: supplierData[industryId], level: i })\r\n }\r\n let industryDetails = { header: header, subHeader: subHeader }\r\n this.props.storeIndustryDetails(industryDetails)\r\n this.setState({ skey: skey, isLoading: false, isError: 'No', industryScopeData: supplierData, industryScopeDataCurrent: cloneDeep(supplierData) })\r\n }\r\n else {\r\n }\r\n }).catch((error) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n })\r\n }\r\n\r\n isDisabled(field, values) {\r\n return true;\r\n }\r\n\r\n onBlur(e) {\r\n this.setState({ isUserCommentTextboxClicked: 'No' })\r\n }\r\n\r\n onFocus(e) {\r\n if (this.state.remaingHistoricalCommentsLength < 150) {\r\n document.getElementById(\"userComments\").maxLength = this.state.remaingHistoricalCommentsLength\r\n this.setState({\r\n warningMessage: this.props.supplierComments.historicalCharactersLeft,\r\n characterCount: this.state.remaingHistoricalCommentsLength - e.currentTarget.value.length, isUserCommentTextboxClicked: 'Yes'\r\n })\r\n }\r\n else {\r\n this.setState({ warningMessage: this.props.supplierComments.charactersLeft, characterCount: 150 - e.currentTarget.value.length, isUserCommentTextboxClicked: 'Yes' })\r\n }\r\n }\r\n\r\n handleChange(value, field, props) {\r\n //props.setFieldValue(field, value)\r\n this.props.trackIndustryDrillScopeChanges(true)\r\n this.setState({ responseMsg: '' })\r\n const industryScopeData = this.state.industryScopeData\r\n if (field == 'USER_COMMENT') {\r\n industryScopeData.userComment = value;\r\n if (this.state.remaingHistoricalCommentsLength < 150) {\r\n if (this.state.remaingHistoricalCommentsLength > 0)\r\n document.getElementById(\"userComments\").maxLength = this.state.remaingHistoricalCommentsLength\r\n else\r\n document.getElementById(\"userComments\").maxLength = 0\r\n this.setState({\r\n warningMessage: this.props.supplierComments.historicalCharactersLeft,\r\n characterCount: this.state.remaingHistoricalCommentsLength - value.length, isUserCommentTextboxClicked: 'Yes'\r\n })\r\n }\r\n else {\r\n this.setState({ warningMessage: this.props.supplierComments.charactersLeft, characterCount: 150 - value.length, isUserCommentTextboxClicked: 'Yes' })\r\n }\r\n this.setState({ userComment: value, industryScopeData: industryScopeData })\r\n } else {\r\n industryScopeData[field] = value;\r\n props.values[field] = value;\r\n const validationRecords = this.onUpdate(props.values)\r\n this.setState({\r\n industryScopeData: industryScopeData, warningRecords: validationRecords.warningRecords,\r\n errorRecords: validationRecords.errorRecords\r\n })\r\n }\r\n }\r\n\r\n onUpdate(values) {\r\n var warningRecords = this.state.warningRecords;\r\n var errorRecords = this.state.errorRecords;\r\n this.validateForWarning(warningRecords, values);\r\n this.validateForError(errorRecords, values);\r\n return { warningRecords: warningRecords, errorRecords: errorRecords }\r\n }\r\n\r\n validateForWarning(warningRecords, values) {\r\n const warningMessages = this.props.contentDetailedFile.validationMessage.warningMessage;\r\n const exclusionReasonWarning = warningMessages.exclusionReasonWarning;\r\n const buyingInvoicingFieldGlassEligibleWarning = warningMessages.buyingInvoicingFieldGlassEligibleWarning\r\n const buyingInvoicingSupplyChainEligibleWarning = warningMessages.buyingInvoicingSupplyChainEligibleWarning\r\n const buyingInvoicingConcurEligibleWarning = warningMessages.buyingInvoicingConcurEligibleWarning\r\n const fieldGlassSCCEligibleWarning = warningMessages.fieldGlassSCCEligibleWarning\r\n\r\n var exclusionReason = values.EXCLUSION_REASON\r\n if (getNonEmptyValue(exclusionReason) !== '') {\r\n this.addWarningErroredRecord(exclusionReasonWarning, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(exclusionReasonWarning, warningRecords, false)\r\n }\r\n\r\n var buyingInvoicing = values.BUYING_INVOICING_ELIGIBLE;\r\n var fieldGlassEligible = values.SAP_FIELDGLASS_ELIGIBLE\r\n if (getNonEmptyValue(buyingInvoicing) === 'Yes' && getNonEmptyValue(fieldGlassEligible) === 'Yes') {\r\n this.addWarningErroredRecord(buyingInvoicingFieldGlassEligibleWarning, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(buyingInvoicingFieldGlassEligibleWarning, warningRecords, false)\r\n }\r\n\r\n var supplyChainEligible = values.SUPP_CHAIN_COLLAB_ELIGIBLE\r\n if (getNonEmptyValue(buyingInvoicing) === 'Yes' && getNonEmptyValue(supplyChainEligible) === 'Yes') {\r\n this.addWarningErroredRecord(buyingInvoicingSupplyChainEligibleWarning, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(buyingInvoicingSupplyChainEligibleWarning, warningRecords, false)\r\n }\r\n\r\n var concurEligible = values.SAP_CONCUR_ELIGIBLE\r\n if (getNonEmptyValue(buyingInvoicing) === 'Yes' && getNonEmptyValue(concurEligible) === 'Yes') {\r\n this.addWarningErroredRecord(buyingInvoicingConcurEligibleWarning, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(buyingInvoicingConcurEligibleWarning, warningRecords, false)\r\n }\r\n\r\n if (getNonEmptyValue(fieldGlassEligible) === 'Yes' && getNonEmptyValue(supplyChainEligible) === 'Yes') {\r\n this.addWarningErroredRecord(fieldGlassSCCEligibleWarning, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(fieldGlassSCCEligibleWarning, warningRecords, false)\r\n }\r\n }\r\n\r\n validateForError(errorRecords, values) {\r\n const errorMessages = this.props.contentDetailedFile.validationMessage.errorMessage;\r\n const buyingInvoicingError = errorMessages.buyingInvoicingError;\r\n const requisitionableTypeError1 = errorMessages.requisitionableTypeError1;\r\n const requisitionableTypeError2 = errorMessages.requisitionableTypeError2;\r\n const requisitionableTypeError3 = errorMessages.requisitionableTypeError3;\r\n const contractInvoicingError = errorMessages.contractInvoicingError;\r\n const supplyCommerceError = errorMessages.supplyCommerceError;\r\n\r\n var buyingInvoicing = values.BUYING_INVOICING_ELIGIBLE;\r\n var requisitionable = values.REQUISITIONABLE;\r\n var contractInvoicing = values.CONTRACT_INVOICING_ELIGIBLE;\r\n\r\n if ((getNonEmptyValue(buyingInvoicing) === 'Yes' && getNonEmptyValue(requisitionable) === 'Yes' && getNonEmptyValue(contractInvoicing) === 'Yes') ||\r\n (getNonEmptyValue(buyingInvoicing) === 'Yes' && getNonEmptyValue(requisitionable) === 'No' && getNonEmptyValue(contractInvoicing) === 'No')) {\r\n this.addWarningErroredRecord(buyingInvoicingError, errorRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(buyingInvoicingError, errorRecords, false)\r\n }\r\n\r\n var requisitionableType = values.REQUISITION_TYPE;\r\n if (getNonEmptyValue(requisitionable) === 'Yes' && getNonEmptyValue(requisitionableType) === 'N/A') {\r\n this.addWarningErroredRecord(requisitionableTypeError1, errorRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(requisitionableTypeError1, errorRecords, false)\r\n }\r\n\r\n if (getNonEmptyValue(requisitionable) === 'No' && getNonEmptyValue(requisitionableType) !== 'N/A') {\r\n this.addWarningErroredRecord(requisitionableTypeError2, errorRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(requisitionableTypeError2, errorRecords, false)\r\n }\r\n\r\n if (getNonEmptyValue(requisitionable) === 'Yes' && getNonEmptyValue(buyingInvoicing) === 'No') {\r\n this.addWarningErroredRecord(requisitionableTypeError3, errorRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(requisitionableTypeError3, errorRecords, false)\r\n }\r\n\r\n if (getNonEmptyValue(contractInvoicing) === 'Yes' && getNonEmptyValue(buyingInvoicing) === 'No') {\r\n this.addWarningErroredRecord(contractInvoicingError, errorRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(contractInvoicingError, errorRecords, false)\r\n }\r\n\r\n var supplyChain = values.SUPP_CHAIN_COLLAB_ELIGIBLE;\r\n var commerceAutomation = values.COMMERCE_AUTOMATION_ELIGIBLE;\r\n\r\n if (getNonEmptyValue(supplyChain) === 'Yes' && getNonEmptyValue(commerceAutomation) === 'Yes') {\r\n this.addWarningErroredRecord(supplyCommerceError, errorRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(supplyCommerceError, errorRecords, false)\r\n }\r\n }\r\n\r\n addWarningErroredRecord(reason, records, add) {\r\n var arr = records[reason];\r\n if (getNonEmptyValue(arr) === '') {\r\n arr = []\r\n }\r\n\r\n var eltIdx = arr.indexOf((1));\r\n if (eltIdx === -1 && add) {\r\n arr.push(1)\r\n } else if (eltIdx !== -1 && !add) {\r\n arr.splice(eltIdx, 1)\r\n }\r\n\r\n records[reason] = arr;\r\n }\r\n\r\n onSave(industryScopeDataNew) {\r\n this.props.industryDrillScopeUpdateLoading(true)\r\n let industryScopeDataOld = this.state.industryScopeDataCurrent\r\n this.setState({ isLoading: true, isError: 'No', isSaveInProgress: true, responseMsg: '' })\r\n\r\n const record = {\r\n VS_ID: this.props.spendDetails.currentActiveRequest.VS_ID,\r\n DMC_ID: this.props.spendDetails.currentActiveRequest.DMC_ID,\r\n USER_ID: this.props.user.user.Email,\r\n CAPIQ_INDUSTRY_ID: industryScopeDataNew[\"CAPIQ_INDUSTRY_ID\"],\r\n SAP_ARIBA_BUY_PROCESS: industryScopeDataNew[\"SAP_ARIBA_BUY_PROCESS\"],\r\n SOURCING_ELIGIBLE: industryScopeDataNew[\"SOURCING_ELIGIBLE\"],\r\n BUYING_INV_ELIGIBLE: industryScopeDataNew[\"BUYING_INVOICING_ELIGIBLE\"],\r\n REQUISITION_ABLE: industryScopeDataNew[\"REQUISITIONABLE\"],\r\n REQUISITION_TYPE: industryScopeDataNew[\"REQUISITION_TYPE\"],\r\n CONTRACT_INV_ELIGIBLE: industryScopeDataNew[\"CONTRACT_INVOICING_ELIGIBLE\"],\r\n COMMERCE_AUTOMATION_ELIGIBLE: industryScopeDataNew[\"COMMERCE_AUTOMATION_ELIGIBLE\"],\r\n SUPP_CHAIN_COLLAB_ELIGIBLE: industryScopeDataNew[\"SUPP_CHAIN_COLLAB_ELIGIBLE\"],\r\n PAYABLES_ELIGIBLE: industryScopeDataNew[\"PAYABLES_ELIGIBLE\"],\r\n SAP_FIELDGLASS_ELIGIBLE: industryScopeDataNew[\"SAP_FIELDGLASS_ELIGIBLE\"],\r\n SAP_CONCUR_ELIGIBLE: industryScopeDataNew[\"SAP_CONCUR_ELIGIBLE\"],\r\n SPOT_BUY_ELIGIBLE: industryScopeDataNew[\"SPOT_BUY_ELIGIBLE\"],\r\n USER_COMMENT: this.state.userComment,\r\n SCOPE_CHILD_FLAG: this.state.scopeChildFlag,\r\n COMMENT_CHILD_FLAG: this.state.commentChildFlag\r\n };\r\n this.props.setPopUpTabLoadingStatus(true)\r\n this.props.industryDrillScopeUpdate(record)\r\n .then((response) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n this.props.trackIndustryDrillScopeChanges(false)\r\n if (response.data.Result.length === 0) {\r\n this.props.industryDrillScopeUpdateLoading(false)\r\n } else {\r\n this.props.industryDrillScopeUpdateLoading(false)\r\n\r\n const supplierData = response.data.Result;\r\n\r\n this.setState({ industryScopeData: supplierData, industryScopeDataCurrent: cloneDeep(supplierData), responseMsg: 'Record has been updated successfully', isError: 'No', isLoading: false, isSaveInProgress: false, userComment: '', warningRecords: [] }, this.loadData(record.CAPIQ_INDUSTRY_ID))\r\n }\r\n }).catch((error) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n if (error.stack.includes('Network Error')) {\r\n this.props.industryDrillScopeUpdateLoading(false)\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isSaveInProgress: false, isLoading: false })\r\n }\r\n else {\r\n this.props.industryDrillScopeUpdateLoading(false)\r\n this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isSaveInProgress: false, isLoading: false })\r\n }\r\n })\r\n }\r\n\r\n markFlagINP(supplierDataOld, supplierDataNew) {\r\n if (supplierDataOld[\"EXCLUSION_REASON\"] !== supplierDataNew[\"EXCLUSION_REASON\"]\r\n || supplierDataOld[\"DIRECT_SPEND\"] !== supplierDataNew[\"DIRECT_SPEND\"]) {\r\n return true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n handleScopeSourceChange(data, field, props) {\r\n this.setState({ scopeSource: data.value })\r\n }\r\n\r\n hasRecordErrors() {\r\n const errorRecords = this.state.errorRecords\r\n var errorRecordSize = 0;\r\n Object.values(errorRecords).forEach((item) => {\r\n errorRecordSize += item.length;\r\n })\r\n\r\n return errorRecordSize > 0\r\n }\r\n\r\n hasPendingChange() {\r\n for (const key in this.state.industryScopeData) {\r\n if (this.state.industryScopeData[key] !== this.state.industryScopeDataCurrent[key]) {\r\n return true;\r\n }\r\n }\r\n\r\n return false;\r\n }\r\n\r\n\r\n getValidationDiv() {\r\n const warningRecords = this.state.warningRecords;\r\n const errorRecords = this.state.errorRecords;\r\n\r\n var warningRecordSize = 0;\r\n var totalWarningRecords = []\r\n Object.values(warningRecords).forEach((item) => {\r\n totalWarningRecords = totalWarningRecords.concat(item);\r\n })\r\n var warningDiv = Object.keys(warningRecords).map((key, index) => (\r\n warningRecords[key].length !== 0 ?\r\n \r\n
\r\n {/* \r\n \r\n \r\n {\r\n this.props.tabs.map((tab, i) => {\r\n var disabledTab = _state.isPopUpTabLoading && activeTab === tab.id ? false : _state.isPopUpTabLoading;\r\n return ( \r\n {\r\n this.props.tabs.map(tab => (\r\n activeTab === tab.id\r\n ? {tab.component} \r\n : null\r\n ))\r\n }\r\n
\r\n \r\n
*/}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n {this.props.tabMessage}\r\n
\r\n \r\n
\r\n \r\n this.closeModal(\"terms\")}\r\n color /> \r\n this.hideModal(\"terms\")}\r\n color /> \r\n
\r\n \r\n
: ''\r\n ))\r\n\r\n var errorRecordSize = 0;\r\n var totalErrorRecords = []\r\n Object.values(errorRecords).forEach((item) => {\r\n totalErrorRecords = totalErrorRecords.concat(item);\r\n })\r\n\r\n var errorDiv = Object.keys(errorRecords).map((key, index) => (\r\n errorRecords[key].length !== 0 ?\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {key}\r\n
\r\n \r\n
: ''\r\n ))\r\n\r\n var validationDiv = (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {key}\r\n
\r\n \r\n
)\r\n\r\n return validationDiv;\r\n }\r\n\r\n warningToggle() {\r\n this.setState((previousState) => { return { warningDiv: !previousState.warningDiv } })\r\n }\r\n\r\n errorToggle() {\r\n this.setState((previousState) => { return { errorDiv: !previousState.errorDiv } })\r\n }\r\n //.formulaePlus .formulaeMinus\r\n render() {\r\n const validationDiv = this.getValidationDiv();\r\n\r\n return (\r\n \r\n {totalWarningRecords.length > 0 ?\r\n
\r\n \r\n
: ''}\r\n {totalErrorRecords.length > 0 ?\r\n \r\n \r\n {totalWarningRecords.length} {this.props.contentDetailedFile.validationWarningText} {this.props.contentDetailedFile.warningChangeMessage}\r\n
\r\n {totalWarningRecords.length} {this.props.contentDetailedFile.validationWarningText} {this.props.contentDetailedFile.warningChangeMessage}\r\n \r\n {this.state.warningDiv ? : }\r\n
\r\n {this.state.warningDiv ? warningDiv : ''}\r\n : }\r\n \r\n
: ''}\r\n \r\n \r\n {totalErrorRecords.length} {this.props.contentDetailedFile.validationErrorText} {this.props.contentDetailedFile.validationThatText} {this.props.contentDetailedFile.validationMustText} {this.props.contentDetailedFile.errorChangeMessage}\r\n
\r\n {totalErrorRecords.length} {this.props.contentDetailedFile.validationErrorText} {this.props.contentDetailedFile.validationThatText} {this.props.contentDetailedFile.validationMustText} {this.props.contentDetailedFile.errorChangeMessage}\r\n \r\n {this.state.errorDiv ? : }\r\n
\r\n {this.state.errorDiv ? errorDiv : ''}\r\n : }\r\n \r\n {\r\n this.onSave(values)\r\n actions.setSubmitting(false);\r\n }}\r\n render={props => (\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n ui: state.content.ui,\r\n content: state.content.spendAnalysis.supplierDrilldown.scopeandMatch,\r\n contentDetailedFile: state.content.spendAnalysis.detailedFile,\r\n spendDetails: state.spendDetails,\r\n user: state.default,\r\n supplierComments: state.content.spendAnalysis.supplierDrilldown.supplierComments,\r\n industryDrill: state.content.spendAnalysis.industryDrilldown.industryScopeAndMatch,\r\n currencySymbols: state.content.CurrencySymbols\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getIndustryDrillScopeDetailsSuccess: message => dispatch(getIndustryDrillScopeDetailsSuccess(message)),\r\n getIndustryDrillScopeDetailsFailure: error => dispatch(getIndustryDrillScopeDetailsFailure(error)),\r\n getIndustryDrillScopeDetailsLoading: bool => dispatch(getIndustryDrillScopeDetailsLoading(bool)),\r\n getIndustryDrillScopeDetails: (DMCId, VSId, userEmail, Id) => dispatch(getIndustryDrillScopeDetails(DMCId, VSId, userEmail, Id)),\r\n industryDrillScopeUpdateLoading: bool => dispatch(industryDrillScopeUpdateLoading(bool)),\r\n industryDrillScopeUpdate: (record) => dispatch(industryDrillScopeUpdate(record)),\r\n trackIndustryDrillScopeChanges: message => dispatch(trackIndustryDrillScopeChanges(message)),\r\n trackSupplierDrillDownSave: message => dispatch(trackSupplierDrillDownSave(message)),\r\n storeIndustryDetails: (data) => dispatch(storeIndustryDetails(data)),\r\n getIndustrySpend: (params) => dispatch(getIndustrySpend(params)),\r\n setPopUpTabLoadingStatus: bool => dispatch(setPopUpTabLoadingStatus(bool)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(IndustriesScopeAndMatch); ","import React, { Component } from 'react'\r\n\r\nimport { IndustrySpendColumns } from 'Constants'\r\nimport CustomGrid from 'UI/CustomGrid'\r\nimport { connect } from 'react-redux'\r\nimport { Filters, Editors } from \"react-data-grid-addons\";\r\nimport { ControlTextE, SelectE, CheckboxE, ScreenE, PopupE, CustomGridE } from 'UI/CustomComponents/Controls';\r\n\r\nimport {\r\n storeVendorDetails,\r\n getIndustrySpend,\r\n getIndustryDrillScopeDetails,\r\n getIndustryDrillScopeDetailsSuccess,\r\n getIndustryDrillScopeDetailsFailure,\r\n getIndustryDrillScopeDetailsLoading,\r\n storeIndustryGICS_ID,\r\n storeIndustryDetails,\r\n industrySpendUpdate,\r\n trackIndustryDrillScopeChanges,\r\n setPopUpTabLoadingStatus\r\n} from 'actions/spendActions'\r\n\r\nimport { formatter, getNonEmptyValue, formatThousands, convertToMillion, binarySearchIndex } from \"../../utils/Utils\";\r\n\r\nimport TextfilterRenderer from 'UI/TextFilterRenderer';\r\nimport NumericFilterRenderer from 'UI/NumericFilterRenderer';\r\nimport AutoCompleteFilterAdv from 'UI/AutoCompleteFilterAdv';\r\nimport TextEditor from 'UI/TextEditor';\r\nimport Screen from 'UI/CustomComponents/Screen';\r\n\r\nconst { DropDownEditor } = Editors;\r\nconst dropdownValues = [\"Yes\", \"No\"];\r\nconst dropDownEditor = {this.props.industryDrill.tabHeader}
\r\n \r\n {!this.state.showFlag ? + : -}\r\n Expand for spend and transaction details\r\n
\r\n {this.state.showFlag ? \r\n
\r\n : null}\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n {this.props.industryDrill.uniqueSuppliersTotal + \":\"}
\r\n {formatThousands(this.state.totalAggregatedData.UNIQUE_SUPPLIERS)}
\r\n \r\n
\r\n {this.props.industryDrill.invoiceSpendTotal + \":\"}
\r\n {this.state.currencySymbol}{convertToMillion(this.state.totalAggregatedData.INVOICE_SPEND, true)}
\r\n \r\n
\r\n {this.props.industryDrill.poSpendTotal + \":\"}
\r\n {this.state.currencySymbol}{convertToMillion(this.state.totalAggregatedData.PO_SPEND, true)}
\r\n \r\n
\r\n {this.props.industryDrill.invoiceCountTotal + \":\"}
\r\n {formatThousands(this.state.totalAggregatedData.INVOICE_COUNT)}
\r\n \r\n
\r\n {this.props.industryDrill.poCountTotal + \":\"}
\r\n {formatThousands(this.state.totalAggregatedData.PO_COUNT)}
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n {this.props.industryDrill.uniqueSuppliersCurrent + \":\"}
\r\n {formatThousands(this.state.currentAggregatedData.UNIQUE_SUPPLIERS)}
\r\n \r\n
\r\n {this.props.industryDrill.invoiceSpendCurrent + \":\"}
\r\n {this.state.currencySymbol}{convertToMillion(this.state.currentAggregatedData.INVOICE_SPEND, true)}
\r\n \r\n
\r\n {this.props.industryDrill.poSpendCurrent + \":\"}
\r\n {this.state.currencySymbol}{convertToMillion(this.state.currentAggregatedData.PO_SPEND, true)}
\r\n \r\n
\r\n {this.props.industryDrill.invoiceCountCurrent + \":\"}
\r\n {formatThousands(this.state.currentAggregatedData.INVOICE_COUNT)}
\r\n \r\n
\r\n {this.props.industryDrill.poCountCurrent + \":\"}
\r\n {formatThousands(this.state.currentAggregatedData.PO_COUNT)}
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n {this.props.industryDrill.uniqueSuppliersChild + \":\"}
\r\n {formatThousands(this.state.childAggregatedData.UNIQUE_SUPPLIERS)}
\r\n \r\n
\r\n {this.props.industryDrill.invoiceSpendChild + \":\"}
\r\n {this.state.currencySymbol}{convertToMillion(this.state.childAggregatedData.INVOICE_SPEND, true)}
\r\n \r\n
\r\n {this.props.industryDrill.poSpendChild + \":\"}
\r\n {this.state.currencySymbol}{convertToMillion(this.state.childAggregatedData.PO_SPEND, true)}
\r\n \r\n
\r\n {this.props.industryDrill.invoiceCountChild + \":\"}
\r\n {formatThousands(this.state.childAggregatedData.INVOICE_COUNT)}
\r\n \r\n
\r\n {this.props.industryDrill.poCountChild + \":\"}
\r\n {formatThousands(this.state.childAggregatedData.PO_COUNT)}
\r\n \r\n \r\n
\r\n )} />\r\n {\"Scope Notes\"}\r\n 
\r\n
\r\n {this.state.scopeNotes ?\r\n \r\n\r\n
: null}\r\n \r\n this.onChange(e)}\r\n id='yourFile.commentsRequest'\r\n //label={this.props.content.commentsRequest}\r\n // value={currentActiveRequest !== undefined && currentActiveRequest.UPDATED_COMMENTS !== undefined ? currentActiveRequest.UPDATED_COMMENTS : ''}\r\n />\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content,\r\n ui: state.content.ui,\r\n user: state.default,\r\n spendDetails: state.spendDetails,\r\n industrySpendLang: state.content.spendAnalysis.industryDrilldown.industrySpend,\r\n currencySymbols: state.content.CurrencySymbols,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n storeIndustryGICS_ID: (GICS_ID) => dispatch(storeIndustryGICS_ID(GICS_ID)),\r\n getIndustryDrillScopeDetailsSuccess: message => dispatch(getIndustryDrillScopeDetailsSuccess(message)),\r\n getIndustryDrillScopeDetailsFailure: error => dispatch(getIndustryDrillScopeDetailsFailure(error)),\r\n getIndustryDrillScopeDetailsLoading: bool => dispatch(getIndustryDrillScopeDetailsLoading(bool)),\r\n getIndustryDrillScopeDetails: (DMCId, VSId, userEmail, Id) => dispatch(getIndustryDrillScopeDetails(DMCId, VSId, userEmail, Id)),\r\n storeVendorDetails: (vendorDetails) => dispatch(storeVendorDetails(vendorDetails)),\r\n getIndustrySpend: (params) => dispatch(getIndustrySpend(params)),\r\n storeIndustryDetails: (data) => dispatch(storeIndustryDetails(data)),\r\n industrySpendUpdate: (data) => dispatch(industrySpendUpdate(data)),\r\n trackIndustryDrillScopeChanges: message => dispatch(trackIndustryDrillScopeChanges(message)),\r\n setPopUpTabLoadingStatus: bool => dispatch(setPopUpTabLoadingStatus(bool)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(IndustrySpend); ","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport Children from 'react-children-utilities';\r\nimport { Control } from 'react-redux-form'\r\nimport { Checkbox } from 'material-ui';\r\nimport Popup from \"reactjs-popup\";\r\nimport CustomGrid from 'UI/CustomGrid'\r\nimport Button from 'UI/Button'\r\nimport PopupButton from 'UI/PopupButton'\r\nimport Select from 'react-select'\r\nimport { RadioButton } from 'material-ui';\r\n\r\nexport default class Screen extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { readOnly: false, children: this.props.children };\r\n this.recursiveMap = this.recursiveMap.bind(this)\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.lastUpdated !== this.props.lastUpdated || this.state.readOnly !== nextProps.readOnly)\r\n {\r\n if(nextProps.readOnly) {\r\n const children = this.mapChild(nextProps.children);\r\n this.setState({children: children, readOnly: nextProps.readOnly})\r\n } else {\r\n this.setState({children: nextProps.children, readOnly: false})\r\n }\r\n }\r\n }\r\n\r\n mapChild(children) {\r\n var newChildren = Children.deepMap(children, (child) => {\r\n if (!React.isValidElement(child)) {\r\n return child;\r\n }\r\n\r\n let props = this.deleteDisabledProps(child.props);\r\n\r\n if(child.type === Control.text || child.type === CustomGrid) {\r\n props.readOnly = this.state.readOnly\r\n } else if(child.type === Checkbox || child.type === Popup || child.type === RadioButton) {\r\n props.disabled = this.state.readOnly\r\n } else if(child.type === Select) {\r\n props.isDisabled = this.state.readOnly\r\n } else if(child.type === Button || child.type === PopupButton) {\r\n props.disabled = this.state.readOnly\r\n props.showLoader = false\r\n }\r\n else if(child.type === 'input'){\r\n props.disabled = this.state.readOnly\r\n }\r\n\r\n return React.cloneElement(child, props);\r\n });\r\n\r\n return newChildren;\r\n }\r\n\r\n deleteDisabledProps = (props) => {\r\n const newProps = {...props}\r\n delete newProps.disabled;\r\n \r\n return newProps\r\n }\r\n\r\n render() {\r\n return (\r\n {this.props.industrySpendLang.tabHeader}
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n {this.props.industrySpendLang.uniqueSuppliers + \":\"}
\r\n {formatThousands(this.state.aggregatedData.UNIQUE_SUPPLIERS)}
\r\n \r\n
\r\n {this.props.industrySpendLang.invoiceSpend + \":\"}
\r\n {this.state.currencySymbol}{convertToMillion(this.state.aggregatedData.INVOICE_SPEND, true)}
\r\n \r\n
\r\n {this.props.industrySpendLang.poSpend + \":\"}
\r\n {this.state.currencySymbol}{convertToMillion(this.state.aggregatedData.PO_SPEND, true)}
\r\n \r\n
\r\n {this.props.industrySpendLang.invoiceCount + \":\"}
\r\n {formatThousands(this.state.aggregatedData.INVOICE_COUNT)}
\r\n \r\n
\r\n {this.props.industrySpendLang.poCount + \":\"}
\r\n {formatThousands(this.state.aggregatedData.PO_COUNT)}
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n user: state.default,\r\n spendDetails: state.spendDetails,\r\n //content: state.content.spendAnalysis.defineScope,\r\n industrySuppliers: state.content.spendAnalysis.industryDrilldown.industrySuppliers,\r\n validation: state.content.validation,\r\n currencySymbols: state.content.CurrencySymbols\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n industrySupplierLoading: (bool) => dispatch(industrySupplierLoading(bool)),\r\n industrySupplierSuccess: (bool) => dispatch(industrySupplierSuccess(bool)),\r\n industrySupplierFailure: (error) => dispatch(industrySupplierFailure(error)),\r\n getIndustrySupplierScopeDetails: (formValues) => dispatch(getIndustrySupplierScopeDetails(formValues)),\r\n setPopUpTabLoadingStatus: bool => dispatch(setPopUpTabLoadingStatus(bool)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(IndustrySupplier); ","import * as d3 from 'd3'\r\nimport { convertToMillion, convertToThousands, formatThousands } from 'utils/Utils'\r\n\r\nconst lineChart = (drawXY, data, fillColor, legendName, translatedLegendName, maxValue, element, currency, Ylabel) => {\r\n if (data !== undefined) {\r\n var windowWidth = 1050;\r\n var windowHeight = 420;\r\n\r\n var margin = { top: 40, right: 0, bottom: 10, left: 70 }\r\n var svg = d3.select(\"#\" + element)\r\n .attr(\"viewBox\", '0 0 1050 460')\r\n .attr('preserveAspectRatio', 'xMinYMin')\r\n .append(\"g\")\r\n .attr(\"transform\",\r\n \"translate(\" + margin.left + \",\" + margin.top + \")\");\r\n\r\n var x = d3.scaleBand()\r\n .range([0, windowWidth])\r\n .padding(1)\r\n .domain(data.map(function (d) {\r\n return d.year;\r\n }));\r\n\r\n var y = d3.scaleLinear()\r\n .domain([0, maxValue + Math.round(maxValue / 5)]) // Put here maximum value from all data\r\n .range([windowHeight, 0]).nice();\r\n\r\n if (drawXY) {\r\n\r\n svg.append(\"g\")\r\n .attr(\"class\", \"axisChart\")\r\n //.call(d3.axisLeft(y).ticks(5, \"s\"))\r\n .call(d3.axisLeft(y).ticks(5,\"s\").tickFormat(function(d){\r\n return element === 'industryTransactionStats' ? convertToThousands((d)) : convertToMillion(d);\r\n }))\r\n .append(\"text\")\r\n .attr(\"transform\", \"rotate(-90)\")\r\n .attr(\"y\", 0 - 60)\r\n .attr(\"x\", 0 - (windowHeight / 2))\r\n .attr(\"dy\", \"1em\")\r\n .style(\"text-anchor\", \"middle\")\r\n .text(Ylabel);\r\n\r\n // svg.append(\"g\")\r\n // .attr(\"class\", \"axisChart\")\r\n // .call(d3.axisLeft(y).ticks(5, \"s\"))\r\n // .append(\"text\")\r\n // .attr(\"x\", -30)\r\n // .attr(\"y\", -10)\r\n // .attr(\"text-anchor\", \"start\")\r\n // .text(element === 'industryTransactionStats' ? 'Transaction' : 'Spend');\r\n\r\n svg.append(\"g\")\r\n .attr(\"class\", \"axisChart\")\r\n .attr(\"transform\", \"translate(0,\" + windowHeight + \")\")\r\n .call(d3.axisBottom(x).tickFormat(function (d) {\r\n return d;\r\n }))\r\n\r\n //X-Axis Legend\r\n // svg.append(\"g\")\r\n // .attr(\"class\", \"axisChart\")\r\n // .append(\"text\").attr(\"x\", (windowWidth / 2))\r\n // .attr(\"y\", windowHeight + 70)\r\n // .attr(\"text-anchor\", \"middle\")\r\n // .text(\"Trailing 12 Months\");\r\n\r\n }\r\n\r\n // Add the line\r\n svg.append(\"path\")\r\n .datum(data)\r\n .attr(\"fill\", \"none\")\r\n .attr(\"stroke\", fillColor)\r\n .attr(\"stroke-width\", 1.5)\r\n .attr(\"d\", d3.line()\r\n .x(function (d) {\r\n return x(d[\"year\"])\r\n })\r\n .y(function (d) {\r\n return y(d[\"stats\"])\r\n })\r\n )\r\n\r\n // Add the points\r\n svg.append(\"g\")\r\n .selectAll(\"dot\")\r\n .data(data)\r\n .enter()\r\n .append(\"circle\")\r\n .attr(\"class\", \"dot\")\r\n .attr(\"cx\", function (d) {\r\n return x(d[\"year\"])\r\n })\r\n .attr(\"cy\", function (d) {\r\n return y(d[\"stats\"])\r\n })\r\n .attr(\"r\", 2)\r\n .attr(\"fill\", fillColor)\r\n\r\n svg.append(\"g\")\r\n .attr(\"fill\", \"#000\")\r\n .selectAll(\"g\")\r\n .data(data)\r\n .join(\"g\")\r\n .attr(\"transform\", function (d) { return `translate(${x(d[\"year\"])},${y(d[\"stats\"]) - 5})` })\r\n .attr(\"opacity\", 1).append(\"text\")\r\n .style(\"font-size\", \"0.625rem\")\r\n .style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\")\r\n .text(function (d) {\r\n return element === 'industrySpendStats' ? currency + convertToMillion(d[\"stats\"], true) : formatThousands(Math.round(d[\"stats\"]));\r\n });\r\n\r\n switch (legendName) {\r\n case 'Purchase Orders':\r\n svg.append(\"circle\").attr(\"cx\", 170).attr(\"cy\", windowHeight + 40).attr(\"r\", 6).style(\"fill\", fillColor)\r\n svg.append(\"text\").attr(\"x\", 190).attr(\"y\", windowHeight + 40).attr(\"class\", \"axis\").style(\"font-size\", \"0.675rem\").style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\").text(translatedLegendName).attr(\"fill\", \"#000\").attr(\"alignment-baseline\", \"middle\")\r\n break\r\n case 'Order Confirmations':\r\n svg.append(\"circle\").attr(\"cx\", 310).attr(\"cy\", windowHeight + 40).attr(\"r\", 6).style(\"fill\", fillColor)\r\n svg.append(\"text\").attr(\"x\", 330).attr(\"y\", windowHeight + 40).attr(\"class\", \"axis\").style(\"font-size\", \"0.675rem\").style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\").text(translatedLegendName).attr(\"fill\", \"#000\").attr(\"alignment-baseline\", \"middle\")\r\n break\r\n case 'PO Invoices':\r\n svg.append(\"circle\").attr(\"cx\", 470).attr(\"cy\", windowHeight + 40).attr(\"r\", 6).style(\"fill\", fillColor)\r\n svg.append(\"text\").attr(\"x\", 490).attr(\"y\", windowHeight + 40).attr(\"class\", \"axis\").style(\"font-size\", \"0.675rem\").style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\").text(translatedLegendName).attr(\"fill\", \"#000\").attr(\"alignment-baseline\", \"middle\")\r\n break\r\n case 'Non-PO Invoices':\r\n svg.append(\"circle\").attr(\"cx\", 590).attr(\"cy\", windowHeight + 40).attr(\"r\", 6).style(\"fill\", fillColor)\r\n svg.append(\"text\").attr(\"x\", 610).attr(\"y\", windowHeight + 40).attr(\"class\", \"axis\").style(\"font-size\", \"0.675rem\").style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\").text(translatedLegendName).attr(\"fill\", \"#000\").attr(\"alignment-baseline\", \"middle\")\r\n break\r\n case 'Advanced Ship Notices (ASNs)':\r\n svg.append(\"circle\").attr(\"cx\", 730).attr(\"cy\", windowHeight + 40).attr(\"r\", 6).style(\"fill\", fillColor)\r\n svg.append(\"text\").attr(\"x\", 750).attr(\"y\", windowHeight + 40).attr(\"class\", \"axis\").style(\"font-size\", \"0.675rem\").style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\").text(translatedLegendName).attr(\"fill\", \"#000\").attr(\"alignment-baseline\", \"middle\")\r\n break\r\n case 'PO Spend':\r\n svg.append(\"circle\").attr(\"cx\", 350).attr(\"cy\", windowHeight + 40).attr(\"r\", 6).style(\"fill\", fillColor)\r\n svg.append(\"text\").attr(\"x\", 370).attr(\"y\", windowHeight + 40).attr(\"class\", \"axis\").style(\"font-size\", \"0.675rem\").style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\").text(translatedLegendName).attr(\"fill\", \"#000\").attr(\"alignment-baseline\", \"middle\")\r\n break\r\n case 'PO Invoice Spend':\r\n svg.append(\"circle\").attr(\"cx\", 460).attr(\"cy\", windowHeight + 40).attr(\"r\", 6).style(\"fill\", fillColor)\r\n svg.append(\"text\").attr(\"x\", 480).attr(\"y\", windowHeight + 40).attr(\"class\", \"axis\").style(\"font-size\", \"0.675rem\").style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\").text(translatedLegendName).attr(\"fill\", \"#000\").attr(\"alignment-baseline\", \"middle\")\r\n break\r\n case 'Non-PO Invoice Spend':\r\n svg.append(\"circle\").attr(\"cx\", 600).attr(\"cy\", windowHeight + 40).attr(\"r\", 6).style(\"fill\", fillColor)\r\n svg.append(\"text\").attr(\"x\", 620).attr(\"y\", windowHeight + 40).attr(\"class\", \"axis\").style(\"font-size\", \"0.675rem\").style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\").text(translatedLegendName).attr(\"fill\", \"#000\").attr(\"alignment-baseline\", \"middle\")\r\n break\r\n default:\r\n break\r\n }\r\n }\r\n return svg;\r\n}\r\n\r\nexport default lineChart\r\n\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport * as d3 from 'd3'\r\nimport lineChart from 'components/UI/LineChart'\r\n\r\nclass ANIndustryTransactionStats extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n }\r\n\r\n loadData() {\r\n d3.select(\"#industryTransactionStats\").selectAll(\"g\").remove();\r\n d3.select(\"#industryTransactionStats\").selectAll(\"path\").remove();\r\n\r\n var data = [{\r\n \"stats\": \"1000\",\r\n \"year\": \"Jan-2020\"\r\n }, {\r\n \"stats\": \"1050\",\r\n \"year\": \"Feb-2020\"\r\n }, {\r\n \"stats\": \"1103\",\r\n \"year\": \"Mar-2020\"\r\n }, {\r\n \"stats\": \"1158\",\r\n \"year\": \"Apr-2020\"\r\n }, {\r\n \"stats\": \"1216\",\r\n \"year\": \"May-2020\"\r\n }, {\r\n \"stats\": \"1216\",\r\n \"year\": \"Jun-2020\"\r\n }, {\r\n \"stats\": \"1216\",\r\n \"year\": \"Jul-2020\"\r\n }, {\r\n \"stats\": \"1276\",\r\n \"year\": \"Aug-2020\"\r\n }, {\r\n \"stats\": \"1340\",\r\n \"year\": \"Sep-2020\"\r\n }, {\r\n \"stats\": \"1407\",\r\n \"year\": \"Oct-2020\"\r\n }, {\r\n \"stats\": \"1477\",\r\n \"year\": \"Nov-2020\"\r\n }, {\r\n \"stats\": \"1551\",\r\n \"year\": \"Dec-2020\"\r\n }];\r\n lineChart(true, data, '#4472c4', 'Purchase Orders', this.props.industryNetworkStats.purchaseOrders, 2316, 'industryTransactionStats', this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()], this.props.industryNetworkStats.transactionYaxisLabel)\r\n\r\n var data1 = [{\r\n \"stats\": \"750\",\r\n \"year\": \"Jan-2020\"\r\n }, {\r\n \"stats\": \"788\",\r\n \"year\": \"Feb-2020\"\r\n }, {\r\n \"stats\": \"827\",\r\n \"year\": \"Mar-2020\"\r\n }, {\r\n \"stats\": \"868\",\r\n \"year\": \"Apr-2020\"\r\n }, {\r\n \"stats\": \"912\",\r\n \"year\": \"May-2020\"\r\n }, {\r\n \"stats\": \"912\",\r\n \"year\": \"Jun-2020\"\r\n }, {\r\n \"stats\": \"912\",\r\n \"year\": \"Jul-2020\"\r\n }, {\r\n \"stats\": \"957\",\r\n \"year\": \"Aug-2020\"\r\n }, {\r\n \"stats\": \"1005\",\r\n \"year\": \"Sep-2020\"\r\n }, {\r\n \"stats\": \"1055\",\r\n \"year\": \"Oct-2020\"\r\n }, {\r\n \"stats\": \"1108\",\r\n \"year\": \"Nov-2020\"\r\n }, {\r\n \"stats\": \"1163\",\r\n \"year\": \"Dec-2020\"\r\n }];\r\n\r\n lineChart(false, data1, '#ed7d31', 'Order Confirmations', this.props.industryNetworkStats.orderConfirmations, 2316, 'industryTransactionStats', this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()], this.props.industryNetworkStats.transactionYaxisLabel)\r\n\r\n var data2 = [{\r\n \"stats\": \"250\",\r\n \"year\": \"Jan-2020\"\r\n }, {\r\n \"stats\": \"263\",\r\n \"year\": \"Feb-2020\"\r\n }, {\r\n \"stats\": \"276\",\r\n \"year\": \"Mar-2020\"\r\n }, {\r\n \"stats\": \"289\",\r\n \"year\": \"Apr-2020\"\r\n }, {\r\n \"stats\": \"304\",\r\n \"year\": \"May-2020\"\r\n }, {\r\n \"stats\": \"304\",\r\n \"year\": \"Jun-2020\"\r\n }, {\r\n \"stats\": \"304\",\r\n \"year\": \"Jul-2020\"\r\n }, {\r\n \"stats\": \"319\",\r\n \"year\": \"Aug-2020\"\r\n }, {\r\n \"stats\": \"335\",\r\n \"year\": \"Sep-2020\"\r\n }, {\r\n \"stats\": \"352\",\r\n \"year\": \"Oct-2020\"\r\n }, {\r\n \"stats\": \"369\",\r\n \"year\": \"Nov-2020\"\r\n }, {\r\n \"stats\": \"388\",\r\n \"year\": \"Dec-2020\"\r\n }];\r\n\r\n lineChart(false, data2, '#a5a5a5', 'Advanced Ship Notices (ASNs)', this.props.industryNetworkStats.ASNs, 2316, 'industryTransactionStats', this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()], this.props.industryNetworkStats.transactionYaxisLabel)\r\n\r\n var data3 = [{\r\n \"stats\": \"850\",\r\n \"year\": \"Jan-2020\"\r\n }, {\r\n \"stats\": \"893\",\r\n \"year\": \"Feb-2020\"\r\n }, {\r\n \"stats\": \"937\",\r\n \"year\": \"Mar-2020\"\r\n }, {\r\n \"stats\": \"984\",\r\n \"year\": \"Apr-2020\"\r\n }, {\r\n \"stats\": \"1033\",\r\n \"year\": \"May-2020\"\r\n }, {\r\n \"stats\": \"1033\",\r\n \"year\": \"Jun-2020\"\r\n }, {\r\n \"stats\": \"1033\",\r\n \"year\": \"Jul-2020\"\r\n }, {\r\n \"stats\": \"1085\",\r\n \"year\": \"Aug-2020\"\r\n }, {\r\n \"stats\": \"1139\",\r\n \"year\": \"Sep-2020\"\r\n }, {\r\n \"stats\": \"1196\",\r\n \"year\": \"Oct-2020\"\r\n }, {\r\n \"stats\": \"1256\",\r\n \"year\": \"Nov-2020\"\r\n }, {\r\n \"stats\": \"1319\",\r\n \"year\": \"Dec-2020\"\r\n }];\r\n\r\n lineChart(false, data3, '#ffc000', 'PO Invoices', this.props.industryNetworkStats.POInvoices, 2316, 'industryTransactionStats', this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()], this.props.industryNetworkStats.transactionYaxisLabel)\r\n\r\n var data4 = [{\r\n \"stats\": \"1500\",\r\n \"year\": \"Jan-2020\"\r\n }, {\r\n \"stats\": \"1575\",\r\n \"year\": \"Feb-2020\"\r\n }, {\r\n \"stats\": \"1654\",\r\n \"year\": \"Mar-2020\"\r\n }, {\r\n \"stats\": \"1736\",\r\n \"year\": \"Apr-2020\"\r\n }, {\r\n \"stats\": \"1823\",\r\n \"year\": \"May-2020\"\r\n }, {\r\n \"stats\": \"1823\",\r\n \"year\": \"Jun-2020\"\r\n }, {\r\n \"stats\": \"1823\",\r\n \"year\": \"Jul-2020\"\r\n }, {\r\n \"stats\": \"1914\",\r\n \"year\": \"Aug-2020\"\r\n }, {\r\n \"stats\": \"2010\",\r\n \"year\": \"Sep-2020\"\r\n }, {\r\n \"stats\": \"2111\",\r\n \"year\": \"Oct-2020\"\r\n }, {\r\n \"stats\": \"2216\",\r\n \"year\": \"Nov-2020\"\r\n }, {\r\n \"stats\": \"2327\",\r\n \"year\": \"Dec-2020\"\r\n }];\r\n\r\n lineChart(false, data4, '#5b9bd5', 'Non-PO Invoices', this.props.industryNetworkStats.NonPOInvoices, 2316, 'industryTransactionStats', this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()], this.props.industryNetworkStats.transactionYaxisLabel)\r\n }\r\n\r\n render() {\r\n return (\r\n {this.props.industrySuppliers.tabHeader}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.props.industrySuppliers.uniqueSuppliers + \":\"}
\r\n {formatThousands(this.state.aggregatedData.UNIQUE_SUPPLIERS)}
\r\n \r\n
\r\n {this.props.industrySuppliers.invoiceSpend + \":\"}
\r\n {this.state.currencySymbol}{convertToMillion(this.state.aggregatedData.INVOICE_SPEND, true)}
\r\n \r\n
\r\n {this.props.industrySuppliers.poSpend + \":\"}
\r\n {this.state.currencySymbol}{convertToMillion(this.state.aggregatedData.PO_SPEND, true)}
\r\n \r\n
\r\n {this.props.industrySuppliers.invoiceCount + \":\"}
\r\n {formatThousands(this.state.aggregatedData.INVOICE_COUNT)}
\r\n \r\n
\r\n {this.props.industrySuppliers.poCount + \":\"}
\r\n {formatThousands(this.state.aggregatedData.PO_COUNT)}
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content,\r\n ui: state.content.ui,\r\n user: state.default,\r\n industryNetworkStats: state.content.spendAnalysis.industryDrilldown.industryNetworkStats,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ANIndustryTransactionStats); ","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport * as d3 from 'd3'\r\nimport lineChart from 'components/UI/LineChart'\r\n\r\nclass ANIndustrySpendStats extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n }\r\n\r\n loadData() {\r\n d3.select(\"#industrySpendStats\").selectAll(\"g\").remove();\r\n d3.select(\"#industrySpendStats\").selectAll(\"path\").remove();\r\n\r\n var data = [{\r\n \"stats\": \"1200000.00\",\r\n \"year\": \"Jan-2020\"\r\n }, {\r\n \"stats\": \"1260000.00\",\r\n \"year\": \"Feb-2020\"\r\n }, {\r\n \"stats\": \"1323000.00\",\r\n \"year\": \"Mar-2020\"\r\n }, {\r\n \"stats\": \"1389150.00\",\r\n \"year\": \"Apr-2020\"\r\n }, {\r\n \"stats\": \"1458607.50\",\r\n \"year\": \"May-2020\"\r\n }, {\r\n \"stats\": \"1458607.50\",\r\n \"year\": \"Jun-2020\"\r\n }, {\r\n \"stats\": \"2000000.00\",\r\n \"year\": \"Jul-2020\"\r\n }, {\r\n \"stats\": \"1531537.88\",\r\n \"year\": \"Aug-2020\"\r\n }, {\r\n \"stats\": \"1608114.77\",\r\n \"year\": \"Sep-2020\"\r\n }, {\r\n \"stats\": \"1688520.51\",\r\n \"year\": \"Oct-2020\"\r\n }, {\r\n \"stats\": \"1772946.53\",\r\n \"year\": \"Nov-2020\"\r\n }, {\r\n \"stats\": \"1861593.86\",\r\n \"year\": \"Dec-2020\"\r\n }];\r\n lineChart(true, data, '#4472c4', 'PO Spend', this.props.industryNetworkStats.POSpend, 4304935.80, 'industrySpendStats', this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()], this.props.industryNetworkStats.spendYaxisLabel)\r\n\r\n var data1 = [{\r\n \"stats\": \"1487500.00\",\r\n \"year\": \"Jan-2020\"\r\n }, {\r\n \"stats\": \"1561875.00\",\r\n \"year\": \"Feb-2020\"\r\n }, {\r\n \"stats\": \"1639968.75\",\r\n \"year\": \"Mar-2020\"\r\n }, {\r\n \"stats\": \"1721967.19\",\r\n \"year\": \"Apr-2020\"\r\n }, {\r\n \"stats\": \"2000000.00\",\r\n \"year\": \"May-2020\"\r\n }, {\r\n \"stats\": \"1808065.55\",\r\n \"year\": \"Jun-2020\"\r\n }, {\r\n \"stats\": \"1808065.55\",\r\n \"year\": \"Jul-2020\"\r\n }, {\r\n \"stats\": \"1898468.82\",\r\n \"year\": \"Aug-2020\"\r\n }, {\r\n \"stats\": \"1993392.27\",\r\n \"year\": \"Sep-2020\"\r\n }, {\r\n \"stats\": \"2093061.88\",\r\n \"year\": \"Oct-2020\"\r\n }, {\r\n \"stats\": \"2197714.97\",\r\n \"year\": \"Nov-2020\"\r\n }, {\r\n \"stats\": \"2307600.72\",\r\n \"year\": \"Dec-2020\"\r\n }];\r\n\r\n lineChart(false, data1, '#ed7d31', 'PO Invoice Spend', this.props.industryNetworkStats.POInvoiceSpend, 4304935.80, 'industrySpendStats', this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()], this.props.industryNetworkStats.spendYaxisLabel)\r\n\r\n var data2 = [{\r\n \"stats\": \"2775000.00\",\r\n \"year\": \"Jan-2020\"\r\n }, {\r\n \"stats\": \"2913750.00\",\r\n \"year\": \"Feb-2020\"\r\n }, {\r\n \"stats\": \"3059437.50\",\r\n \"year\": \"Mar-2020\"\r\n }, {\r\n \"stats\": \"2000000.00\",\r\n \"year\": \"Apr-2020\"\r\n }, {\r\n \"stats\": \"3373029.84\",\r\n \"year\": \"May-2020\"\r\n }, {\r\n \"stats\": \"3373029.84\",\r\n \"year\": \"Jun-2020\"\r\n }, {\r\n \"stats\": \"3373029.84\",\r\n \"year\": \"Jul-2020\"\r\n }, {\r\n \"stats\": \"3541681.34\",\r\n \"year\": \"Aug-2020\"\r\n }, {\r\n \"stats\": \"3718765.40\",\r\n \"year\": \"Sep-2020\"\r\n }, {\r\n \"stats\": \"3904703.67\",\r\n \"year\": \"Oct-2020\"\r\n }, {\r\n \"stats\": \"4099938.86\",\r\n \"year\": \"Nov-2020\"\r\n }, {\r\n \"stats\": \"4304935.80\",\r\n \"year\": \"Dec-2020\"\r\n }];\r\n\r\n lineChart(false, data2, '#a5a5a5', 'Non-PO Invoice Spend', this.props.industryNetworkStats.NonPOInvoiceSpend, 4304935.80, 'industrySpendStats', this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()], this.props.industryNetworkStats.spendYaxisLabel)\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content,\r\n ui: state.content.ui,\r\n user: state.default,\r\n industryNetworkStats: state.content.spendAnalysis.industryDrilldown.industryNetworkStats,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ANIndustrySpendStats); ","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport ANIndustryTransactionStats from 'components/Spend/ANIndustryTransactionStats'\r\nimport ANIndustrySpendStats from 'components/Spend/ANIndustrySpendStats'\r\nimport { RadioButton } from 'material-ui';\r\n\r\nclass IndustryNetworkStatsHistogram extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n showANindustrySpendStats: false,\r\n stats: this.props.industryNetworkStats.industryTransaction\r\n }\r\n this.toggleComponent = this.toggleComponent.bind(this)\r\n this.radioButtonChecked = this.radioButtonChecked.bind(this)\r\n }\r\n\r\n toggleComponent() {\r\n this.setState((prevState) => { return { showANindustrySpendStats: !prevState.showANindustrySpendStats } })\r\n }\r\n\r\n radioButtonChecked(value) {\r\n if (value.target.value == 'industryTransaction') {\r\n this.setState({ stats: this.props.industryNetworkStats.industryTransaction })\r\n }\r\n else {\r\n this.setState({ stats: this.props.industryNetworkStats.industrySpend })\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\" + \"In Scope: \" + props.currency + (d.data.IN_SCOPE_SPEND == null ? 0 : convertToMillion(d.data.InScopeValue, true)) + \"
\" + \"Out Of Scope: \" + props.currency + (d.data.OUT_SCOPE_SPEND == null ? 0 : convertToMillion(d.data.OUT_SCOPE_SPEND, true))\r\n \"Total: \" + instance.formatAsPerMetrics(d.data.IN_SCOPE_SPEND + d.data.OUT_SCOPE_SPEND, true) + \"
\" + \"In Scope: \" + (d.data.IN_SCOPE_SPEND == null ? 0 : instance.formatAsPerMetrics(d.data.InScopeValue, true)) + \"
\" + \"Out Of Scope: \" + (d.data.OUT_SCOPE_SPEND == null ? 0 :instance.formatAsPerMetrics(d.data.OutScopeValue, true))\r\n : props.type == 'Count' ? \"Total :\" + formatThousands(d.data.IN_SCOPE_SPEND + d.data.OUT_SCOPE_SPEND) + \"
\" + \"In Scope: \" + (d.data.IN_SCOPE_SPEND == null ? 0 : formatThousands(d.data.InScopeValue)) + \"
\" + \"Out Of Scope: \" + (d.data.OUT_SCOPE_SPEND == null ? 0 : formatThousands(d.data.OutScopeValue))\r\n : \"Total: \" + convertToThousands(d.data.IN_SCOPE_SPEND + d.data.OUT_SCOPE_SPEND) + \"
\" + \"In Scope: \" + (d.data.IN_SCOPE_SPEND == null ? 0 : convertToThousands(d.data.InScopeValue)) + \"
\" + \"Out Of Scope: \" + (d.data.OUT_SCOPE_SPEND == null ? 0 : convertToThousands(d.data.OutScopeValue))\r\n );\r\n })\r\n .on(\"mouseout\", function (d) {\r\n tooltip.style(\"display\", \"none\");\r\n })\r\n // d3.select(window).on('mouseout', () => {\r\n // d3.selectAll('.tooltip').style('opacity', '0');\r\n // });\r\n\r\n // // Prep the tooltip bits, initial display is hidden\r\n // var tooltip = svg.append(\"g\")\r\n // .attr(\"class\", \"tooltip\")\r\n // .style(\"display\", \"none\");\r\n\r\n // tooltip.append(\"rect\")\r\n // .attr(\"width\", 30)\r\n // .attr(\"height\", 20)\r\n // .attr(\"fill\", \"white\")\r\n // .style(\"opacity\", 0.5);\r\n\r\n // tooltip.append(\"text\")\r\n // .attr(\"x\", 15)\r\n // .attr(\"dy\", \"1.2em\")\r\n // .style(\"text-anchor\", \"middle\")\r\n // .attr(\"font-size\", \"12px\")\r\n // .attr(\"font-weight\", \"bold\");\r\n\r\n //set the label\r\n svg.selectAll(\"text\")\r\n .data(data)\r\n .enter()\r\n .append(\"text\")\r\n .attr(\"class\", \"below\")\r\n .attr(\"x\", d => 970)\r\n .attr(\"y\", (d, i) => yScale(d.SOLUTION_TYPE) + 30)\r\n .attr(\"text-anchor\", \"left\")\r\n //.text(function (d) { return (props.type == 'Spend' ? (props.currency + convertToMillion(d.IN_SCOPE_SPEND)) : props.type == 'Count' ? formatThousands(d.IN_SCOPE_SPEND) : convertToThousands(d.IN_SCOPE_SPEND)) })// convertToMillion(d.IN_SCOPE_SPEND, true); \r\n .text(function (d) { return (props.type == 'Spend' ? instance.formatAsPerMetrics(d.IN_SCOPE_SPEND) : props.type == 'Count' ? formatThousands(d.IN_SCOPE_SPEND) : convertToThousands(d.IN_SCOPE_SPEND)) })\r\n .style(\"font-size\", \"15\")\r\n // .style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\")\r\n .style(\"font-weight\", \"700\")\r\n .style(\"fill\", \"#33C3FF\");\r\n\r\n //Uncomment below lines to add x axis\r\n // svg.append(\"g\")\r\n // .call(xAxis);\r\n\r\n svg.append(\"g\")\r\n .call(yAxis);\r\n\r\n // svg.append(\"g\")\r\n // .call(rAxis);\r\n\r\n return svg.node();\r\n }\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n\r\n\t\t\t\t
\r\n\t\t\t)\r\n\t\t}\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tui: state.content.ui,\r\n\t\tuser: state.default,\r\n\t\tuserData: state.valueStory,\r\n\t\tcontent: state.content,\r\n\t\thasErrored: state.contentHasErrored,\r\n\t\tisLoading: state.contentIsLoading,\r\n\t\tvalueStoryHasErrored: state.valueStoryHasErrored,\r\n\t\tvalueStoryIsLoading: state.valueStoryIsLoading,\r\n\t\tautoSaveSuccess: state.autoSaveSuccess,\r\n\t\tnav: state.content,\r\n\t\tcontentPE: state.contentPE\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tupdateLanguage: (lang) => dispatch(updateLanguage(lang)),\r\n\t\topenValueStory: (VSId, Id) => dispatch(openValueStory(VSId, Id)),\r\n\t\topenValueStorySuccess: () => dispatch(openValueStorySuccess()),\r\n\t\topenValueStoryFailure: (error) => dispatch(openValueStoryFailure(error)),\r\n\t\tfetchData: (url, curl) => dispatch(contentFetchData(url, curl)),\r\n\t\tfetchValueStoryData: (url) => dispatch(valueStoryFetchData(url)),\r\n\t\tvalueStoryFetchDataSuccess: (valueStory) => dispatch(valueStoryFetchDataSuccess(valueStory)),\r\n\t\tautoSave: (ValueStory, isBusinessCaseAccess) => dispatch(autoSave(ValueStory, isBusinessCaseAccess)),\r\n\t\tvalueStoryIsSaving: (bool) => dispatch(valueStoryIsSaving(bool)),\r\n\t\tautoSaveSuccess: (message) => dispatch(autoSaveSuccess(message)),\r\n\t\tautoSaveFailure: (error) => dispatch(autoSaveFailure(error)),\r\n\t\tresetError: () => dispatch(resetError()),\r\n\t\tvalidateSession: (formValues) => dispatch(validateSession(formValues)),\r\n\t\tloadUserFromToken: (user) => dispatch(loadUserFromToken(user)),\r\n\t\tsignInUserSuccess: (user) => dispatch(signInUserSuccess(user)),\r\n\t\tinitPrioritiesItems: (items) => dispatch(initPrioritiesItems(items)),\r\n\t\tupdateOnlineStatus: (status) => dispatch(updateOnlineStatus(status)),\r\n \tresetToken: () => dispatch(resetToken()),\r\n \tfetchToken: (values) => dispatch(fetchToken(values)),\r\n \tfetchTokenLoading: (bool) => dispatch(fetchTokenLoading(bool)),\r\n \tfetchTokenSuccess: (token) => dispatch(fetchTokenSuccess(token)),\r\n \tfetchTokenFailure: (error) => dispatch(fetchTokenFailure(error)),\r\n\t//fetchPEsData: (url) => dispatch(contentPEsFetchData(url))\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(App)\r\n","// In production, we register a service worker to serve assets from local cache.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\r\n// cached resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\r\n// This link also includes instructions on opting out of this behavior.\r\n\r\nlet refreshing\r\n\r\nexport default function register() {\r\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n window.addEventListener('load', () => {\r\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then(registration => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n installingWorker.onstatechange = () => {\r\n if (installingWorker.state === 'installed') {\r\n if (navigator.serviceWorker.controller) {\r\n //console.log('New service worker installed. Refresh')\r\n //window.location.reload();\r\n // At this point, the old content will have been purged and\r\n // the fresh content will have been added to the cache.\r\n // It's the perfect time to display a \"New content is\r\n // available; please refresh.\" message in your web app.\r\n // console.log('New content is available; please refresh.');\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n //console.log('Content is cached for offline use.');\r\n }\r\n }\r\n };\r\n };\r\n })\r\n .catch(error => {\r\n console.error('Error during service worker registration:', error);\r\n });\r\n });\r\n\r\n navigator.serviceWorker.ready\r\n .then(function(registration) {\r\n console.log('A service worker is active:', registration.active);\r\n });\r\n\r\n navigator.serviceWorker.addEventListener('controllerchange',\r\n\t\t\tfunction () {\r\n\t\t\t\tif (refreshing) {\r\n\t\t\t\t\treturn\r\n }\r\n \r\n console.log('New service worker installed. Refresh')\r\n\t\t\t\trefreshing = true\r\n\t\t\t\twindow.location.reload()\r\n\t\t\t}\r\n\t\t)\r\n }\r\n}\r\n\r\nexport function unregister() {\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister();\r\n });\r\n }\r\n}\r\n","export const contentHasErrored = (state = false, action) => {\r\n\tswitch (action.type) {\r\n\t\tcase 'CONTENT_HAS_ERRORED':\r\n\t\t\treturn action.hasErrored\r\n\t\t\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\nexport const contentIsLoading = (state = true, action) => {\r\n\tswitch (action.type) {\r\n\t\tcase 'CONTENT_IS_LOADING':\r\n\t\t\t// Prevent FOUC\r\n\t\t\tif(state === false) {\r\n\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\treturn action.isLoading\r\n\t\t\t\t}, 1000)\r\n\t\t\t} else {\r\n\t\t\t\treturn action.isLoading\r\n\t\t\t}\r\n\t\t\treturn state\r\n\t\t\t\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\nexport const content = (state = [], action) => {\r\n switch (action.type) {\r\n case 'CONTENT_FETCH_DATA_SUCCESS':\r\n return action.content\r\n\t\t\t\r\n default:\r\n return state\r\n }\r\n}\r\n\r\nexport const interest = (state = '', action) => {\r\n\tswitch(action.type) {\r\n\t\tcase 'ADD_INTEREST':\r\n\t\t\treturn action.interest\r\n\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\nexport const selectedValueDriver = (state = 0, action) => {\r\n\tswitch(action.type) {\r\n\t\tcase 'ADD_SELECTED_VALUEDRIVER':\r\n\t\t\treturn action.id\r\n\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\nexport const goToChoosePath = (state = false, action) => {\r\n\tswitch(action.type) {\r\n\t\tcase 'GO_TO_CHOOSE_PATH':\r\n\t\t\treturn action.payload\r\n\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\n//Start PEs Section\r\nexport const contentPEHasErrored = (state = false, action) => {\r\n\tswitch (action.type) {\t\t\r\n\t\tcase 'CONTENT_PE_HAS_ERRORED':\r\n\t\t\treturn action.hasErrored\r\n\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\nexport const contentPEIsLoading = (state = true, action) => {\r\n\tswitch (action.type) {\r\n\t\tcase 'CONTENT_PE_IS_LOADING':\t\t\t\r\n\t\t\tif(state === false) {\r\n\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\treturn action.isLoading\r\n\t\t\t\t}, 1000)\r\n\t\t\t} else {\r\n\t\t\t\treturn action.isLoading\r\n\t\t\t}\r\n\t\t\treturn state\r\n\t\t\t\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\nexport const contentPE = (state = [], action) => {\r\n switch (action.type) {\r\n case 'CONTENT_PE_FETCH_DATA_SUCCESS':\r\n\t\t\treturn action.contentPE\r\n\t\t\t\r\n default:\r\n return state\r\n }\r\n}\r\n//End PEs Section\r\n\r\n//Start File Upload Section\r\nexport const tableSchemaHasErrored = (state = false, action) => {\r\n\tswitch (action.type) {\t\t\r\n\t\tcase 'TABLE_SCHEMA_HAS_ERRORED':\r\n\t\t\treturn action.hasErrored\r\n\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\nexport const tableSchemaIsLoading = (state = true, action) => {\r\n\tswitch (action.type) {\r\n\t\tcase 'TABLE_SCHEMA_IS_LOADING':\t\t\t\r\n\t\t\tif(state === false) {\r\n\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\treturn action.isLoading\r\n\t\t\t\t}, 1000)\r\n\t\t\t} else {\r\n\t\t\t\treturn action.isLoading\r\n\t\t\t}\r\n\t\t\treturn state\r\n\t\t\t\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\nexport const tableSCHEMA = (state = [], action) => { \r\n switch (action.type) { \r\n case 'TABLE_SCHEMA_FETCH_DATA_SUCCESS':\r\n\t\t\treturn action.tableSCHEMA \r\n\t\t\t\r\n default: \r\n return state\r\n }\r\n}\r\n//End File Upload Section","//import update from 'immutability-helper'\r\n\r\nexport const priorities = (state = [], action) => {\r\n switch (action.type) {\r\n case 'INIT_PRIORITIES_ITEMS':\r\n return action.items\r\n\r\n case 'ADD_PRIORITIES_ITEM':\r\n return [...state, action.item].sort()\r\n\r\n\r\n case 'DELETE_PRIORITIES_ITEM':\r\n let arr = state.filter((i) =>\r\n i !== action.item\r\n ).sort()\r\n\r\n return arr\r\n\r\n default:\r\n return state\r\n }\r\n}\r\n\r\nexport const spendAsPercentageOfRevenue = (state = 0.4411, action) => {\r\n switch (action.type) {\r\n case 'CHANGE_INDUSTRY':\r\n return action.spendAsPercentageOfRevenue\r\n\r\n case 'CHANGE_LOCATION':\r\n return action.spendAsPercentageOfRevenue\r\n default:\r\n return state\r\n }\r\n}\r\n\r\nexport const regions = (state = [], action) => {\r\n\tswitch (action.type) {\r\n\t\tcase 'REGIONS_SUCCESS':\r\n\t\t\treturn action.regions\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\nexport const capIQData = (state = [], action) => {\r\n\tswitch (action.type) {\r\n\t\tcase 'CAPIQ_FETCH_DATA':\r\n\t\t\treturn action.capIQData\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n","import update from 'immutability-helper'\r\n\r\nexport const valueStoryHasErrored = (state = false, action) => {\r\n switch (action.type) {\r\n case 'VALUESTORY_HAS_ERRORED':\r\n return action.hasErrored\r\n\r\n default:\r\n return state\r\n }\r\n}\r\n\r\nexport const valueStoryCurrentMenu = (state = 'Company', action) => {\r\n switch (action.type) {\r\n case 'VALUESTORY_MENU_ITEM':\r\n return action.payload\r\n\r\n default:\r\n return state\r\n }\r\n}\r\n\r\nexport const valueStoryIsLoading = (state = false, action) => {\r\n switch (action.type) {\r\n case 'VALUESTORY_IS_LOADING':\r\n return action.isLoading\r\n\r\n default:\r\n return state\r\n }\r\n}\r\n\r\nexport const valueStory = (state = null, action) => {\r\n\r\n switch (action.type) {\r\n case 'VALUESTORY_FETCH_DATA_SUCCESS':\r\n //return action.payload\r\n return action.valueStory\r\n\r\n case 'VALUESTORY_RESET':\r\n return null\r\n\r\n case 'TOGGLE':\r\n return update(state, {\r\n [action.module]: {\r\n [action.id]: {\r\n [action.stateKey]: { $set: action.selected }\r\n }\r\n }\r\n })\r\n\r\n case 'TOGGLE_VALUEDRIVER':\r\n return update(state, {\r\n [action.module]: {\r\n 0: {\r\n ValueDriver: {\r\n [action.id]: {\r\n [action.stateKey]: { $set: action.selected }\r\n }\r\n }\r\n }\r\n }\r\n })\r\n\r\n case 'TOGGLE_SUBLEVER':\r\n return update(state, {\r\n BusinessValueToYou: {\r\n 0: {\r\n ValueDriver: {\r\n [action.id.BVUIdIndex]: {\r\n SubLever: {\r\n [action.id.BVUSVDIdIndex]: {\r\n Selected: { $set: action.selected }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n })\r\n\r\n case 'UPDATE_VALUESTORYNAME':\r\n return update(state, {\r\n ValueStoryName: { $set: action.valuestoryName }\r\n })\r\n\r\n case 'UPDATE_VALUESTORYTYPE':\r\n return update(state, {\r\n ValueStoryType: { $set: action.valueStoryType }\r\n }) \r\n\r\n case 'UPDATE_CAPIQID':\r\n return update(state, {\r\n CapIQId: { $set: action.capiqid }\r\n })\r\n \r\n case 'UPDATE_ORGANIZATION':\r\n return update(state, {\r\n Organization: { $set: action.organization }\r\n })\r\n\r\n case 'UPDATE_BPID':\r\n return update(state, {\r\n BPId: { $set: action.bpId }\r\n }) \r\n \r\n case 'UPDATE_ANID':\r\n return update(state, {\r\n ANId: { $set: action.anId }\r\n }) \r\n\r\n case 'CHANGE_LOCATION':\r\n return update(state, {\r\n Location: { $set: action.location }\r\n })\r\n\r\n case 'CHANGE_INDIRECTSCOPE':\r\n return update(state, {\r\n IndirectSolutionScope: { $set: action.indirectSolutionScope }\r\n })\r\n\r\n case 'CHANGE_INDUSTRY':\r\n return update(state, {\r\n Industry: { $set: action.industry }\r\n })\r\n\r\n case 'UPDATE_CURRENCY':\r\n return update(state, {\r\n Currency: { $set: action.currency }\r\n })\r\n\r\n case 'UPDATE_CURRENCY_CODE':\r\n return update(state, {\r\n CurrencyCode: { $set: action.currencyCode }\r\n })\r\n\r\n case 'ADD_REVENUE':\r\n return update(state, {\r\n AnnualRevenue: { $set: action.revenue }\r\n })\r\n\r\n case 'UPDATE_TOTAL_SPEND':\r\n return update(state, {\r\n TotalSpend: { $set: action.spend }\r\n })\r\n\r\n\r\n\r\n case 'SET_INCOME_STATEMENT':\r\n return update(state, {\r\n BusinessValueToYou: {\r\n 0: {\r\n IncomeStatement: { $set: action.incomeStatement }\r\n }\r\n }\r\n })\r\n\r\n case 'SET_BALANCE_SHEET':\r\n return update(state, {\r\n BusinessValueToYou: {\r\n 0: {\r\n BalanceSheet: { $set: action.balanceSheet }\r\n }\r\n }\r\n })\r\n\r\n case 'PRIORITY_LEVEL_CHANGE':\r\n return update(state, {\r\n AreaOfInterest: {\r\n [action.id]: {\r\n AOIValueDrivers: {\r\n [action.subIndex]: {\r\n Value: { $set: action.value }\r\n }\r\n }\r\n }\r\n }\r\n })\r\n\r\n case 'UPDATE_SUBLEVER_CALCULATION_USER_INPUT':\r\n return update(state, {\r\n BusinessValueToYou: {\r\n 0: {\r\n ValueDriver: {\r\n [action.BVUIdIndex]: {\r\n SubLever: {\r\n [action.BVUSVDIdIndex]: {\r\n UserInput: {\r\n [action.rowNumber]: {\r\n UserInput: { $set: action.value }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n })\r\n\r\n case 'UPDATE_SUBLEVER_ROW_VALUE':\r\n return update(state, {\r\n BusinessValueToYou: {\r\n 0: {\r\n ValueDriver: {\r\n [action.BVUIdIndex]: {\r\n SubLever: {\r\n [action.BVUSVDIdIndex]: {\r\n UserInput: {\r\n [action.rowNumber]: {\r\n [action.valueType]: { $set: action.value }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n })\r\n\r\n case 'SET_SUBLEVER_ESTIMATED_ANNUAL_VALUE':\r\n return update(state, {\r\n BusinessValueToYou: {\r\n 0: {\r\n ValueDriver: {\r\n [action.BVUIdIndex]: {\r\n SubLever: {\r\n [action.BVUSVDIdIndex]: {\r\n EstAnnualValue: { $set: action.value }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n })\r\n\r\n case 'UPDATE_CALCULATE_ROI_BENEFIT_REALIZATION_FACTOR':\r\n return update(state, {\r\n BusinessValueFromSap: {\r\n 0: {\r\n [action.year]: { $set: action.value }\r\n }\r\n }\r\n })\r\n\r\n case 'UPDATE_CALCULATE_ROI_USER_INPUT':\r\n return update(state, {\r\n BusinessValueFromSap: {\r\n 0: {\r\n ROI: {\r\n [action.row]: {\r\n UserInput: {\r\n 0: {\r\n [action.year]: { $set: action.value }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n })\r\n\r\n case 'UPDATE_CALCULATE_ROI_TOTAL_INVESTMENT':\r\n return update(state, {\r\n BusinessValueFromSap: {\r\n 0: {\r\n ROI: {\r\n 7: {\r\n UserInput: {\r\n 0: {\r\n [action.year]: { $set: action.value }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n })\r\n\r\n case 'UPDATE_CALCULATE_ROI_TOTAL_BENEFIT':\r\n return update(state, {\r\n BusinessValueFromSap: {\r\n 0: {\r\n ROI: {\r\n 4: {\r\n UserInput: {\r\n 0: {\r\n [action.year]: { $set: action.value }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n })\r\n\r\n case 'UPDATE_CALCULATE_ROI_NET_BENEFIT':\r\n return update(state, {\r\n BusinessValueFromSap: {\r\n 0: {\r\n ROI: {\r\n 5: {\r\n UserInput: {\r\n 0: {\r\n [action.year]: { $set: action.value }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n })\r\n\r\n case 'UPDATE_CALCULATE_ROI_CUMULATIVE_BENEFIT':\r\n return update(state, {\r\n BusinessValueFromSap: {\r\n 0: {\r\n ROI: {\r\n 6: {\r\n UserInput: {\r\n 0: {\r\n [action.year]: { $set: action.value }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n })\r\n\r\n case 'UPDATE_ROI_RESULTS':\r\n return update(state, {\r\n BusinessValueFromSap: {\r\n 0: {\r\n [action.module]: { $set: action.value }\r\n }\r\n }\r\n })\r\n\r\n case 'SET_MUTUAL_ACTION_PLAN':\r\n return update(state, {\r\n MutualActionPlan: { $set: action.MutualActionPlan }\r\n })\r\n\r\n case 'SET_TOGGLE_SKU':\r\n return update(\r\n state, {\r\n Sku: { $set: action.id }\r\n }\r\n ) \r\n case 'GET_IS_VALUE_STORY_PAGE':\r\n return { ...state, isLoading: false, isValueStoryPage: action.payload }; \r\n \r\n\r\n default:\r\n return state\r\n } \r\n}\r\n\r\nexport const saveValueStoryOnRedirect = (state = false, action) => {\r\n\tswitch (action.type) {\r\n\t\tcase 'SaveValueStoryOnRedirect-Changes':\r\n\t\t\treturn { ...state, changes: action.payload }\r\n\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n","import {\r\n modelReducer,\r\n formReducer\r\n} from 'react-redux-form'\r\n\r\n// Login Form\r\nconst initialsignInFormState = {\r\n Email: '',\r\n Password: ''\r\n}\r\n\r\nexport const signIn = modelReducer('signIn', initialsignInFormState)\r\nexport const signInForm = formReducer('signIn', initialsignInFormState)\r\n\r\n// Register Form\r\nconst initialRegisterFormState = {\r\n FirstName: '',\r\n LastName: '',\r\n Company: '',\r\n Role: '',\r\n Email: '',\r\n Password: '',\r\n ConfirmPassword: '',\r\n Language: 'EN'\r\n}\r\n\r\nexport const register = modelReducer('register', initialRegisterFormState)\r\nexport const registerForm = formReducer('register', initialRegisterFormState)\r\n\r\n// Value Story Form\r\nconst initialAddValueStoryFormState = {\r\n Id: '',\r\n ValueStoryName: '',\r\n Language: 'EN'\r\n}\r\n\r\nexport const addValueStory = modelReducer('addValueStory', initialAddValueStoryFormState)\r\nexport const addValueStoryForm = formReducer('addValueStory', initialAddValueStoryFormState)\r\n\r\n// Discovery Form\r\nconst initialDiscoveryFormState = {\r\n Id: '',\r\n ValueStoryName: '',\r\n Language: 'EN',\r\n PEId: 0,\r\n Organization: '',\r\n Industry: '',\r\n Location: 0,\r\n AnnualRevenue: '',\r\n TotalSpend: '',\r\n ValueStoryName: '',\r\n CapIQId: '',\r\n GlobalUltimateId: '',\r\n BPId: '',\r\n Currency: '$',\r\n CurrencyCode: 'USD',\r\n CapIQCompany: '',\r\n PECompany: '',\r\n GlobalUltimateCompany: '',\r\n BPCompany: '',\r\n Test: 'false',\r\n AllowEdit: true,\r\n ValueStoryType: '',\r\n transaction_ANsuppliers_automation_eligible: false,\r\n unclassified_automation_eligible: false,\r\n whenDirect_supplier_SCC_eligible: false,\r\n field_glass_scope: false,\r\n fieldglasseligible: false,\r\n}\r\n\r\nexport const discovery = modelReducer('discovery', initialDiscoveryFormState)\r\nexport const discoveryForm = formReducer('discovery', initialDiscoveryFormState)\r\n\r\n// Forgot Password Form\r\nconst initialForgotPasswordFormState = {\r\n Email: '',\r\n Language: 'EN'\r\n}\r\n\r\nexport const forgotPassword = modelReducer('forgotPassword', initialForgotPasswordFormState)\r\nexport const forgotPasswordForm = formReducer('forgotPassword', initialForgotPasswordFormState)\r\n\r\n// User Manager Form\r\nconst initialUserManagerFormState = {\r\n Email: '',\r\n Role: '',\r\n Language: 'EN'\r\n}\r\n\r\nexport const userManager = modelReducer('userManager', initialUserManagerFormState)\r\nexport const userManagerForm = formReducer('userManager', initialUserManagerFormState)\r\n\r\n// User Activation Form\r\nconst initialActivateUserFormState = {\r\n Email: '',\r\n Password: '',\r\n Activated: '',\r\n NewReport: '',\r\n Language: 'EN'\r\n}\r\n\r\nexport const activateUser = modelReducer('activateUser', initialActivateUserFormState)\r\nexport const activateUserForm = formReducer('activateUser', initialActivateUserFormState)\r\n\r\n// Reset Password Form\r\nconst initialResetPasswordFormState = {\r\n Email: '',\r\n Password: '',\r\n ConfirmPassword: '',\r\n Code: ''\r\n}\r\n\r\nexport const resetPassword = modelReducer('resetPassword', initialResetPasswordFormState)\r\nexport const resetPasswordForm = formReducer('resetPassword', initialResetPasswordFormState)\r\n\r\n// Change Password Form\r\nconst initialChangePasswordFormState = {\r\n UserId: '',\r\n OldPassword: '',\r\n NewPassword: '',\r\n ConfirmPassword: ''\r\n}\r\n\r\nexport const changePassword = modelReducer('changePassword', initialChangePasswordFormState)\r\nexport const changePasswordForm = formReducer('changePassword', initialChangePasswordFormState)\r\n\r\n// Save As\r\nconst initialSaveAsState = {\r\n VSId: '',\r\n Id: '',\r\n ValueStoryName: '',\r\n Organization: '',\r\n PEId: 0,\r\n Language: 'EN'\r\n}\r\n\r\nexport const saveAs = modelReducer('saveAs', initialSaveAsState)\r\nexport const saveAsForm = formReducer('saveAs', initialSaveAsState)\r\n\r\n// Mutual Plan\r\nconst initialPlanState = {\r\n MutualActionPlan: ''\r\n}\r\n\r\nexport const plan = modelReducer('plan', initialPlanState)\r\nexport const planForm = formReducer('plan', initialPlanState)\r\n\r\n// Report\r\nconst initialReportState = {\r\n Email: '',\r\n Language: 'EN',\r\n id: ''\r\n}\r\n\r\nexport const report = modelReducer('report', initialReportState)\r\nexport const reportForm = formReducer('report', initialReportState)\r\n\r\n// AllowedListed Domain Form\r\nconst initialAddDomainFormState = {\r\n Id: '',\r\n DomainName: ''\r\n}\r\n\r\nexport const addDomain = modelReducer('addDomain', initialAddDomainFormState)\r\nexport const addDomainForm = formReducer('addDomain', initialAddDomainFormState)\r\n\r\n//Edit AllowedListed Domain Form\r\nconst initialEditDomainFormState = {\r\n\r\n DomainName: '',\r\n Description: ''\r\n}\r\n\r\nexport const editDomain = modelReducer('editDomain', initialEditDomainFormState)\r\nexport const editDomainForm = formReducer('editDomain', initialEditDomainFormState)\r\n// Blocked Domain Form\r\nconst initialAddBlockedDomainFormState = {\r\n Id: '',\r\n DomainName: ''\r\n}\r\n\r\nexport const addBlockedDomain = modelReducer('addBlockedDomain', initialAddBlockedDomainFormState)\r\nexport const addBlockedDomainForm = formReducer('addBlockedDomain', initialAddBlockedDomainFormState)\r\n\r\n//Edit Blockeded Domain Form\r\nconst initialEditBlockedDomainFormState = {\r\n\r\n DomainName: '',\r\n Description: ''\r\n}\r\n\r\nexport const editBlockedDomain = modelReducer('editBlockedDomain', initialEditBlockedDomainFormState)\r\nexport const editBlockedDomainForm = formReducer('editBlockedDomain', initialEditBlockedDomainFormState)\r\n\r\n// BlackListed Domain Form\r\nconst initialAddBlackListDomainFormState = {\r\n Id: '',\r\n DomainName: ''\r\n}\r\n\r\nexport const addBlackListDomain = modelReducer('addBlackListDomain', initialAddBlackListDomainFormState)\r\nexport const addBlackListDomainForm = formReducer('addBlackListDomain', initialAddBlackListDomainFormState)\r\n\r\n//Edit BlackListed Domain Form\r\nconst initialEditBlackListDomainFormState = {\r\n\r\n DomainName: '',\r\n Description: ''\r\n}\r\n\r\nexport const editBlackListDomain = modelReducer('editBlackListDomain', initialEditBlackListDomainFormState)\r\nexport const editBlackListDomainForm = formReducer('editBlackListDomain', initialEditBlackListDomainFormState)\r\n\r\n// Slide Manager Form\r\nconst initialSlideManagerFormState = {\r\n SlideName: '',\r\n SectionName: '',\r\n FileName: '',\r\n Language: 'EN'\r\n}\r\n\r\nexport const slideManager = modelReducer('slideManager', initialSlideManagerFormState)\r\nexport const slideManagerForm = formReducer('slideManager', initialSlideManagerFormState)\r\n\r\n// Section Manager Form\r\nconst initialSectionManagerFormState = {\r\n FileName: '',\r\n SectionName: '',\r\n Description: '',\r\n Lan: '',\r\n Language: 'EN'\r\n}\r\n\r\nexport const sectionManager = modelReducer('sectionManager', initialSectionManagerFormState)\r\nexport const sectionManagerForm = formReducer('sectionManager', initialSectionManagerFormState)\r\n\r\n//Language form\r\nconst initialLanFormState = {\r\n LanguageName: '',\r\n LanguageShortName: ''\r\n}\r\n\r\nexport const lanMgr = modelReducer('lanMgr', initialLanFormState)\r\nexport const lanMgrForm = formReducer('lanMgr', initialLanFormState)\r\n\r\n// Terms and Conditions Form\r\nconst initialTermsFormState = {\r\n UserID: '',\r\n Checked: false,\r\n Language: 'EN'\r\n}\r\n\r\nexport const terms = modelReducer('terms', initialTermsFormState)\r\nexport const termsForm = formReducer('terms', initialTermsFormState)\r\n\r\n// Report Manager Form\r\nconst initialReportManagerFormState = {\r\n ReportName: '',\r\n Description: '',\r\n Layout: '',\r\n Size: '',\r\n Language: 'EN'\r\n}\r\n\r\nexport const reportsManager = modelReducer('reportsManager', initialReportManagerFormState)\r\nexport const reportsManagerForm = formReducer('reportsManager', initialReportManagerFormState)\r\n\r\nconst initialReportLayoutManagerFormState = {\r\n Layout: '',\r\n Size: '',\r\n Language: 'EN'\r\n}\r\n\r\nexport const reportsLayoutManager = modelReducer('reportsLayoutManager', initialReportLayoutManagerFormState)\r\nexport const reportsLayoutManagerForm = formReducer('reportsLayoutManager', initialReportLayoutManagerFormState)\r\n\r\nconst initialReportLayoutSizeManagerFormState = {\r\n Layout: '',\r\n Size: '',\r\n Language: 'EN'\r\n}\r\n\r\nexport const reportsLayoutSizeManager = modelReducer('reportsLayoutSizeManager', initialReportLayoutSizeManagerFormState)\r\nexport const reportsLayoutSizeManagerForm = formReducer('reportsLayoutSizeManager', initialReportLayoutSizeManagerFormState)\r\n\r\nconst initialEditReportFormState = {\r\n\r\n NewReport: '',\r\n Description: ''\r\n}\r\n\r\nexport const editReport = modelReducer('editReport', initialEditReportFormState)\r\nexport const editReportForm = formReducer('editReport', initialEditReportFormState)\r\n\r\n// Release Notification Manager Form\r\nconst initialNotificationManagerFormState = {\r\n ReleaseVersionID: '',\r\n ReleaseFeatureID: '',\r\n ReleaseVersionName: '',\r\n ReleaseFeatureName: '',\r\n ReleaseFeatureDescription: '',\r\n Active: '',\r\n AddedBy: '',\r\n UpdatedBy: ''\r\n}\r\n\r\nexport const notificationManager = modelReducer('notificationManager', initialNotificationManagerFormState)\r\nexport const notificationManagerForm = formReducer('notificationManager', initialNotificationManagerFormState)\r\n\r\n\r\n//Edit Release Notification Manager\r\nconst initialEditReleaseNotificationFormState = {\r\n\r\n ReleaseFeatureName: '',\r\n ReleaseFeatureDescription: ''\r\n}\r\n\r\nexport const editReleaseNotification = modelReducer('editReleaseNotification', initialEditReleaseNotificationFormState)\r\nexport const editReleaseNotificationForm = formReducer('editReleaseNotification', initialEditReleaseNotificationFormState)\r\n\r\n// Value Story Share\r\nconst initialValueStoryShareFormState = {\r\n VSId: '',\r\n SharedWith: '',\r\n SharedBy: '',\r\n Active: null,\r\n AllowEdit: true,\r\n Company: '',\r\n ExpirationDate: '',\r\n EnablementFlag: false\r\n}\r\n\r\nexport const valueStoryShare = modelReducer('valueStoryShare', initialValueStoryShareFormState)\r\nexport const valueStoryShareForm = formReducer('valueStoryShare', initialValueStoryShareFormState)\r\n\r\n// File Upload Manager\r\nconst initialFileUploadManagerFormState = {\r\n TableSchema: '',\r\n FileUploadData: '',\r\n FileUploadName: ''\r\n}\r\n\r\nexport const fileUploadManager = modelReducer('fileUploadManager', initialFileUploadManagerFormState)\r\nexport const fileUploadManagerForm = formReducer('fileUploadManager', initialFileUploadManagerFormState)\r\n\r\n// Role Manager Form\r\nconst initialRoleManagerFormState = {\r\n Role: '',\r\n Features: '',\r\n Language: 'EN'\r\n}\r\n\r\nexport const roleManager = modelReducer('roleManager', initialRoleManagerFormState)\r\nexport const roleManagerForm = formReducer('roleManager', initialRoleManagerFormState)\r\n\r\n// CapIQ Admin screen Form\r\nconst initialCapIqUserManagerFormState = {\r\n Email: ''\r\n}\r\n\r\nexport const capIqUserManager = modelReducer('capIqUserManager', initialCapIqUserManagerFormState)\r\nexport const capIqUserManagerForm = formReducer('capIqUserManager', initialCapIqUserManagerFormState)\r\n\r\n\r\n//Your file from Spend analysis\r\nconst initialYourFileFormState = {\r\n RequestId: '',\r\n Requester: '',\r\n ProcessingDate: ''\r\n\r\n}\r\n\r\nexport const yourFile = modelReducer('yourFile', initialYourFileFormState)\r\nexport const yourFileForm = formReducer('yourFile', initialYourFileFormState)\r\n\r\n// Top Details from Spend Analysis\r\nconst initialTopDetailsFormState = {\r\n Dimension: ''\r\n}\r\n\r\nexport const TopDetails = modelReducer('topDetails', initialTopDetailsFormState)\r\nexport const TopDetailsForm = formReducer('topDetails', initialTopDetailsFormState)\r\n\r\n\r\n// spend parameter form Admin Screen \r\nconst initialSpendParameterFormState = {\r\n ID : 0,\r\n ParameterName :'',\r\n ParameterDescription :'',\r\n ParameterValue :'', \r\n UpdatedBy :'',\r\n UpdatedDate :null \r\n \r\n}\r\n\r\nexport const spendParameter = modelReducer('spendParameter', initialSpendParameterFormState)\r\nexport const spendParameterForm = formReducer('spendParameter', initialSpendParameterFormState)\r\n\r\n// Flight Planning Doc parameter form Admin Screen \r\nconst initialFlightPlanningDocParameterFormState = {\r\n MIN_DOC :'',\r\n MAX_DOC :'',\r\n DOC_SEGMENTATION :'' \r\n}\r\n\r\nexport const flightPlanningDocParameter = modelReducer('flightPlanningDocParameter', initialFlightPlanningDocParameterFormState)\r\nexport const flightPlanningDocParameterForm = formReducer('flightPlanningDocParameter', initialFlightPlanningDocParameterFormState)\r\n\r\n// Flight Planning Spend parameter form Admin Screen \r\nconst initialFlightPlanningSpendParameterFormState = {\r\n MIN_SPEND :'',\r\n MAX_SPEND :'',\r\n SPEND_SEGMENTATION :'' \r\n}\r\n\r\nexport const flightPlanningSpendParameter = modelReducer('flightPlanningSpendParameter', initialFlightPlanningSpendParameterFormState)\r\nexport const flightPlanningSpendParameterForm = formReducer('flightPlanningSpendParameter', initialFlightPlanningSpendParameterFormState)\r\n\r\n// Ariba Network Enablement Match Type parameter form Admin Screen \r\nconst initialNetwrokEnablementMatchTypeParameterFormState = {\r\n MATCH_TYPE :'',\r\n ENABLEMENT_YIELD_PER: ''\r\n}\r\n\r\nexport const netwrokEnablementMatchTypeParameter = modelReducer('netwrokEnablementMatchTypeParameter', initialNetwrokEnablementMatchTypeParameterFormState)\r\nexport const netwrokEnablementMatchTypeParameterForm = formReducer('netwrokEnablementMatchTypeParameter', initialNetwrokEnablementMatchTypeParameterFormState)\r\n\r\nconst initialEnablementResourceParameterFormState = {\r\n RESOURCE_TYPE :'',\r\n ACCOUNT_TYPE:'',\r\n FTES:'',\r\n WAVE_1:'',\r\n WAVE_N:'',\r\n SUPPLIER_WAVE_1:'',\r\n SUPPLIER_WAVE_N:''\r\n}\r\n\r\nexport const enablementResourceParameter = modelReducer('enablementResourceParameter', initialEnablementResourceParameterFormState)\r\nexport const enablementResourceParameterForm = formReducer('enablementResourceParameter', initialEnablementResourceParameterFormState)\r\n\r\n// ANID manager form Admin Screen \r\nconst initialANIDManagerFormState = {\r\n Customer :'',\r\n BPID :'',\r\n ANID :'',\r\n Region: '',\r\n Country: ''\r\n}\r\n\r\nexport const anIdManager = modelReducer('anIdManager', initialANIDManagerFormState)\r\nexport const anIdManagerForm = formReducer('anIdManager', initialANIDManagerFormState)\r\n\r\n\r\n//CollectCustomerSpend Form\r\nconst initialCollectCustomerSpendFormState = {\r\n RequestorName: '',\r\n CustomerEmail: '',\r\n NeedDate: ''\r\n\r\n}\r\n\r\nexport const collectCustomerSpend = modelReducer('collectCustomerSpend', initialCollectCustomerSpendFormState)\r\nexport const collectCustomerSpendForm = formReducer('collectCustomerSpend', initialCollectCustomerSpendFormState)","import {\r\n VALIDATE_EMAIL, VALIDATE_EMAIL_SUCCESS, VALIDATE_EMAIL_FAILURE,\r\n ME_FROM_TOKEN, ME_FROM_TOKEN_SUCCESS, ME_FROM_TOKEN_FAILURE, RESET_TOKEN,\r\n SIGNUP_USER_LOADING, SIGNUP_USER_SUCCESS, SIGNUP_USER_FAILURE, RESET_USER,\r\n SIGNIN_USER_LOADING, SIGNIN_USER_SUCCESS, SIGNIN_USER_FAILURE,\r\n FETCH_TOKEN_LOADING, FETCH_TOKEN_SUCCESS, FETCH_TOKEN_FAILURE,\r\n LOGOUT_USER, FETCH_VALUE_STORIES, FETCH_VALUE_STORIES_LOADING, FETCH_VALUE_STORIES_SUCCESS,\r\n FETCH_VALUE_STORIES_FAILURE, ADD_VALUE_STORY_LOADING, ADD_VALUE_STORY_SUCCESS,\r\n ADD_VALUE_STORY_FAILURE, UPDATE_VALUE_STORY_LOADING, UPDATE_VALUE_STORY_SUCCESS,\r\n UPDATE_VALUE_STORY_FAILURE, OPEN_VALUE_STORY, OPEN_VALUE_STORY_SUCCESS,\r\n OPEN_VALUE_STORY_FAILURE, DELETE_VALUE_STORY_LOADING, DELETE_VALUE_STORY_SUCCESS,\r\n DELETE_VALUE_STORY_FAILURE, FORGOT_PASSWORD_LOADING, FORGOT_PASSWORD_SUCCESS,\r\n FORGOT_PASSWORD_FAILURE, SAVE_AS_LOADING, SAVE_AS_SUCCESS, SAVE_AS_FAILURE,\r\n RESET_PASSWORD_SUCCESS, RESET_PASSWORD_FAILURE, CHANGE_PASSWORD_LOADING,\r\n CHANGE_PASSWORD_SUCCESS, CHANGE_PASSWORD_FAILURE, RESET_ERROR,\r\n VALUE_STORY_IS_SAVING, AUTO_SAVE_SUCCESS, AUTO_SAVE_FAILURE,\r\n REPORT_SUBMIT_LOADING, REPORT_SUBMIT_SUCCESS, REPORT_SUBMIT_FAILURE,\r\n RESET_MESSAGE, UPDATE_LANGUAGE, UPDATE_ONLINE_STATUS, DOMAIN_DETAILS_LOADING,\r\n DOMAIN_DETAILS_SUCCESS, DOMAIN_DETAILS_FAILURE, BLOCKED_DOMAIN_DETAILS_LOADING,\r\n BLOCKED_DOMAIN_DETAILS_SUCCESS, BLOCKED_DOMAIN_DETAILS_FAILURE,\r\n SIGNIN_USER_SUCCESS_SSO,\r\n USER_DETAILS_FAILURE, USER_DETAILS_SUCCESS, USER_DETAILS_LOADING, USER_CONSENT_LOADING, USER_CONSENT_SUCCESS, USER_CONSENT_FAILURE,\r\n NOTIFICATION_MANAGER_LOADING, NOTIFICATION_MANAGER_SUCCESS, NOTIFICATION_MANAGER_FAILURE,\r\n LANGUAGE_TRANSLATION_CONSENT_LOADING,\r\n LANGUAGE_TRANSLATION_CONSENT_SUCCESS,\r\n SHARE_VALUESTORY_LOADING, SHARE_VALUESTORY_SUCCESS, SHARE_VALUESTORY_FAILURE,\r\n UPLOAD_FILE_LOADING, UPLOAD_FILE_SUCCESS, UPLOAD_FILE_FAILURE, BENCHMARK_LOADING, BENCHMARK_SUCCESS,\r\n BENCHMARK_FAILURE, REQUEST_VALUESTORY_LOADING, REQUEST_VALUESTORY_SUCCESS, REQUEST_VALUESTORY_FAILURE, FETCH_USER_PROFILE_LOADING,\r\n FETCH_USER_PROFILE_SUCCESS, FETCH_USER_PROFILE_FAILURE, REPORT_BUG_LOADING, REPORT_BUG_SUCCESS, REPORT_BUG_FAILURE, FETCH_USER_PROFILE_ROLES,\r\n FETCH_USER_MASK_LOADING, FETCH_USER_MASK_SUCCESS, FETCH_USER_MASK_FAILURE, FETCH_USER_DETAILS_SUCCESS, GENERIC_PENDING_CHANGES,\r\n NEWSLETTER_ACCEPTANCE_LOADING, NEWSLETTER_ACCEPTANCE_SUCCESS, NEWSLETTER_ACCEPTANCE_FAILURE, SHAREFILESONJUMPHOST_LOADING, SHAREFILESONJUMPHOST_SUCCESS, SHAREFILESONJUMPHOST_FAILURE\r\n} from 'actions/userActions';\r\n\r\nimport {\r\n LANGUAGE_MANAGER_FAILURE\r\n} from 'actions/nodeActions';\r\n//user = userobj, \r\n// status can be: \r\n// 1. 'storage' ie. localstorage / sessionstorage)\r\n// 2. 'signup' (signing up) \r\n// 3. 'signin' (signing in)\r\n// 4. 'validate'(validate fields)\r\n// 5. 'validate_email' (validating email token)\r\n// 5. 'authenticated'(after signin) \r\n// 6. 'logout' (after logout)\r\n\r\nconst INITIAL_STATE = { user: null, valueStories: [], valueStoryListLoading: false, valueStory: null, status: null, error: null, loading: false, message: '', online: null };\r\n\r\nexport default function (state = INITIAL_STATE, action) {\r\n let error, status, message\r\n switch (action.type) {\r\n\r\n case VALIDATE_EMAIL://check email verification token\r\n return { ...state, user: null, status: 'validate_email', error: null, loading: true };\r\n case VALIDATE_EMAIL_SUCCESS:\r\n return { ...state, user: action.payload.data.user, status: 'authenticated', error: null, loading: false }; //<-- authenticated & email verified\r\n case VALIDATE_EMAIL_FAILURE:\r\n error = action.payload.data || { message: action.payload.message };//2nd one is network or server down errors \r\n return { ...state, user: null, status: 'validate_email', error: error, loading: false }; //<-- authenticated\r\n\r\n case ME_FROM_TOKEN:// loading currentUser(\"me\") from jwttoken in local/session storage storage,\r\n return { ...state, user: null, status: 'storage', error: null, loading: true };\r\n case ME_FROM_TOKEN_SUCCESS://return user, status = authenticated and make loading = false\r\n return { ...state, user: action.payload.data.user, status: 'authenticated', error: null, loading: false }; //<-- authenticated\r\n case ME_FROM_TOKEN_FAILURE:// return error and make loading = false\r\n error = action.payload.data || { message: action.payload.message };//2nd one is network or server down errors \r\n return { ...state, user: null, status: 'storage', error: error, loading: false };\r\n case RESET_TOKEN:// remove token from storage make loading = false\r\n localStorage.removeItem('jwtToken')\r\n return { ...state, user: null, status: 'storage', error: null, loading: false };\r\n\r\n case SIGNUP_USER_LOADING:// sign up user, set loading = true and status = signup\r\n return { ...state, user: null, status: 'signup', error: null, loading: true };\r\n case SIGNUP_USER_SUCCESS://return user, status = authenticated and make loading = false\r\n return { ...state, user: action.payload, status: 'authenticated', error: null, loading: false }; //<-- authenticated\r\n case SIGNUP_USER_FAILURE:// return error and make loading = false\r\n error = action.payload //|| {message: action.payload.message};//2nd one is network or server down errors \r\n return { ...state, user: null, status: 'signup', error: error, loading: false };\r\n\r\n\r\n case SIGNIN_USER_LOADING:// sign in user, set loading = true and status = signin\r\n return { ...state, user: null, status: 'signin', error: null, loading: true };\r\n case SIGNIN_USER_SUCCESS://return authenticated user, make loading = false and status = authenticated\r\n return { ...state, user: action.payload.data.Result.applicationUser === undefined ? action.payload.data.Result : action.payload.data.Result.applicationUser, status: 'authenticated', error: null, loading: false }; //<-- authenticated\r\n case SIGNIN_USER_SUCCESS_SSO://return authenticated user, make loading = false and status = authenticated\r\n return { ...state, user: action.payload.data.Result, status: 'authenticated', error: null, loading: false }; //<-- authenticated\r\n case SIGNIN_USER_FAILURE:// return error and make loading = false\r\n error = action.payload //|| {message: action.payload.message};//2nd one is network or server down errors \r\n return { ...state, user: null, status: 'signin', error: error, loading: false };\r\n\r\n case FETCH_TOKEN_LOADING:// sign in user, set loading = true and status = signin\r\n return { ...state, error: null, loading: true };\r\n case FETCH_TOKEN_SUCCESS://return authenticated user, make loading = false and status = authenticated\r\n return { ...state, token: action.payload.data.Result, loading: false }; //<-- authenticated\r\n case FETCH_TOKEN_FAILURE:// return error and make loading = false\r\n error = action.payload //|| {message: action.payload.message};//2nd one is network or server down errors \r\n return { ...state, error: error, loading: false };\r\n\r\n\r\n case LOGOUT_USER:\r\n return { ...state, user: null, status: 'logout', error: null, loading: false };\r\n\r\n case RESET_USER:// reset authenticated user to initial state\r\n return { ...state, user: null, status: null, error: null, loading: false };\r\n\r\n\r\n case FETCH_VALUE_STORIES:\r\n return { ...state, valueStories: action, status: 'fetch_value_stories', loading: true };\r\n\r\n case FETCH_VALUE_STORIES_LOADING:\r\n return { ...state, status: 'fetch_value_stories_loading', valueStoryListLoading: action.payload, loading: true };\r\n\r\n case FETCH_VALUE_STORIES_SUCCESS:\r\n return { ...state, valueStories: action.payload.data.Result, status: 'fetch_value_stories_success', loading: false };\r\n\r\n case FETCH_VALUE_STORIES_FAILURE:\r\n return { ...state, valueStories: action, error: action.payload, loading: false, valueStoryListLoading: false };\r\n\r\n\r\n case ADD_VALUE_STORY_LOADING:\r\n return { ...state, error: null, loading: true };\r\n case ADD_VALUE_STORY_SUCCESS:\r\n return { ...state, error: null, loading: false };\r\n case ADD_VALUE_STORY_FAILURE:\r\n error = action.payload // || {message: action.payload.message};\r\n return { ...state, error: error, loading: false };\r\n\r\n case UPDATE_VALUE_STORY_LOADING:\r\n return { ...state, error: null, loading: true };\r\n case UPDATE_VALUE_STORY_SUCCESS:\r\n return { ...state, error: null, loading: false };\r\n case UPDATE_VALUE_STORY_FAILURE:\r\n error = action.payload // || {message: action.payload.message};\r\n return { ...state, error: error, loading: false };\r\n\r\n case OPEN_VALUE_STORY:\r\n return { ...state, valueStory: action, error: null, loading: true };\r\n\r\n case OPEN_VALUE_STORY_SUCCESS:\r\n return { ...state, valueStory: action.payload.data, status: 'open_value_story_success', error: null, loading: false };\r\n\r\n case OPEN_VALUE_STORY_FAILURE:\r\n error = action.payload\r\n return { ...state, error: error, loading: false };\r\n\r\n case DELETE_VALUE_STORY_LOADING:\r\n return { ...state, error: null, loading: true };\r\n case DELETE_VALUE_STORY_SUCCESS:\r\n error = action.payload\r\n return { ...state, error: error, loading: false };\r\n case DELETE_VALUE_STORY_FAILURE:\r\n error = action.payload\r\n return { ...state, error: error, loading: false };\r\n\r\n //Report bug \r\n case REPORT_BUG_LOADING:\r\n return { ...state, error: null, loading: true };\r\n case REPORT_BUG_SUCCESS:\r\n error = action.payload\r\n return { ...state, error: error, loading: false };\r\n case REPORT_BUG_FAILURE:\r\n error = action.payload\r\n return { ...state, error: error, loading: false };\r\n\r\n //Share Files\r\n case SHAREFILESONJUMPHOST_LOADING:\r\n return { ...state, error: null, loading: true };\r\n case SHAREFILESONJUMPHOST_SUCCESS:\r\n error = action.payload\r\n return { ...state, error: null, loading: false };\r\n case SHAREFILESONJUMPHOST_FAILURE:\r\n error = action.payload\r\n return { ...state, error: error, loading: false };\r\n\r\n case SAVE_AS_LOADING:\r\n return { ...state, error: null, loading: true };\r\n case SAVE_AS_SUCCESS:\r\n return { ...state, error: null, loading: false };\r\n case SAVE_AS_FAILURE:\r\n error = action.payload\r\n return { ...state, error: error, loading: false };\r\n\r\n\r\n case FORGOT_PASSWORD_LOADING:\r\n return { ...state, error: null, loading: true };\r\n case FORGOT_PASSWORD_SUCCESS:\r\n return { ...state, error: action.payload, loading: false };\r\n case FORGOT_PASSWORD_FAILURE:\r\n error = action.payload || { message: action.payload.message };\r\n return { ...state, error: error, loading: false };\r\n\r\n\r\n case CHANGE_PASSWORD_LOADING:\r\n return { ...state, error: null, loading: true };\r\n case CHANGE_PASSWORD_SUCCESS:\r\n return { ...state, error: null, loading: false };\r\n case CHANGE_PASSWORD_FAILURE:\r\n error = action.payload //|| {message: action.payload.message};\r\n return { ...state, error: error, loading: false };\r\n\r\n\r\n case RESET_PASSWORD_SUCCESS:\r\n return { ...state, error: null, status: 'password_reset', loading: false, message: action.payload };\r\n case RESET_PASSWORD_FAILURE:\r\n error = action.payload //|| {message: action.payload.message};\r\n return { ...state, error: error, loading: false };\r\n\r\n\r\n case VALUE_STORY_IS_SAVING:\r\n return { ...state, status: 'auto_save' };\r\n case AUTO_SAVE_SUCCESS:\r\n return { ...state, status: null };\r\n case AUTO_SAVE_FAILURE:\r\n error = action.payload //|| {message: action.payload.message};\r\n return { ...state, error: error, status: 'auto_save_error' };\r\n\r\n\r\n case UPDATE_ONLINE_STATUS:\r\n status = action.payload //|| {message: action.payload.message};\r\n return { ...state, online: status };\r\n\r\n\r\n case REPORT_SUBMIT_LOADING:\r\n return { ...state, error: null, loading: true };\r\n case REPORT_SUBMIT_SUCCESS:\r\n return { ...state, error: null, loading: false, message: action.payload };\r\n case REPORT_SUBMIT_FAILURE:\r\n error = action.payload //|| {message: action.payload.message};\r\n return { ...state, error: error, loading: false };\r\n\r\n\r\n case RESET_ERROR:\r\n return { ...state, error: null, status: null }\r\n\r\n case RESET_MESSAGE:\r\n return { ...state, status: null, message: null }\r\n\r\n case DOMAIN_DETAILS_LOADING:\r\n return { ...state, error: null, loading: true };\r\n case DOMAIN_DETAILS_SUCCESS:\r\n let msg_1 = action.payload\r\n return { ...state, error: null, loading: false, message: msg_1 };\r\n case DOMAIN_DETAILS_FAILURE:\r\n error = action.payload || { message: action.payload.message };\r\n return { ...state, error: error, loading: false };\r\n\r\n case BLOCKED_DOMAIN_DETAILS_LOADING:\r\n return { ...state, error: null, loading: true };\r\n case BLOCKED_DOMAIN_DETAILS_SUCCESS:\r\n return { ...state, error: null, loading: false, message: action.payload };\r\n case BLOCKED_DOMAIN_DETAILS_FAILURE:\r\n error = action.payload || { message: action.payload.message };\r\n return { ...state, error: error, loading: false };\r\n\r\n case LANGUAGE_MANAGER_FAILURE:\r\n error = action.payload || { message: action.payload.message };\r\n return { ...state, error: error, loading: false };\r\n\r\n case USER_DETAILS_LOADING:\r\n return { ...state, error: null, loading: action.payload };\r\n case USER_DETAILS_SUCCESS:\r\n let msg = action.payload //|| {msg: action.payload.message};\r\n return { ...state, error: null, loading: false, message: msg };\r\n case USER_DETAILS_FAILURE:\r\n error = action.payload || { message: action.payload.message };\r\n return { ...state, error: action.payload, loading: false };\r\n\r\n case USER_CONSENT_LOADING:\r\n return { ...state, error: null, loading: action.payload };\r\n case USER_CONSENT_SUCCESS:\r\n return { ...state, error: null, loading: false, message: action.payload };\r\n case USER_CONSENT_FAILURE:\r\n return { ...state, error: action.payload, loading: false };\r\n case NOTIFICATION_MANAGER_LOADING:\r\n return { ...state, error: null, loading: action.payload };\r\n case NOTIFICATION_MANAGER_SUCCESS:\r\n let msgn = action.payload //|| {msg: action.payload.message};\r\n return { ...state, error: null, loading: false, message: msgn };\r\n case NOTIFICATION_MANAGER_FAILURE:\r\n error = action.payload || { message: action.payload.message };\r\n return { ...state, error: action.payload, loading: false };\r\n case LANGUAGE_TRANSLATION_CONSENT_LOADING:\r\n return { ...state, loading: action.payload };\r\n // case LANGUAGE_TRANSLATION_CONSENT_SUCCESS:\r\n // return { ...state, loading: false };\r\n\r\n case SHARE_VALUESTORY_LOADING:\r\n return { ...state, error: null, loading: true };\r\n case SHARE_VALUESTORY_SUCCESS:\r\n return { ...state, error: null, loading: false };\r\n case SHARE_VALUESTORY_FAILURE:\r\n error = action.payload\r\n return { ...state, error: error, loading: false };\r\n\r\n case UPLOAD_FILE_LOADING:\r\n return { ...state, error: null, loading: action.payload };\r\n case UPLOAD_FILE_SUCCESS:\r\n return { ...state, error: action.payload, loading: false };\r\n case UPLOAD_FILE_FAILURE:\r\n return { ...state, error: action.payload, loading: false };\r\n case BENCHMARK_LOADING:\r\n return { ...state, error: null, loading: true };\r\n case BENCHMARK_SUCCESS:\r\n return { ...state, error: null, loading: false };\r\n case BENCHMARK_FAILURE:\r\n error = action.payload\r\n return { ...state, error: error, loading: false };\r\n\r\n case REQUEST_VALUESTORY_LOADING:\r\n return { ...state, error: null, loading: true };\r\n case REQUEST_VALUESTORY_SUCCESS:\r\n return { ...state, error: null, loading: false };\r\n case REQUEST_VALUESTORY_FAILURE:\r\n error = action.payload\r\n return { ...state, error: error, loading: false };\r\n\r\n case FETCH_USER_PROFILE_LOADING:\r\n return { ...state, error: null, loading: true };\r\n case FETCH_USER_PROFILE_SUCCESS:\r\n return { ...state, error: null, loading: false };\r\n case FETCH_USER_PROFILE_FAILURE:\r\n error = action.payload\r\n return { ...state, error: error, loading: false };\r\n case FETCH_USER_PROFILE_ROLES:\r\n return { ...state, userprofile: action.payload.Result != undefined ? action.payload.Result : '', error: null, loading: false };\r\n case GENERIC_PENDING_CHANGES:\r\n return { ...state, changes: action.payload }\r\n case FETCH_USER_MASK_LOADING:\r\n return { ...state, error: null, loading: true };\r\n case FETCH_USER_MASK_SUCCESS:\r\n return { ...state, error: action.payload, loading: false };\r\n case FETCH_USER_MASK_FAILURE:\r\n error = action.payload\r\n return { ...state, error: error, loading: false };\r\n\r\n case GENERIC_PENDING_CHANGES:\r\n return { ...state, changes: action.payload }\r\n\r\n case FETCH_USER_DETAILS_SUCCESS:\r\n return { ...state, user: action.payload, status: 'authenticated', error: null, loading: false };\r\n\r\n case NEWSLETTER_ACCEPTANCE_LOADING:\r\n return { ...state, error: null, loading: action.payload };\r\n case NEWSLETTER_ACCEPTANCE_SUCCESS:\r\n return { ...state, error: null, loading: false, message: action.payload };\r\n case NEWSLETTER_ACCEPTANCE_FAILURE:\r\n return { ...state, error: action.payload, loading: false };\r\n\r\n default:\r\n return state;\r\n }\r\n}\r\n\r\nexport const language = (state = 'EN', action) => {\r\n if (action.type === UPDATE_LANGUAGE) {\r\n return action.lang\r\n } else {\r\n return state;\r\n }\r\n}\r\n\r\nexport const showValueStoryMenu = (state = false, action) => {\r\n switch (action.type) {\r\n case 'SHOW_VALUE_STORY_MENU':\r\n return action.payload\r\n\r\n default:\r\n return state\r\n }\r\n}\r\n\r\nexport const syncMenuAndButton = (state = false, action) => {\r\n switch (action.type) {\r\n case 'SYNC_MENU_AND_BUTTON':\r\n return action.payload\r\n\r\n default:\r\n return state\r\n }\r\n}\r\n\r\nexport const setTabMenu = (state = false, action) => {\r\n switch (action.type) {\r\n case 'setTabMenu':\r\n return action.payload\r\n\r\n default:\r\n return state\r\n }\r\n}\r\n\r\nexport const setSubTabMenu = (state = false, action) => {\r\n switch (action.type) {\r\n case 'setSubTabMenu':\r\n return action.payload\r\n\r\n default:\r\n return state\r\n }\r\n}","import {\r\n\tUSER_MANAGER_LOADING, USER_MANAGER_SUCCESS,\r\n\tUSER_MANAGER_FAILURE, RESET_ERROR, ROLE_MANAGER_LOADING, ROLE_MANAGER_SUCCESS,\r\n\tROLE_MANAGER_FAILURE\r\n} from 'actions/roleAndPermissionAction';\r\n\r\n\r\n\r\nconst INITIAL = { isLoading: false, error: null, message: null }\r\nexport const userManagerUpdates = (state = INITIAL, action) => {\r\n\tswitch (action.type) {\r\n\t\tcase USER_MANAGER_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.isLoading }\r\n\t\tcase USER_MANAGER_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload };\r\n\t\tcase USER_MANAGER_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\r\n\t\tcase ROLE_MANAGER_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.isLoading }\r\n\t\tcase ROLE_MANAGER_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload };\r\n\t\tcase ROLE_MANAGER_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\r\n\t\tcase RESET_ERROR:\r\n\t\t\treturn { ...state, isLoading: false, error: null, message: null }\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n ","import {\r\n\tTOP_DETAILS_LOADING, TOP_DETAILS_SUCCESS,\r\n\tTOP_DETAILS_FAILURE, RESET_ERROR, GET_YOURFILE_DETAILS_LOADING,\r\n\tGET_YOURFILE_DETAILS_SUCCESS, GET_YOURFILE_DETAILS_FAILURE, DEFINESCOPE_FAILURE,\r\n\tDEFINESCOPE_LOADING, DEFINESCOPE_SUCCESS, GET_RESULT_LOADING, GET_RESULT_SUCCESS, GET_RESULT_FAILURE, SET_POPUP_TAB_LOADING_STATUS, CURRENT_ACTIVE_REQUEST,\r\n\tGET_ALLINDUSTRIES_LOADING, GET_ALLINDUSTRIES_SUCCESS, GET_ALLINDUSTRIESTREESTRUCTURE_SUCCESS,\r\n\tGET_ALLINDUSTRIES_FAILURE, STORE_OVERRIDED_INDUSTRY, STORE_ENABLEMENT_WAVE_VALUE, SET_SEARCHCLEAR_FLAG, SCOPESUMMARY_SUCCESS, SCOPESUMMARY_LOADING,\r\n\tSCOPESUMMARY_FAILURE, SCOPESUMMARYBUYPROCESS_SUCCESS, SCOPESUMMARYBUYPROCESS_LOADING, SCOPESUMMARYBUYPROCESS_FAILURE\r\n\t, ENABLEMENT_SUCCESS, ENABLEMENT_LOADING, ENABLEMENT_FAILURE,\r\n\tGET_YOURFILE_REQUESTDETAILS, GET_YOURFILE_VALUESTORYREQUESTDETAILS,\r\n\tGET_RESULTSUMMARY_DETAILS, GET_TOP_DETAILS, GET_INPUTANDCLASSIFICATION_LOADING, GET_INPUTANDCLASSIFICATION_SUCCESS, GET_INPUTANDCLASSIFICATION_FAILURE,\r\n\tGET_SPCAPITALIQ_SUCCESS, GET_SPCAPITALIQ_FAILURE, GET_SPCAPITALIQ_LOADING,\r\n\tGET_SPCAPITALIQULTIMATEPARENT_LOADING, GET_SPCAPITALIQULTIMATEPARENT_SUCCESS, GET_SPCAPITALIQULTIMATEPARENT_FAILURE, STORE_SUPPLIER_SKEY, STORE_GICS_ID, STORE_INDUSTRY_DETAILS,\r\n\tGET_SUPPLIERDRILLSCOPE_LOADING, GET_SUPPLIERDRILLSCOPE_SUCCESS, GET_SUPPLIERDRILLSCOPE_FAILURE, STORE_VENDOR_DETAILS,\r\n\tSTORE_INDUSTRY_ID, TRACK_SUPPLIERDRILLDOWN_PENDING_CHANGES, TRACK_SUPPLIERDRILLDOWN_SAVE_CHANGES,\r\n\tGET_SUPPLIERDRILLDOWNUPDATED_FAILURE, GET_SUPPLIERDRILLDOWNUPDATED_SUCCESS, GET_SUPPLIERDRILLDOWNUPDATED_LOADING, GET_INDUSTRYDRILLSCOPE_LOADING, GET_INDUSTRYDRILLSCOPE_SUCCESS, GET_INDUSTRYDRILLSCOPE_FAILURE,\r\n\tINDUSTRYDRILLSCOPEUPDATE_FAILURE, INDUSTRYDRILLSCOPEUPDATE_LOADING, INDUSTRYDRILLSCOPEUPDATE_SUCCESS,\r\n\tGET_INDUSTRYSPEND_LOADING, GET_INDUSTRYSPEND_SUCCESS, GET_INDUSTRYSPEND_FAILURE, GET_MAPPEDCOLUMN, GET_INDUSTRYSPENDUPDATED_FAILURE, GET_INDUSTRYSPENDUPDATED_SUCCESS, GET_INDUSTRYSPENDUPDATED_LOADING,\r\n\tTRACK_INDUSTRYDRILLSCOPE_PENDING_CHANGES, INDUSTRYSUPPLIER_LOADING, INDUSTRYSUPPLIER_SUCCESS, INDUSTRYSUPPLIER_FAILURE,\r\n\tGET_INDUSTRYCAPIQ_LOADING, GET_INDUSTRYCAPIQ_SUCCESS, TRACK_USER_SPEND_SELECTIONS, CLEAR_CURRENT_ACTIVE_REQUEST, GET_CAPIQDATA_BLANK, STORE_INPUTANDCLASSIFICATION_DETAILS, STORE_OVERRIDED_CAPIQID,\r\n\tENABLEMENTINSIGHT_FAILURE, ENABLEMENTINSIGHT_LOADING, ENABLEMENTINSIGHT_SUCCESS, STORE_ENABLEMENTINSIGHT_FILTER, REDIRECT_FROM_ENABLEMENT_TAB, REDIRECT_FROM_WIZARD,\r\n\tGET_ALLINDUSTRIES_GICS_LOADING, GET_ALLINDUSTRIES_GICS_SUCCESS, GET_ALLINDUSTRIES_GICS_FAILURE, GET_UPDATE_GICS_LOADING, GET_UPDATE_GICS_SUCCESS,\r\n\tGET_UPDATE_GICS_FAILURE, USER_DETAILS_FAILURE, USER_DETAILS_SUCCESS, USER_DETAILS_LOADING\r\n} from 'actions/spendActions';\r\n\r\nexport const INITIAL = { valueStoryRequestDetails: [], requestFileDetails: [], isLoading: false, error: null, message: null, currentActiveRequest: '', filter: {}, changes: null, resultDetails: [], resultTopDetails: [], mappedColumn: [], isBlank: false, isRedirected: false, solutionScope: 'Buying and Invoicing' }\r\n\r\nexport const spendDetails = (state = INITIAL, action) => {\r\n\tswitch (action.type) {\r\n\t\tcase TOP_DETAILS_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload }\r\n\t\tcase TOP_DETAILS_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload, error: '' };\r\n\t\tcase TOP_DETAILS_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\t\tcase GET_TOP_DETAILS:\r\n\t\t\treturn { ...state, resultTopDetails: action.payload }\r\n\r\n\t\tcase GET_YOURFILE_DETAILS_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase GET_YOURFILE_DETAILS_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload };\r\n\t\tcase GET_YOURFILE_DETAILS_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\t\tcase GET_YOURFILE_REQUESTDETAILS:\r\n\t\t\treturn { ...state, requestFileDetails: action.payload };\r\n\t\tcase GET_YOURFILE_VALUESTORYREQUESTDETAILS:\r\n\t\t\treturn { ...state, valueStoryRequestDetails: action.payload };\r\n\r\n\t\tcase GET_MAPPEDCOLUMN:\r\n\t\t\treturn { ...state, mappedColumn: action.payload };\r\n\r\n\t\tcase GET_RESULT_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase GET_RESULT_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload };\r\n\t\tcase GET_RESULT_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\r\n\t\tcase SET_POPUP_TAB_LOADING_STATUS:\r\n\t\t\treturn { ...state, isPopUpTabLoading: action.payload };\r\n\r\n\t\tcase GET_RESULTSUMMARY_DETAILS:\r\n\t\t\treturn { ...state, resultDetails: action.payload }\r\n\r\n\t\tcase DEFINESCOPE_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase DEFINESCOPE_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload };\r\n\t\tcase DEFINESCOPE_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\r\n\r\n\t\tcase RESET_ERROR:\r\n\t\t\treturn { ...state, isLoading: false, error: null, message: null }\r\n\r\n\t\tcase CURRENT_ACTIVE_REQUEST:\r\n\t\t\treturn { ...state, currentActiveRequest: action.payload }\r\n\r\n\t\tcase CLEAR_CURRENT_ACTIVE_REQUEST:\r\n\t\t\treturn { ...state, currentActiveRequest: '' }\r\n\r\n\t\tcase GET_ALLINDUSTRIES_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload }\r\n\t\tcase GET_ALLINDUSTRIES_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, industryCache: action.payload };\r\n\t\tcase GET_ALLINDUSTRIES_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\t\tcase GET_ALLINDUSTRIESTREESTRUCTURE_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, industryTree: action.payload };\r\n\t\tcase STORE_OVERRIDED_INDUSTRY:\r\n\t\t\treturn { ...state, overridedIndustryDetails: action.payload };\r\n\t\tcase STORE_ENABLEMENT_WAVE_VALUE:\r\n\t\t\treturn { ...state, enablementWaveInputDetails: action.payload };\r\n\t\tcase STORE_OVERRIDED_CAPIQID:\r\n\t\t\treturn { ...state, overridedCapIqIdDetails: action.payload };\r\n\t\tcase SET_SEARCHCLEAR_FLAG:\r\n\t\t\treturn { ...state, isLoading: false, isSearchORClearIndustry: action.payload };\r\n\r\n\t\tcase SCOPESUMMARY_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase SCOPESUMMARY_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload };\r\n\t\tcase SCOPESUMMARY_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\r\n\t\tcase SCOPESUMMARYBUYPROCESS_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase SCOPESUMMARYBUYPROCESS_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload };\r\n\t\tcase SCOPESUMMARYBUYPROCESS_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\r\n\t\tcase ENABLEMENT_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase ENABLEMENT_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload };\r\n\t\tcase ENABLEMENT_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\t\tcase STORE_ENABLEMENTINSIGHT_FILTER:\r\n\t\t\treturn { ...state, enablementInsightFilters: action.payload };\r\n\r\n\t\tcase STORE_SUPPLIER_SKEY:\r\n\t\t\treturn { ...state, isLoading: false, supplierDetails: action.payload };\r\n\t\tcase STORE_VENDOR_DETAILS:\r\n\t\t\treturn { ...state, isLoading: false, vendorDetails: action.payload };\r\n\t\tcase STORE_INDUSTRY_ID:\r\n\t\t\treturn { ...state, isLoading: false, L5IndustryID: action.payload };\r\n\t\tcase STORE_INPUTANDCLASSIFICATION_DETAILS:\r\n\t\t\treturn { ...state, isLoading: false, inputAndClassificationDetails: action.payload };\r\n\t\tcase GET_INPUTANDCLASSIFICATION_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase GET_INPUTANDCLASSIFICATION_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, classificationData: action.payload };\r\n\t\tcase GET_INPUTANDCLASSIFICATION_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\r\n\t\tcase GET_CAPIQDATA_BLANK:\r\n\t\t\treturn { ...state, isBlank: action.payload };\r\n\t\tcase GET_SPCAPITALIQ_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase GET_SPCAPITALIQ_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, SPCapitalIQData: action.payload };\r\n\t\tcase GET_SPCAPITALIQ_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\r\n\t\tcase GET_SPCAPITALIQULTIMATEPARENT_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase GET_SPCAPITALIQULTIMATEPARENT_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, SPCapitalIQUltimateParentData: action.payload };\r\n\t\tcase GET_SPCAPITALIQULTIMATEPARENT_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\r\n\t\tcase GET_SUPPLIERDRILLSCOPE_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase GET_SUPPLIERDRILLSCOPE_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, supplierDrillScopeData: action.payload };\r\n\t\tcase GET_SUPPLIERDRILLSCOPE_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\t\tcase TRACK_SUPPLIERDRILLDOWN_PENDING_CHANGES:\r\n\t\t\treturn { ...state, isLoading: false, supplierDrilldownPendingChanges: action.payload };\r\n\t\tcase TRACK_SUPPLIERDRILLDOWN_SAVE_CHANGES:\r\n\t\t\treturn { ...state, isLoading: false, supplierDrilldownSavedChanges: action.payload };\r\n\t\tcase GET_SUPPLIERDRILLDOWNUPDATED_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase GET_SUPPLIERDRILLDOWNUPDATED_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload };\r\n\t\tcase GET_SUPPLIERDRILLDOWNUPDATED_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\t\tcase GET_INDUSTRYSPEND_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase GET_INDUSTRYSPEND_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload };\r\n\t\tcase GET_INDUSTRYSPEND_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\r\n\t\tcase GET_INDUSTRYDRILLSCOPE_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase GET_INDUSTRYDRILLSCOPE_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, industryDrillScopeDetails: action.payload };\r\n\t\tcase GET_INDUSTRYDRILLSCOPE_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\r\n\t\tcase STORE_GICS_ID:\r\n\t\t\treturn { ...state, isLoading: false, industryGICS_Details: action.payload };\r\n\t\tcase STORE_INDUSTRY_DETAILS:\r\n\t\t\treturn { ...state, isLoading: false, industryDetails: action.payload };\r\n\r\n\t\tcase GET_INDUSTRYSPENDUPDATED_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase GET_INDUSTRYSPENDUPDATED_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload };\r\n\t\tcase GET_INDUSTRYSPENDUPDATED_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\r\n\t\tcase INDUSTRYDRILLSCOPEUPDATE_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase INDUSTRYDRILLSCOPEUPDATE_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload };\r\n\t\tcase INDUSTRYDRILLSCOPEUPDATE_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\r\n\t\tcase TRACK_INDUSTRYDRILLSCOPE_PENDING_CHANGES:\r\n\t\t\treturn { ...state, isLoading: false, industryDrillScopePendingChanges: action.payload };\r\n\r\n\t\tcase INDUSTRYSUPPLIER_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase INDUSTRYSUPPLIER_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload };\r\n\t\tcase INDUSTRYSUPPLIER_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\t\tcase GET_INDUSTRYCAPIQ_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload };\r\n\t\tcase GET_INDUSTRYCAPIQ_LOADING:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\t\tcase TRACK_USER_SPEND_SELECTIONS:\r\n\t\t\treturn { ...state, isLoading: false, userSpendFilterSelections: action.payload };\r\n\r\n\t\tcase ENABLEMENTINSIGHT_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase ENABLEMENTINSIGHT_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload };\r\n\t\tcase ENABLEMENTINSIGHT_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\r\n\t\tcase USER_DETAILS_LOADING:\r\n\t\t\treturn { ...state, error: null, loading: action.payload };\r\n\t\tcase USER_DETAILS_SUCCESS:\r\n\t\t\tlet msg = action.payload //|| {msg: action.payload.message};\r\n\t\t\treturn { ...state, error: null, loading: false, message: msg };\r\n\t\tcase USER_DETAILS_FAILURE:\r\n\t\t\tlet error = action.payload || { message: action.payload.message };\r\n\t\t\treturn { ...state, error: action.payload, loading: false };\r\n\r\n\t\tcase REDIRECT_FROM_ENABLEMENT_TAB:\r\n\t\t\treturn { ...state, isLoading: false, isRedirected: action.payload };\r\n\t\tcase REDIRECT_FROM_WIZARD:\r\n\t\t\treturn { ...state, isLoading: false, redirectedFromWizard: action.payload };\r\n\r\n\t\tcase 'SOLUTION_SCOPE_CHANGED':\r\n\t\t\treturn { ...state, solutionScope: action.payload }\r\n\t\tcase 'GET_IS_KPI_STRATEGY_PAGE':\r\n\t\t\treturn { ...state, isLoading: false, isKpiStrategy: action.payload };\r\n\t\tcase 'GET_IS_SPEND_PARAMETER_PAGE':\r\n\t\t\treturn { ...state, isLoading: false, isSpendParameterPage: action.payload };\r\n\t\tcase 'KPI_MODEL_CHANGED':\r\n\t\t\treturn { ...state, kpi_Model: action.payload }\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\nexport const detailedFileFilters = (state = INITIAL, action) => {\r\n\tswitch (action.type) {\r\n\t\tcase 'Deatiled-Filters':\r\n\t\t\treturn { ...state, filter: action.payload }\r\n\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\nexport const detailedFileFilterText = (state = null, action) => {\r\n\tswitch (action.type) {\r\n\t\tcase 'Deatiled-FilterText':\r\n\t\t\treturn action.payload\r\n\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\nexport const detailedFileChanges = (state = INITIAL, action) => {\r\n\tswitch (action.type) {\r\n\t\tcase 'DeatiledFile-Changes':\r\n\t\t\treturn { ...state, changes: action.payload }\r\n\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\nexport const saveKPIOnRedirect = (state = INITIAL, action) => {\r\n\tswitch (action.type) {\r\n\t\tcase 'SaveKPIOnRedirect-Changes':\r\n\t\t\treturn { ...state, changes: action.payload }\r\n\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\nexport const saveSpendParametersOnRedirect = (state = INITIAL, action) => {\r\n\tswitch (action.type) {\r\n\t\tcase 'SaveSpendParametersOnRedirect-Changes':\r\n\t\t\treturn { ...state, changes: action.payload }\r\n\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\nexport const deleteIntermediateKPIOnRedirect = (state = INITIAL, action) => {\r\n\tswitch (action.type) {\r\n\t\tcase 'DeleteKPIOnRedirect-Changes':\r\n\t\t\treturn { ...state, changes: action.payload }\r\n\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\n\r\nexport const gicsDetails = (state = INITIAL, action) => {\r\n\tswitch (action.type) {\r\n\t\tcase GET_ALLINDUSTRIES_GICS_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload }\r\n\t\tcase GET_ALLINDUSTRIES_GICS_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload, error: '' };\r\n\t\tcase GET_ALLINDUSTRIES_GICS_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\r\n\t\tcase GET_UPDATE_GICS_LOADING:\r\n\t\t\treturn { ...state, isLoading: action.payload };\r\n\t\tcase GET_UPDATE_GICS_SUCCESS:\r\n\t\t\treturn { ...state, isLoading: false, message: action.payload };\r\n\t\tcase GET_UPDATE_GICS_FAILURE:\r\n\t\t\treturn { ...state, isLoading: false, error: action.payload };\r\n\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\n","export const calculationHasErrored = (state = false, action) => {\r\n\tswitch (action.type) {\r\n\t\tcase 'CALCULATION_HAS_ERRORED':\r\n\t\t\treturn action.hasErrored\r\n\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\nexport const calculationIsLoading = (state = true, action) => {\r\n\tswitch (action.type) {\r\n\t\tcase 'CALCULATION_IS_LOADING':\r\n\t\t\t// Prevent FOUC\r\n\t\t\tif(state === false) {\r\n\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\treturn action.isLoading\r\n\t\t\t\t}, 1000)\r\n\t\t\t} else {\r\n\t\t\t\treturn action.isLoading\r\n\t\t\t}\r\n\t\t\treturn state\r\n\t\t\t\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}\r\n\r\nexport const benchMarksData = (state = [], action) => {\r\n switch (action.type) {\r\n case 'CALCULATION_FETCH_DATA_SUCCESS':\r\n return action.benchMarksData\r\n\r\n default:\r\n return state\r\n }\r\n}","const INITIAL = { isLoading: false, error: null, message: null }\r\n\r\nexport const searchText = (state = INITIAL, action) => {\r\n switch (action.type) {\r\n case 'Search-Text':\r\n return action.payload\r\n\r\n default:\r\n return state\r\n }\r\n}\r\n\r\n//It contains the entire result sent from procedure\r\nexport const searchData = (state = INITIAL, action) => {\r\n switch (action.type) {\r\n case 'Search-Data':\r\n return action.payload\r\n\r\n default:\r\n return state\r\n }\r\n}\r\n\r\n//it contains only unique data\r\nexport const searchResultData = (state = INITIAL, action) => {\r\n switch (action.type) {\r\n case 'Search-Result':\r\n return { searchResult: action.payload }\r\n case 'CRM_SEARCH_LOADING':\r\n return { ...state, isLoading: action.payload }\r\n case 'CRM_SEARCH_SUCCESS':\r\n return { ...state, isLoading: false, message: action.payload };\r\n case 'CRM_SEARCH_FAILURE':\r\n return { ...state, isLoading: false, error: action.payload };\r\n\r\n case 'CAPIQ_SEARCH_LOADING':\r\n return { ...state, isLoading: action.payload }\r\n case 'CAPIQ_SEARCH_SUCCESS':\r\n return { ...state, isLoading: false, message: action.payload };\r\n case 'CAPIQ_SEARCH_FAILURE':\r\n return { ...state, isLoading: false, error: action.payload };\r\n\r\n case 'RESET_ERROR':\r\n return { ...state, isLoading: false, error: null, message: null }\r\n default:\r\n return state\r\n }\r\n}\r\n\r\nexport const treeData = (state = INITIAL, action) => {\r\n switch (action.type) {\r\n case 'Tree-Result':\r\n return action.payload\r\n\r\n default:\r\n return state\r\n }\r\n}\r\n\r\nexport const companyProfileData = (state = INITIAL, action) => {\r\n switch (action.type) {\r\n case 'CompanyProfile-Data':\r\n return action.payload\r\n\r\n default:\r\n return state\r\n }\r\n}\r\n\r\nexport const isNewValueStory = (state = false, action) => {\r\n switch (action.type) {\r\n case 'NewValueStory':\r\n return action.payload\r\n\r\n default:\r\n return state\r\n }\r\n}","import {\r\n INITIAL\r\n} from './spendReducers'\r\n\r\nexport const kpis = (state = INITIAL, action) => {\r\n\tswitch (action.type) {\r\n case 'TRACK_KPI_BENCHMARK_FILTERS':\r\n\t\t\treturn { ...state, isLoading: false, kpiBenchMarkFilters: action.payload };\r\n\r\n\t\tdefault:\r\n\t\t\treturn state\r\n\t}\r\n}","import * as contentReducers from './content'\r\nimport * as discoveryReducers from './discoveryReducers'\r\nimport * as valueStoryReducers from './valueStoryReducers'\r\nimport * as formReducers from './formReducers'\r\nimport * as userReducers from './userReducers'\r\nimport * as roleAndPermissionReducers from './roleAndPermissionReducers'\r\nimport * as spendReducers from './spendReducers'\r\nimport * as calculationReducers from './calculations'\r\nimport * as searchReducer from './searchReducer'\r\nimport * as kpiReducers from './kpiReducers'\r\nimport { combineReducers } from 'redux'\r\n\r\nconst allReducers = Object.assign({}, \r\n\tcontentReducers,\r\n\tdiscoveryReducers,\r\n\tvalueStoryReducers,\r\n\tformReducers,\r\n\tuserReducers,\r\n\tcalculationReducers,\r\n\troleAndPermissionReducers,\r\n\tspendReducers,\r\n\tsearchReducer,\r\n\tkpiReducers\r\n)\r\nconst rootReducer = combineReducers(allReducers)\r\n\r\nexport default rootReducer\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom'\r\nimport App from './App';\r\nimport registerServiceWorker from './registerServiceWorker'\r\n\r\n// Redux\r\nimport { Provider } from 'react-redux'\r\nimport configureStore from './store'\r\n\r\n// UI\r\nimport './index.css'\r\nimport 'react-mdl/extra/material.js'\r\nimport MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'\r\n\r\nexport const store = configureStore()\r\n\r\nReactDOM.render(\r\n\t\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content,\r\n ui: state.content.ui,\r\n user: state.default,\r\n industryNetworkStats: state.content.spendAnalysis.industryDrilldown.industryNetworkStatsHistogram,\r\n currencySymbols: state.content.CurrencySymbols,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(IndustryNetworkStatsHistogram); ","import React from 'react';\r\nimport * as d3 from 'd3';\r\n\r\n// Utils\r\nimport { convertToMillion, formatThousands, convertToThousands } from 'utils/Utils'\r\n\r\n\r\nclass StackedBarChart extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n summaryScopeData: [],\r\n }\r\n\r\n this.drawChart = this.drawChart.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.drawChart(this.props);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.data !== this.props.data) {\r\n //Perform some operation\r\n this.drawChart(nextProps);\r\n }\r\n }\r\n\r\n componentWillUnmount(){\r\n // d3.select(\"#chart\").selectAll(\"svg\").remove();\r\n d3.selectAll('.tooltip').style('display', 'none');\r\n }\r\n\r\n formatAsPerMetrics = (data, withDecimal = false) => {\r\n var formattedValue = \"\" \r\n if(this.props.selectedMetrics !=undefined)\r\n {\r\n switch(this.props.selectedMetrics){\r\n case(\"Invoice Spend\"):\r\n case(\"PO Spend\"):\r\n formattedValue = this.props.currency + convertToMillion(data,withDecimal)\r\n break;\r\n \r\n case(\"Invoice Count\"):\r\n case(\"PO Count\"):\r\n formattedValue = formatThousands(data)\r\n break;\r\n }\r\n }else{\r\n formattedValue = this.props.currency + convertToMillion(data,withDecimal)\r\n }\r\n return formattedValue;\r\n }\r\n\r\n drawChart = (props) => {\r\n var instance = this;\r\n if (props.data.length !== 0) {\r\n d3.select(\"#chart\").selectAll(\"svg\").remove();\r\n d3.selectAll('.tooltip').style('display', 'none');\r\n var data = props.data;\r\n var height = 550;\r\n var width = 1060;\r\n var margin = ({ top: 100, right: 100, bottom: 50, left: 200 });\r\n\r\n const series = d3.stack().keys([\"IN_SCOPE_SPEND\", \"OUT_SCOPE_SPEND\"])(data)\r\n //.offset(d3.stackOffsetExpand)(data)\r\n\r\n\r\n const xScale = d3.scaleLinear()\r\n .domain([0, d3.max(series, d => d3.max(d, d => d[1]))])\r\n .range([0, width - margin.right])\r\n\r\n const yScale = d3.scaleBand()\r\n .domain(data.map(d => d.SOLUTION_TYPE))\r\n .range([0, height - margin.bottom])\r\n .padding(0.5)\r\n //.style(\"padding-left\", \"100px\");\r\n \r\n const rScale = d3.scaleBand()\r\n //.domain(data.map(d => props.type == 'Spend' ? (props.currency + convertToMillion(d.IN_SCOPE_SPEND)) : formatThousands(d.IN_SCOPE_SPEND)))\r\n .domain(data.map(d => props.type == 'Spend' ? instance.formatAsPerMetrics(d.IN_SCOPE_SPEND) : formatThousands(d.IN_SCOPE_SPEND)))\r\n .range([0, height - margin.bottom])\r\n .padding(0.5)\r\n\r\n const color = d3.scaleOrdinal()\r\n .domain(series.map(d => d.key))\r\n .range([\"#33C3FF\", \"#ff8c00\"])\r\n .unknown(\"#ccc\")\r\n\r\n const siFormat = d3.formatPrefix(\",.0\", 1e6);\r\n const siFormat2 = d3.formatPrefix(\",.0\", 1e3)\r\n function tickFormat(num) {\r\n return siFormat(num);//.replace(\"G\", \"B\");\r\n };\r\n function tickFormat2(num) {\r\n return siFormat2(num);//.replace(\"G\", \"B\");\r\n };\r\n\r\n const xAxis = g => g\r\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\r\n .call(d3.axisBottom(xScale).ticks(7))\r\n //.call(d3.axisBottom(xScale).tickSize(-365))\r\n .call(props.type == 'Spend' ? d3.axisBottom(xScale).tickFormat(tickFormat) : props.type == 'Count' ? d3.axisBottom(xScale) : d3.axisBottom(xScale).tickFormat(tickFormat2))\r\n .call(g => g.selectAll(\".domain\").remove())\r\n .call(g => g.selectAll(\".tick text\")\r\n .attr(\"font-size\", \"15\"))\r\n // .attr(\"class\", \"below\")\r\n // .attr(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\"))\r\n\r\n\r\n const yAxis = g => g\r\n .attr(\"transform\", `translate(0,-32)`)\r\n .call(d3.axisRight(yScale).tickSize(0))\r\n .call(g => g.selectAll(\".domain\").remove())\r\n .call(g => g.selectAll(\".tick text\")\r\n .style(\"font-size\", \"15\")\r\n // .style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\")\r\n .style(\"font-weight\", \"600\")\r\n )\r\n\r\n\r\n // const rAxis = g => g\r\n // .attr(\"transform\", `translate(970,0)`)\r\n // .call(d3.axisRight(rScale).tickSize(0))\r\n // .call(g => g.selectAll(\".domain\").remove())\r\n // .call(g=>g.selectAll(\".tick text\")\r\n // .attr(\"font-size\",\"15\")\r\n // .attr(\"font-weight\",\"700\")\r\n // .attr(\"fill\",\"#33C3FF\"))\r\n\r\n const svg = d3.select(\"#chart\")\r\n .append(\"svg\")\r\n .attr(\"viewBox\", [0, 0, width, height])\r\n .style(\"overflow\", \"visible\");\r\n\r\n // svg.append(\"g\")\r\n // .selectAll(\"g\")\r\n // .data(series)\r\n // .enter().append(\"g\")\r\n // .attr(\"fill\", d => color(d.key))\r\n // .selectAll(\"rect\")\r\n // .data(d => d)\r\n // .join(\"rect\")\r\n // .attr(\"x\", d => xScale(d[0]))\r\n // .attr(\"y\", (d, i) => yScale(d.data.SOLUTION_TYPE))\r\n // .attr(\"width\", d => xScale(d[1]) - xScale(d[0]))\r\n // .attr(\"height\", 47);// yScale.bandwidth());\r\n //d3.select('#tooltipdiv').remove();\r\n var tooltip = d3.select(\"body\").append(\"div\").attr(\"class\", \"tooltip\");\r\n // Create groups for each series, rects for each segment \r\n var groups = svg.selectAll(\"g.cost\")\r\n .data(series)\r\n .enter().append(\"g\")\r\n .attr(\"class\", \"cost\")\r\n .style(\"fill\", d => color(d.key));\r\n\r\n var rect = groups.selectAll(\"rect\")\r\n .data(function (d) { return d; })\r\n .enter()\r\n .append(\"rect\")\r\n .attr(\"x\", d => xScale(d[0]))\r\n .attr(\"y\", (d, i) => yScale(d.data.SOLUTION_TYPE))\r\n .attr(\"width\", d => xScale(d[1]) - xScale(d[0]))\r\n .attr(\"height\", 47)\r\n // .on(\"mouseover\", function () { tooltip.style(\"display\", \"none\"); })\r\n // .on(\"mouseout\", function () { tooltip.style(\"display\", \"none\"); })\r\n // .on(\"mousemove\", function (d) {\r\n // var xPosition = d3.mouse(this)[0] - 15;\r\n // var yPosition = d3.mouse(this)[1] - 25;\r\n // tooltip.attr(\"transform\", \"translate(\" + xPosition + \",\" + yPosition + \")\");\r\n // tooltip.select(\"text\").text(d[0]);\r\n .on(\"mousemove\", function (d) {\r\n tooltip\r\n .style(\"left\", d3.event.pageX - 50 + \"px\")\r\n .style(\"top\", d3.event.pageY - 70 + \"px\")\r\n .style(\"display\", \"inline-block\")\r\n .html(props.type == 'Spend' ?\r\n //\"Total: \" + props.currency + convertToMillion(d.data.IN_SCOPE_SPEND + d.data.OUT_SCOPE_SPEND, true) + \"{this.props.industryNetworkStats.tabHeader}
\r\n \r\n
\r\n \r\n this.radioButtonChecked(value)}\r\n color=\"default\"\r\n > \r\n this.radioButtonChecked(value)}\r\n color=\"default\"\r\n > \r\n
\r\n {this.props.industryNetworkStats.industryTransaction}
\r\n {this.props.industryNetworkStats.industrySpend}
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n {/*
\r\n */}\r\n
\r\n {this.props.industryNetworkStats.topSuppliers + ': ' + 'XX'}
\r\n {this.props.industryNetworkStats.topSupplierRelationships + ': ' + 'YY'}
\r\n \r\n {this.state.stats === this.props.industryNetworkStats.industryTransaction ?\r\n
\r\n \r\n
: \r\n
}\r\n \" + \"In Scope: \" + props.currency + (d.data.IN_SCOPE_SPEND == null ? 0 : convertToMillion(d.data.InScopeValue, true)) + \"
\" + \"Out Of Scope: \" + props.currency + (d.data.OUT_SCOPE_SPEND == null ? 0 : convertToMillion(d.data.OUT_SCOPE_SPEND, true))\r\n \"Total: \" + instance.formatAsPerMetrics(d.data.IN_SCOPE_SPEND + d.data.OUT_SCOPE_SPEND, true) + \"
\" + \"In Scope: \" + (d.data.IN_SCOPE_SPEND == null ? 0 : instance.formatAsPerMetrics(d.data.InScopeValue, true)) + \"
\" + \"Out Of Scope: \" + (d.data.OUT_SCOPE_SPEND == null ? 0 :instance.formatAsPerMetrics(d.data.OutScopeValue, true))\r\n : props.type == 'Count' ? \"Total :\" + formatThousands(d.data.IN_SCOPE_SPEND + d.data.OUT_SCOPE_SPEND) + \"
\" + \"In Scope: \" + (d.data.IN_SCOPE_SPEND == null ? 0 : formatThousands(d.data.InScopeValue)) + \"
\" + \"Out Of Scope: \" + (d.data.OUT_SCOPE_SPEND == null ? 0 : formatThousands(d.data.OutScopeValue))\r\n : \"Total: \" + convertToThousands(d.data.IN_SCOPE_SPEND + d.data.OUT_SCOPE_SPEND) + \"
\" + \"In Scope: \" + (d.data.IN_SCOPE_SPEND == null ? 0 : convertToThousands(d.data.InScopeValue)) + \"
\" + \"Out Of Scope: \" + (d.data.OUT_SCOPE_SPEND == null ? 0 : convertToThousands(d.data.OutScopeValue))\r\n );\r\n })\r\n .on(\"mouseout\", function (d) {\r\n tooltip.style(\"display\", \"none\");\r\n })\r\n // d3.select(window).on('mouseout', () => {\r\n // d3.selectAll('.tooltip').style('opacity', '0');\r\n // });\r\n\r\n // // Prep the tooltip bits, initial display is hidden\r\n // var tooltip = svg.append(\"g\")\r\n // .attr(\"class\", \"tooltip\")\r\n // .style(\"display\", \"none\");\r\n\r\n // tooltip.append(\"rect\")\r\n // .attr(\"width\", 30)\r\n // .attr(\"height\", 20)\r\n // .attr(\"fill\", \"white\")\r\n // .style(\"opacity\", 0.5);\r\n\r\n // tooltip.append(\"text\")\r\n // .attr(\"x\", 15)\r\n // .attr(\"dy\", \"1.2em\")\r\n // .style(\"text-anchor\", \"middle\")\r\n // .attr(\"font-size\", \"12px\")\r\n // .attr(\"font-weight\", \"bold\");\r\n\r\n //set the label\r\n svg.selectAll(\"text\")\r\n .data(data)\r\n .enter()\r\n .append(\"text\")\r\n .attr(\"class\", \"below\")\r\n .attr(\"x\", d => 970)\r\n .attr(\"y\", (d, i) => yScale(d.SOLUTION_TYPE) + 30)\r\n .attr(\"text-anchor\", \"left\")\r\n //.text(function (d) { return (props.type == 'Spend' ? (props.currency + convertToMillion(d.IN_SCOPE_SPEND)) : props.type == 'Count' ? formatThousands(d.IN_SCOPE_SPEND) : convertToThousands(d.IN_SCOPE_SPEND)) })// convertToMillion(d.IN_SCOPE_SPEND, true); \r\n .text(function (d) { return (props.type == 'Spend' ? instance.formatAsPerMetrics(d.IN_SCOPE_SPEND) : props.type == 'Count' ? formatThousands(d.IN_SCOPE_SPEND) : convertToThousands(d.IN_SCOPE_SPEND)) })\r\n .style(\"font-size\", \"15\")\r\n // .style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\")\r\n .style(\"font-weight\", \"700\")\r\n .style(\"fill\", \"#33C3FF\");\r\n\r\n //Uncomment below lines to add x axis\r\n // svg.append(\"g\")\r\n // .call(xAxis);\r\n\r\n svg.append(\"g\")\r\n .call(yAxis);\r\n\r\n // svg.append(\"g\")\r\n // .call(rAxis);\r\n\r\n return svg.node();\r\n }\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\nexport default StackedBarChart","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\n\r\nimport {\r\n getIndustryDrillScopeDetailsLoading,\r\n getIndustryDrillScopeDetailsSuccess,\r\n getIndustryDrillScopeDetailsFailure,\r\n getIndustryDrillScopeSummaryData,\r\n setPopUpTabLoadingStatus\r\n} from 'actions/spendActions'\r\n\r\nimport { path } from 'Constants'\r\nimport StackedBarChart from 'components/UI/StackedBarChart'\r\n\r\nclass IndustryScopeSummary extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n data: {},\r\n skey: null,\r\n scopeSummaryData: []\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData(this.props.spendDetails.industryGICS_Details[\"SKEY\"]);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.spendDetails.industryGICS_Details[\"SKEY\"] != this.state.skey) {\r\n this.loadData(nextProps.spendDetails.industryGICS_Details[\"SKEY\"]);\r\n this.setState({ skey: nextProps.spendDetails.industryGICS_Details[\"SKEY\"] })\r\n }\r\n }\r\n\r\n loadData(gicsID) {\r\n this.props.setPopUpTabLoadingStatus(true)\r\n this.props.getIndustryDrillScopeSummaryData(\r\n this.props.spendDetails.currentActiveRequest.DMC_ID,\r\n this.props.spendDetails.currentActiveRequest.VS_ID, this.props.user.user.Email,\r\n gicsID\r\n ).then((response) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n if (response.status !== undefined && response.status === 200) {\r\n // var isValidData = false;\r\n if (response.data.Result != undefined) {\r\n // for (var i = 0; i < response.data.Result.length; i++) {\r\n // \tif (response.data.Result[i]['IN_SCOPE_SPEND'] === null && response.data.Result[i]['OUT_SCOPE_SPEND'] === null) {\r\n // \t\tisValidData = false;\r\n // \t} else {\r\n // \t\tisValidData = true;\r\n // \t}\r\n // }\r\n this.setState({ scopeSummaryData: response.data.Result, isError: 'No', isLoading: false });\r\n }\r\n } else if (response.response && response.response.status == 400) {\r\n this.setState({ isLoading: false, isError: 'No', responseMsg: 'No Result Found' })\r\n } else if (response && response.stack && response.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: this.props.content.validation.networkError, isError: 'Yes', isLoading: false })\r\n }\r\n }).catch((error) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n this.setState({ responseMsg: this.props.content.validation.error, isError: 'Yes', isLoading: false })\r\n })\r\n\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content,\r\n ui: state.content.ui,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n user: state.default,\r\n noData: state.content.spendAnalysis.defineScope,\r\n industryScopeContent: state.content.spendAnalysis.industryDrilldown.industryScopeSummaryGraph\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getIndustryDrillScopeDetailsSuccess: message => dispatch(getIndustryDrillScopeDetailsSuccess(message)),\r\n getIndustryDrillScopeDetailsFailure: error => dispatch(getIndustryDrillScopeDetailsFailure(error)),\r\n getIndustryDrillScopeDetailsLoading: bool => dispatch(getIndustryDrillScopeDetailsLoading(bool)),\r\n getIndustryDrillScopeSummaryData: (DMCId, VSId, userEmail, Id) => dispatch(getIndustryDrillScopeSummaryData(DMCId, VSId, userEmail, Id)),\r\n setPopUpTabLoadingStatus: bool => dispatch(setPopUpTabLoadingStatus(bool)),\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(IndustryScopeSummary);","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport moment from 'moment'\r\n\r\nimport {\r\n storeVendorDetails,\r\n getIndustryCapIQ,\r\n storeIndustryGICS_ID,\r\n storeIndustryDetails,\r\n setPopUpTabLoadingStatus\r\n} from 'actions/spendActions'\r\n\r\nimport { path } from 'Constants'\r\n\r\nimport { formatThousands, roundFix } from \"../../utils/Utils\";\r\n\r\nclass IndustryCapIQDetails extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n data: {\r\n OPERATING_MARGIN_EBIT: 0, DAYS_INVENTORY_OUTSTANDING: 0, DAYS_PAYABLE_OUTSTANDING: 0,\r\n CONVERSION_CASH_CYCLE: 0, DAYS_SALES_OUTSTANDING: 0, INVENTORY_TURNS: 0, UPDATE_TIMESTAMP: undefined\r\n },\r\n columns: [],\r\n aggregatedData: { INVOICE_COUNT: 0, INVOICE_SPEND: 0.0, PO_COUNT: 0, PO_SPEND: 0.0, UNIQUE_SUPPLIERS: 0 },\r\n industryData: {},\r\n selectedIndustryName: ''\r\n }\r\n\r\n this.loadData = this.loadData.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData(this.props);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (\r\n nextProps.spendDetails.industryGICS_Details && nextProps.spendDetails.industryGICS_Details.SKEY !== (this.props.spendDetails.industryGICS_Details ? this.props.spendDetails.industryGICS_Details.SKEY : undefined)) {\r\n this.loadData(nextProps);\r\n }\r\n }\r\n\r\n loadData(nextProps) {\r\n let currencySymbol = this.props.spendDetails.currentActiveRequest !== undefined ?\r\n this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()] : ''\r\n this.props.setPopUpTabLoadingStatus(true);\r\n this.props.getIndustryCapIQ({\r\n DMCID: this.props.spendDetails.currentActiveRequest.DMC_ID,\r\n VSID: this.props.spendDetails.currentActiveRequest.VS_ID, EMAIL: this.props.user.user.Email,\r\n GICSID: nextProps.spendDetails.industryGICS_Details.SKEY,\r\n Solution: 'No Filter'\r\n }).then((response) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n if (response.status !== undefined && response.status === 200) {\r\n this.setState({ data: response.data.Result[0], currencySymbol: currencySymbol });\r\n } else if (response.response && response.response.status == 400) {\r\n this.setState({ data: {}, currencySymbol: currencySymbol, isLoading: false, isError: false, message: 'No Result Found' })\r\n } else if (response && response.stack && response.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: this.props.content.validation.networkError, isError: 'Yes', isLoading: false })\r\n } else {\r\n this.setState({ responseMsg: this.props.content.validation.error, isError: 'Yes' })\r\n }\r\n }).catch((error) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n this.setState({ responseMsg: this.props.content.validation.error, isError: 'Yes' })\r\n })\r\n\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n\r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n {this.props.industryScopeContent.header}
\r\n \r\n {this.state.scopeSummaryData !== (null && '' && undefined) && this.state.scopeSummaryData.length > 0 ?\r\n
\r\n {this.state.scopeSummaryData !== '' && this.state.scopeSummaryData !== null ?\r\n {this.props.noData.noDataFound}
\r\n }\r\n \r\n
\r\n : null}\r\n\r\n {this.props.content.spendAnalysis.defineScope.inScopeSpend}
\r\n {this.props.content.spendAnalysis.defineScope.outScopeSpend}
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content,\r\n ui: state.content.ui,\r\n user: state.default,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n industryCapIQLang: state.content.spendAnalysis.industryDrilldown.industryCapIQ,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n storeIndustryGICS_ID: (GICS_ID) => dispatch(storeIndustryGICS_ID(GICS_ID)),\r\n storeVendorDetails: (vendorDetails) => dispatch(storeVendorDetails(vendorDetails)),\r\n getIndustryCapIQ: (params) => dispatch(getIndustryCapIQ(params)),\r\n storeIndustryDetails: (data) => dispatch(storeIndustryDetails(data)),\r\n setPopUpTabLoadingStatus: bool => dispatch(setPopUpTabLoadingStatus(bool)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(IndustryCapIQDetails); ","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { formatThousands, convertToMillion } from 'utils/Utils'\r\n\r\nclass IndustryNetworkStatsDetails extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n }\r\n\r\n loadData() {\r\n\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData()\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n
\r\n \r\n {this.props.industryCapIQLang.industryTitle}\r\n
\r\n \r\n
\r\n {Number.parseInt(this.props.spendDetails.industryGICS_Details.level) >= 4 ?\r\n \r\n
\r\n {this.props.industryCapIQLang.l1Industry}: {this.props.spendDetails.industryDetails.subHeader[0].name}
\r\n {this.state.data.L1_INDUSTRY_DESC_DETAIL}
\r\n \r\n
: ''}\r\n \r\n
\r\n {this.props.industryCapIQLang.l4Industry}: {this.props.spendDetails.industryDetails.subHeader[3].name}
\r\n {this.state.data.L4_INDUSTRY_DESC_DETAIL}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.props.industryCapIQLang.industry}: {this.props.spendDetails.industryGICS_Details.industry}*{this.state.data.UPDATE_TIMESTAMP ? ** : ''}
\r\n \r\n
\r\n \r\n {this.props.industryCapIQLang.operatingMargin}\r\n
\r\n \r\n {this.props.industryCapIQLang.daysInventoryOutstanding}\r\n
\r\n \r\n {this.props.industryCapIQLang.daysPayableOutstanding}\r\n
\r\n \r\n
\r\n \r\n {formatThousands(roundFix(this.state.data.OPERATING_MARGIN_EBIT, 2))}%\r\n
\r\n \r\n {formatThousands(roundFix(this.state.data.DAYS_INVENTORY_OUTSTANDING, 2))}\r\n
\r\n \r\n {formatThousands(roundFix(this.state.data.DAYS_PAYABLE_OUTSTANDING, 2))}\r\n
\r\n \r\n
\r\n \r\n {this.props.industryCapIQLang.conversionCashCycle}\r\n
\r\n \r\n {this.props.industryCapIQLang.daysSalesOutstanding}\r\n
\r\n \r\n {this.props.industryCapIQLang.inventoryTurns}\r\n
\r\n \r\n
\r\n \r\n {formatThousands(roundFix(this.state.data.CONVERSION_CASH_CYCLE, 2))}\r\n
\r\n \r\n {formatThousands(roundFix(this.state.data.DAYS_SALES_OUTSTANDING, 2))}\r\n
\r\n \r\n {formatThousands(roundFix(this.state.data.INVENTORY_TURNS, 2))}\r\n
\r\n \r\n
\r\n \r\n *{this.props.industryCapIQLang.industryFooter}\r\n
\r\n {this.state.data.UPDATE_TIMESTAMP ? \r\n **{this.props.industryCapIQLang.dataLastRefreshedOn}{moment(this.state.data.UPDATE_TIMESTAMP).format(\"MM-DD-YYYY\")}\r\n
: ''}\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content,\r\n ui: state.content.ui,\r\n user: state.default,\r\n industryNetworkStats: state.content.spendAnalysis.industryDrilldown.industryNetworkStatsDetails,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(IndustryNetworkStatsDetails); ","import * as d3 from 'd3'\r\nimport { convertToMillion, round, formatThousands } from 'utils/Utils'\r\n\r\nconst VerticleBarChart = (data, currency, element, chartName, yAxisName, width, height) => {\r\n\r\n var margin = { top: 30, right: 20, bottom: 20, left: 70 }\r\n\r\n var chart = d3.select(\"#\" + element).append(\"svg\")\r\n .attr('viewBox',\r\n '-10 0 ' +\r\n (width + margin.left + margin.right) +\r\n ' ' +\r\n (height + margin.top + margin.bottom)\r\n )\r\n .attr('preserveAspectRatio', 'xMinYMin')\r\n .append(\"g\")\r\n .attr(\"transform\",\r\n \"translate(\" + margin.left + \",\" + margin.top + \")\");\r\n\r\n var maxValue = d3.max(data, function (d) {\r\n return d.value;\r\n })\r\n\r\n const yScale = d3.scaleLinear()\r\n .range([height, 0]).nice()\r\n .domain([0, maxValue + Math.round(maxValue / 5)]);\r\n\r\n chart.append(\"g\")\r\n .attr(\"class\", \"axisChart\")\r\n .call(d3.axisLeft(yScale).ticks(5, \"s\").tickFormat(function (d) {\r\n return element === 'SpendChart' ? convertToMillion(d) : formatThousands(round(Number(d), 2).toFixed(0));\r\n }))\r\n .append(\"text\")\r\n .attr(\"transform\", \"rotate(-90)\")\r\n .attr(\"y\", -80)\r\n .attr(\"x\", 0 - (height / 2))\r\n .attr(\"dy\", \"1em\")\r\n .style(\"text-anchor\", \"middle\")\r\n .text(yAxisName);\r\n\r\n const xScale = d3.scaleBand()\r\n .range([0, element === \"SpendChart\" ? width - 40 : width])\r\n .domain(data.map((s) => s.name))\r\n .padding(element === \"SpendChart\" ? 0.1 : 0.2)\r\n chart.append('g')\r\n .attr('transform', `translate(0, ${height})`)\r\n .call(d3.axisBottom(xScale));\r\n\r\n chart.selectAll()\r\n .data(data)\r\n .enter()\r\n .append('rect')\r\n .attr(\"x\", (d) => element === \"SpendChart\" ? xScale(d.name) + 17 : xScale(d.name) + 10)\r\n .attr(\"y\", (d) => yScale(d.value))\r\n .attr(\"height\", (d) => height - yScale(d.value))\r\n .attr(\"width\", element === \"SpendChart\" ? xScale.bandwidth() - 34 : xScale.bandwidth() - 20)\r\n .attr(\"fill\", \"#33C3FF\")\r\n\r\n chart.selectAll()\r\n .data(data)\r\n .enter()\r\n .append(\"text\")\r\n .style(\"font-size\", \"12px\")\r\n .style(\"font-weight\", \"600\")\r\n .attr(\"class\", \"label\")\r\n .attr(\"fill\", \"#33C3FF\")\r\n .attr('text-anchor', 'middle')\r\n .attr(\"x\", (d) => xScale(d.name) + xScale.bandwidth() / 2)\r\n .attr('dx', 0)\r\n .attr(\"y\", (d) => yScale(d.value))\r\n .attr('dy', -6)\r\n .text(function (d) {\r\n return element === \"SpendChart\" ? currency + convertToMillion(d.value, true) : formatThousands(round(Number(d.value), 2).toFixed(0))\r\n });\r\n\r\n chart.append(\"text\")\r\n .attr(\"x\", width / 2)\r\n .attr(\"y\", -5)\r\n .attr('text-anchor', 'middle')\r\n .text(chartName)\r\n\r\n return chart;\r\n}\r\nexport default VerticleBarChart","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport VerticleBarChart from 'components/UI/VerticleBarChart'\r\nimport * as d3 from 'd3'\r\nimport { convertToMillion, round, formatThousands } from 'utils/Utils'\r\nimport {\r\n getNetworkStatsData,\r\n setPopUpTabLoadingStatus\r\n} from 'actions/spendActions'\r\n\r\nclass IndustryNetworkStats extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n documentSpendData: [],\r\n documentCountData: [],\r\n supplierRelationshipCountData: []\r\n }\r\n this.drawChart = this.drawChart.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.props.setPopUpTabLoadingStatus(true);\r\n this.props.getNetworkStatsData(this.props.spendDetails.industryGICS_Details.SKEY)\r\n .then((response) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n if (response.status === 200) {\r\n let documentData = response.data.Result['SP_UI_INDUSTRY_DRILL_AN_DOC_TYPE']\r\n let spendData = response.data.Result['SP_UI_INDUSTRY_DRILL_AN_INV_PO_SPEND']\r\n let supplierRelationshipData = response.data.Result['SP_UI_INDUSTRY_DRILL_AN_SUPP_REL_COUNT']\r\n\r\n let reorderDocumentData = [];\r\n let reorderSpendData = [];\r\n let formatDocumentData = [];\r\n let formatSpendData = [];\r\n let formatCountData = [];\r\n\r\n let poSpend = spendData.find(item => item['SPEND_TYPE'] === 'PO Spend')\r\n if (poSpend !== null && poSpend !== undefined)\r\n reorderSpendData.push(poSpend)\r\n let invoiceSpend = spendData.find(item => item['SPEND_TYPE'] === 'Invoice Spend')\r\n if (invoiceSpend !== null && invoiceSpend !== undefined)\r\n reorderSpendData.push(invoiceSpend)\r\n let purchaseOrder = documentData.find(item => item['DOCUMENT_TYPE'] === 'PurchaseOrder')\r\n if (purchaseOrder !== null && purchaseOrder !== undefined)\r\n reorderDocumentData.push(purchaseOrder)\r\n let POConfirmation = documentData.find(item => item['DOCUMENT_TYPE'] === 'ConfirmationDocument')\r\n if (POConfirmation !== null && POConfirmation !== undefined)\r\n reorderDocumentData.push(POConfirmation)\r\n let shipNotices = documentData.find(item => item['DOCUMENT_TYPE'] === 'ShipNoticeDocument')\r\n if (shipNotices !== null && shipNotices !== undefined)\r\n reorderDocumentData.push(shipNotices)\r\n let invoices = documentData.find(item => item['DOCUMENT_TYPE'] === 'InvoiceDetailRequest')\r\n if (invoices !== null && invoices !== undefined)\r\n reorderDocumentData.push(invoices)\r\n\r\n reorderSpendData.map(function (item, index) {\r\n let rank = item['DOC_COUNT_RANK'];\r\n let objSpend = {\r\n 'name': item['SPEND_TYPE'], 'value': item['DOCUMENT_SPEND_AMT'], 'rank': rank !== null ? rank + ' of ' + item['GICS_LEVEL_COUNT'] : 'NA'\r\n }\r\n formatSpendData.push(objSpend)\r\n })\r\n reorderDocumentData.map(function (item, index) {\r\n let documentName = item['DOCUMENT_TYPE']\r\n switch (item['DOCUMENT_TYPE']) {\r\n case 'ConfirmationDocument':\r\n documentName = 'PO Confirmation'\r\n break;\r\n case 'InvoiceDetailRequest':\r\n documentName = 'Invoice'\r\n break;\r\n case 'PurchaseOrder':\r\n documentName = 'Purchase Order'\r\n break;\r\n case 'ShipNoticeDocument':\r\n documentName = 'Ship Notice'\r\n break;\r\n default:\r\n break\r\n }\r\n let rank = item['DOC_COUNT_RANK']\r\n let objDocCount = {\r\n 'name': documentName, 'value': item['DOCUMENT_COUNT'], 'rank': rank !== null ? rank + ' of ' + item['GICS_LEVEL_COUNT'] : 'NA'\r\n }\r\n formatDocumentData.push(objDocCount)\r\n })\r\n supplierRelationshipData.map(function (item, index) {\r\n let objCount = {\r\n 'supplierCount': item['Total Supplier Count'], 'relationshipCount': item['Total Relationship Count']\r\n }\r\n formatCountData.push(objCount)\r\n })\r\n //Object.assign(this.state, { documentCountData: formatDocumentData, documentSpendData: formatSpendData });\r\n this.setState({ documentCountData: formatDocumentData, documentSpendData: formatSpendData, supplierRelationshipCountData: formatCountData }, () => this.drawChart())\r\n }\r\n }).catch((error) => {\r\n this.props.setPopUpTabLoadingStatus(false)\r\n })\r\n }\r\n\r\n drawChart = () => {\r\n d3.select(\"#SpendChart\").selectAll(\"svg\").remove();\r\n d3.select(\"#CountChart\").selectAll(\"svg\").remove();\r\n //Currency is always in $ - AV-443\r\n VerticleBarChart(this.state.documentSpendData, '$', 'SpendChart', this.props.industryNetworkStats.spendChartName, this.props.industryNetworkStats.documentSpend, 304, 325);\r\n VerticleBarChart(this.state.documentCountData, '$', 'CountChart', this.props.industryNetworkStats.countChartName, this.props.industryNetworkStats.documentCount, 504, 325)\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n {this.props.industryNetworkStats.tabHeader}
\r\n {this.props.industryNetworkStats.ANStats}
\r\n \r\n
\r\n \r\n
\r\n {this.props.industryNetworkStats.totalRelationships}
\r\n {this.props.industryNetworkStats.totalSuppliers}
\r\n {this.props.industryNetworkStats.totalDocCount}
\r\n {this.props.industryNetworkStats.totalInvoiceSpend}
\r\n {this.props.industryNetworkStats.totalInvoiceCount}
\r\n {this.props.industryNetworkStats.totalPOSpend}
\r\n {this.props.industryNetworkStats.totalPOCount}
\r\n \r\n
\r\n {1197 !== null ? formatThousands(1197) : ''}
\r\n {883723 !== null ? formatThousands(883723) : ''}
\r\n {123456 !== null ? formatThousands(123456) : ''}
\r\n {1234567 !== null ? this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()] + formatThousands(convertToMillion(1234567)) : ''}
\r\n {123456 !== null ? formatThousands(123456) : ''}
\r\n {1234567 !== null ? this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()] + formatThousands(convertToMillion(1234567)) : ''}
\r\n {123456 !== null ? formatThousands(123456) : ''}
\r\n {this.props.industryNetworkStats.ANStatsRank}
\r\n \r\n
\r\n \r\n
\r\n {this.props.industryNetworkStats.relationshipRank}
\r\n {this.props.industryNetworkStats.supplierRank}
\r\n {this.props.industryNetworkStats.docCountRank}
\r\n {this.props.industryNetworkStats.invoiceSpendRank}
\r\n {this.props.industryNetworkStats.invoiceCountRank}
\r\n {this.props.industryNetworkStats.POSpendRank}
\r\n {this.props.industryNetworkStats.POCountRank}
\r\n \r\n
\r\n {'1/13'}
\r\n {'2/13'}
\r\n {'3/13'}
\r\n {'4/13'}
\r\n {'5/13'}
\r\n {'6/13'}
\r\n {'7/13'}
\r\n \r\n \r\n {this.props.data.name} \r\n {this.props.documentType === \"spend\" ?\r\n //this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()] + convertToMillion(this.props.data.value, true) : formatThousands(round(Math.abs(Number(this.props.data.value)) / 1000, 2).toFixed(2)) + \" K\"} \r\n //Currency is always in $ as this currency doen't depend on Spend file currency - AV-443\r\n '$' + convertToMillion(this.props.data.value, true) : formatThousands(round(Number(this.props.data.value), 2).toFixed(0))}\r\n {/* {this.props.documentType === \"count\" ?\r\n {formatThousands(this.props.data.supplierCount)} : null}\r\n {this.props.documentType === \"count\" ?\r\n {formatThousands(this.props.data.relationshipCount)} : null} */}\r\n {this.props.data.rank} \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content,\r\n ui: state.content.ui,\r\n user: state.default,\r\n industryNetworkStats: state.content.spendAnalysis.industryDrilldown.industryNetworkStats,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getNetworkStatsData: (GICSID) => dispatch(getNetworkStatsData(GICSID)),\r\n setPopUpTabLoadingStatus: bool => dispatch(setPopUpTabLoadingStatus(bool)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(IndustryNetworkStats); ","import React, { Fragment } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport SupplierIndustriesTabPanel from '../Tabs/SupplierIndustriesTabPanel'\r\nimport IndustriesScopeAndMatch from 'components/Spend/IndustriesScopeAndMatch'\r\nimport Modal from 'reboron/OutlineModal'\r\nimport { storeIndustryGICS_ID, storeIndustryDetails } from 'actions/spendActions'\r\nimport { changeModalBorderStyle, drilldownModalBorderContentStyle, changeModalBorderRectStyle } from 'Constants'\r\nimport IndustrySpend from './IndustrySpend'\r\nimport IndustrySupplier from './IndustrySupplier'\r\nimport IndustryNetworkStatsHistogram from './IndustryNetworkStatsHistogram'\r\nimport IndustryScopeSummary from './IndustryScopeSummaryGraph'\r\nimport IndustryCapIQDetails from './IndustryCapIQDetails'\r\nimport IndustryNetworkStatsDetails from './IndustryNetworkStatsDetails'\r\nimport IndustryNetworkStats from './IndustryNetworkStats'\r\n\r\nclass SupplierIndustriesPopup extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.myRef = React.createRef()\r\n this.state = {\r\n tabId: 1,\r\n tabs: [],\r\n tabsWithoutCapIQ: [],\r\n tabsWithoutParentCapIQ: [],\r\n tabsWithoutCapIQAndParentCapIQ: [],\r\n selectedIndustryName: '',\r\n isCapIQLicesend: false\r\n }\r\n\r\n this.dispatchTabChange = this.dispatchTabChange.bind(this)\r\n this.intializeSupplierTabs = this.intializeSupplierTabs.bind(this)\r\n this.changeIndustry = this.changeIndustry.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n // this.intializeSupplierTabs();\r\n this.setState({ isCapIQLicesend: this.props.user.user.applicationFeatures.findIndex(a => a.Action === this.props.capIQ.capIQAction) > -1 ? true : false })\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.spendDetails.industryGICS_Details) {\r\n this.intializeSupplierTabs(nextProps);\r\n }\r\n }\r\n\r\n intializeSupplierTabs(nextProps) {\r\n let filters = nextProps.spendDetails.industryGICS_Details.industryData.filters;\r\n const tabs = this.state.isCapIQLicesend ? [\r\n {\r\n id: 1,\r\n label: this.props.content.industryScopeandMatch,\r\n component: (\r\n {/* \r\n \r\n */}\r\n\r\n {data[index].KPI === 'Top 25 Classified Suppliers' || data[index].KPI === 'Top 25 Unclassified Suppliers' ?\r\n\r\n \r\n this.showSupplierDrilldownModal(data[index].DATA_COLLECTIONS_SKEY, data[index].CAPIQ_ID, data[index].PARENT_CAPIQ_ID)}>{data[index].NAME}\r\n this.showSupplierIndustriesModal(data[index], data[index].INDUSTRY_ID, data[index].L4_INDUSTRY_NAME, 4)}>{data[index].L4_INDUSTRY_NAME !== \"\" && data[index].L4_INDUSTRY_NAME !== undefined ? \" : \" + data[index].L4_INDUSTRY_NAME : null}\r\n :\r\n \r\n this.showSupplierIndustriesModal(data[index], data[index].INDUSTRY_ID, data[index].NAME, 4)}>{data[index].NAME}\r\n {data[index].L4_INDUSTRY_NAME !== \"\" && data[index].L4_INDUSTRY_NAME !== undefined ? \" : \" + data[index].L4_INDUSTRY_NAME : null}\r\n \r\n }\r\n \r\n {this.state.dimension.toLowerCase() === this.props.content.dimension[1].toLowerCase() ? null\r\n : this.state.dimension.toLowerCase() === this.props.content.dimension[3].toLowerCase() ? null\r\n : this.state.currencySymbol}\r\n\r\n {this.state.dimension.toLowerCase() === this.props.content.dimension[0].toLowerCase() ? convertToMillion(data[index].INVOICE_SPEND, true)\r\n : this.state.dimension.toLowerCase() === this.props.content.dimension[1].toLowerCase() ? formatThousands(data[index].INVOICE_COUNT, false)\r\n : this.state.dimension.toLowerCase() === this.props.content.dimension[2].toLowerCase() ? convertToMillion(data[index].PO_SPEND, true)\r\n : this.state.dimension.toLowerCase() === this.props.content.dimension[3].toLowerCase() ? formatThousands(data[index].PO_COUNT, false)\r\n : convertToMillion(data[index].INVOICE_SPEND, true)}\r\n\r\n \r\n \r\n )\r\n }\r\n return a;\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n }\r\n \r\n );\r\n }\r\n\r\n open() {\r\n if(this.props.mode) {\r\n this.props.mode('zoomed')\r\n }\r\n\r\n this.setState({ open: true })\r\n }\r\n\r\n closePopUp() {\r\n this.setState({ open: false })\r\n }\r\n\r\n outsidePopupClick() {\r\n if(this.props.mode) {\r\n this.props.mode('normal')\r\n }\r\n\r\n this.setState({ open: false })\r\n }\r\n}\r\n\r\nZoomModal.propTypes = {\r\n children: PropTypes.node.isRequired,\r\n};","import React from 'react'\r\nimport { connect } from 'react-redux'\r\n\r\nimport classnames from 'classnames'\r\n\r\nimport Select from 'react-select'\r\n\r\nimport {\r\n enablementSuccess,\r\n enablementLoading,\r\n enablementFailure,\r\n resetError,\r\n getConcentrationAnalysis,\r\n getBuyProcessSummary,\r\n storeUserSpendSelection,\r\n trackUserSpendSelections\r\n} from 'actions/spendActions'\r\nimport Popup from \"reactjs-popup\";\r\nimport GroupBarScatterPlotChart from './GroupBarScatterPlotChart'\r\nimport ZoomModal from 'components/UI/ZoomModal'\r\nimport VideoHelp from 'components/UI/VideoHelp'\r\n\r\nclass ProgramEnablementAnalysis extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n focusOption: [],\r\n solutionOption: [],\r\n selectedFocus: '',\r\n selectedSolution: 'Automation Eligible',\r\n showPopup: false,\r\n enablementData: [],\r\n enablement: {\r\n DMC_ID: this.props.spendDetails.currentActiveRequest.DMC_ID,\r\n VS_ID: this.props.spendDetails.currentActiveRequest.VS_ID,\r\n User_Email: '',\r\n Solution: 'No Filter',\r\n BuyProcess: 'No Filter'\r\n },\r\n metricSpecificCol1: 'INVOICE_COUNT',\r\n metricSpecificCol2: 'MATCHED_INVOICES_COUNT',\r\n selectedBuyProcess: 'All',\r\n buyProcessOptions: [],\r\n showMatchedSuppliers: true,\r\n mode: 'normal',\r\n legendText: {\r\n invoiceText: 'Invoice Count',\r\n matchInvoiceText: 'Matched Invoices',\r\n supplierText: 'Suppliers',\r\n matchSupplierText: 'Matched Suppliers'\r\n },\r\n matchedFilter: [],\r\n selectedMatchedFilter: '',\r\n spendModule: 'Program Enablement Analysis',\r\n spendSubModule: 'Concentration analysis',\r\n }\r\n\r\n this.handleShowMatchSupplier = this.handleShowMatchSupplier.bind(this);\r\n this.zoomMode = this.zoomMode.bind(this)\r\n\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n }\r\n\r\n componentWillMount() {\r\n window.scrollTo(0, 0)\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetError();\r\n }\r\n\r\n loadData() {\r\n\r\n var array = [\r\n { label: 'Total Invoice Spend', value: 'Total Invoice Spend' },\r\n { label: 'Total Invoice Count', value: 'Total Invoice Count' },\r\n { label: 'Total Purchase Order Spend', value: 'Total Purchase Order Spend' },\r\n { label: 'Total Purchase Order Count', value: 'Total Purchase Order Count' },\r\n ]\r\n\r\n var solutionData = [\r\n { label: 'Sourcing', value: 'Sourcing' },\r\n { label: 'Buying and Invoicing', value: 'Buying and Invoicing' },\r\n { label: 'Fieldglass', value: 'Fieldglass' },\r\n { label: 'Commerce Automation (CA)', value: 'Commerce Automation' },\r\n { label: 'Supply Chain Collaboration (SCC)', value: 'Supply Chain Collaboration' },\r\n { label: 'Automation Eligible (CA & SCC)', value: 'Automation Eligible' },\r\n { label: 'Discount/SCF', value: 'Discount/SCF' },\r\n { label: 'Concur', value: 'Concur' },\r\n ]\r\n\r\n var matchFilterarray = [\r\n { label: 'Matched', value: 'Matched' },\r\n { label: 'Matched & Transacting', value: 'Matched & Transacting' },\r\n ]\r\n var target = this.props.spendDetails.userSpendFilterSelections.find((obj) => {\r\n return (obj.SpendModule === this.state.spendModule\r\n && obj.SpendSubModule === this.state.spendSubModule &&\r\n obj.CriteriaName === 'Match Filter')\r\n })\r\n var matchFilter = target.UserPreference === '' ? target.DefaultValue : target.UserPreference\r\n this.setState({\r\n focusOption: array, solutionOption: solutionData, selectedFocus: 'Total Invoice Count', selectedSolution: 'Automation Eligible', selectedBuyProcess: 'All',\r\n matchedFilter: matchFilterarray, selectedMatchedFilter: matchFilter\r\n })\r\n this.getBuyProcessSummary();\r\n this.groupScatterPlot_Data('Total Invoice Count');\r\n }\r\n\r\n groupScatterPlot_Data(metricType) {\r\n\r\n var objEnablement = this.state.enablement;\r\n objEnablement.User_Email = this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester;\r\n objEnablement.Solution = this.state.selectedSolution;\r\n objEnablement.BuyProcess = this.state.selectedBuyProcess !== \"All\" ? this.state.selectedBuyProcess : objEnablement.BuyProcess;\r\n objEnablement.MetricType = metricType;\r\n objEnablement.MatchFilter = this.state.selectedMatchedFilter;\r\n\r\n this.props.getConcentrationAnalysis(objEnablement)\r\n .then((response) => {\r\n if (response.status === 200) {\r\n\r\n this.setState({ enablementData: response.data.Result },\r\n () => {\r\n this.props.enablementSuccess('')\r\n })\r\n }\r\n })\r\n .catch((exception) => {\r\n this.props.enablementFailure('')\r\n })\r\n\r\n }\r\n\r\n getBuyProcessSummary() {\r\n var objEnablement = {\r\n VS_ID: this.props.spendDetails.currentActiveRequest.VS_ID,\r\n DMC_ID: this.props.spendDetails.currentActiveRequest.DMC_ID,\r\n USER_ID: this.props.user.user.Email,\r\n }\r\n\r\n this.props.getBuyProcessSummary(objEnablement)\r\n .then((response) => {\r\n this.props.enablementSuccess(response.data.Message)\r\n let data = response.data.Result;\r\n var array = [];\r\n var buyProcessOptions = [{ label: 'All', value: 'No Filter' }]\r\n data.forEach((element) => {\r\n var obj = {};\r\n obj.Value = element.AGGR_INV_SPEND;\r\n obj.KEY = element.SAP_ARIBA_BUY_PROCESS;\r\n array.push(obj);\r\n\r\n buyProcessOptions.push({ label: obj.KEY, value: obj.KEY })\r\n });\r\n if (response.data.Result != undefined) {\r\n buyProcessOptions.sort()\r\n this.setState({ buyProcessOptions: buyProcessOptions });\r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.enablementFailure()\r\n }\r\n else {\r\n this.props.enablementFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n\r\n\r\n\r\n handleMetricChange(value) {\r\n // To do fetch data on the of selected dimension \r\n var col1 = '';\r\n var col2 = '';\r\n var dynamicLegend = this.state.legendText;\r\n\r\n\r\n switch (value.label) {\r\n case 'Total Invoice Spend':\r\n col1 = \"INVOICE_SPEND_AMT\";\r\n col2 = \"MATCHED_INVOICE_SPEND_AMT\";\r\n dynamicLegend.invoiceText = 'Invoice Spend';\r\n dynamicLegend.matchInvoiceText = 'Matched Invoice Spend'\r\n break;\r\n\r\n case 'Total Invoice Count':\r\n col1 = \"INVOICE_COUNT\";\r\n col2 = \"MATCHED_INVOICES_COUNT\";\r\n dynamicLegend.invoiceText = 'Invoice Count';\r\n dynamicLegend.matchInvoiceText = 'Matched Invoices'\r\n break;\r\n case 'Total Purchase Order Count':\r\n col1 = \"PO_COUNT\";\r\n col2 = \"MATCHED_PO_COUNT\";\r\n dynamicLegend.invoiceText = 'PO Count';\r\n dynamicLegend.matchInvoiceText = 'Matched PO Count'\r\n break;\r\n case 'Total Purchase Order Spend':\r\n col1 = \"PO_SPEND_AMT\";\r\n col2 = \"MATCHED_PO_SPEND_AMT\";\r\n dynamicLegend.invoiceText = 'PO Spend';\r\n dynamicLegend.matchInvoiceText = 'Matched PO Spend'\r\n break;\r\n\r\n default:\r\n col1 = \"INVOICE_COUNT\";\r\n col2 = \"MATCHED_INVOICES_COUNT\";\r\n break;\r\n }\r\n this.groupScatterPlot_Data(value.label)\r\n this.setState({ selectedFocus: value.label, metricSpecificCol1: col1, metricSpecificCol2: col2, legendText: dynamicLegend });\r\n }\r\n\r\n handleBuyProcessChange(value) {\r\n this.setState({ selectedBuyProcess: value.label === \"All\" ? value.value : value.label }, () => this.groupScatterPlot_Data(this.state.selectedFocus))\r\n }\r\n\r\n handleSolutionChange(value) {\r\n this.setState({ selectedSolution: value.value }, () => this.groupScatterPlot_Data(this.state.selectedFocus))\r\n }\r\n\r\n handleShowMatchSupplier() {\r\n this.setState({ showMatchedSuppliers: !this.state.showMatchedSuppliers })\r\n }\r\n\r\n showModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n this.refs[action].hide()\r\n }\r\n\r\n zoomMode(mode) {\r\n this.setState({ mode: mode, showMatchedSuppliers: !this.state.showMatchedSuppliers }, () => this.setState({ showMatchedSuppliers: !this.state.showMatchedSuppliers }))\r\n }\r\n\r\n handleMatchedFilterChange(value) {\r\n var userEmail = this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester;\r\n var VSId = this.props.spendDetails.currentActiveRequest.VS_ID\r\n var DMCId = this.props.spendDetails.currentActiveRequest.DMC_ID\r\n this.props.storeUserSpendSelection(VSId, DMCId, this.state.spendModule, this.state.spendSubModule, 'Match Filter', value.value, userEmail)\r\n .then((response) => {\r\n this.props.trackUserSpendSelections(response.data.Result)\r\n this.setState({ selectedMatchedFilter: value.value }, () => this.groupScatterPlot_Data(this.state.selectedFocus));\r\n }).catch((error) => {\r\n this.props.enablementFailure(error.response.data.Message)\r\n })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n )\r\n\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n // language: state.language,\r\n // ui: state.content.ui,\r\n // user: state.default,\r\n user: state.default,\r\n content: state.content.spendAnalysis.enablement,\r\n validation: state.content.validation,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n enablementSuccess: message => dispatch(enablementSuccess(message)),\r\n enablementFailure: error => dispatch(enablementFailure(error)),\r\n enablementLoading: bool => dispatch(enablementLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n getConcentrationAnalysis: (data) => dispatch(getConcentrationAnalysis(data)),\r\n getBuyProcessSummary: (data) => dispatch(getBuyProcessSummary(data)),\r\n storeUserSpendSelection: (VSId, DMCId, spendModule, spendSubModule, criteriaName, selectedValue, userEmail) => dispatch(storeUserSpendSelection(VSId, DMCId, spendModule, spendSubModule, criteriaName, selectedValue, userEmail)),\r\n trackUserSpendSelections: (userSelections) => dispatch(trackUserSpendSelections(userSelections))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ProgramEnablementAnalysis)\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\n// UI\r\nimport Select from 'react-select'\r\nimport Button from 'UI/Button'\r\n// Settings\r\nimport {\r\n enablementSuccess,\r\n enablementLoading,\r\n enablementFailure,\r\n resetError,\r\n getMatchedSupplier,\r\n getMatchedSummary,\r\n getSupplierByReason,\r\n storeUserSpendSelection,\r\n trackUserSpendSelections\r\n} from 'actions/spendActions'\r\nimport Popup from \"reactjs-popup\";\r\nimport { convertToMillion, formatThousands } from 'utils/Utils'\r\nimport ZoomModal from 'components/UI/ZoomModal'\r\n\r\nclass AribaNetworkEnablementAnalysis extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n focusOption: [],\r\n selectedFocus: '',\r\n enablementSummary: [],\r\n targetEnterpriseSummary: [],\r\n profileTilesData: [],\r\n supplierCount: [],\r\n aribaNetworkMatched: [\r\n { label: \"Total Invoice Count\", value: [\"AGG_INV_COUNT_IN_SCOPE\", \"AGG_INV_COUNT_MATCH_SUPPLIERS\", formatThousands, \"Invoice Count\"] },\r\n { label: \"Total Invoice Spend\", value: [\"AGG_INV_SPEND_IN_SCOPE\", \"AGG_INV_SPEND_MATCH_SUPPLIERS\", convertToMillion, \"Invoice Spend\"] },\r\n { label: \"Total Purchase Order Count\", value: [\"AGG_PO_COUNT_IN_SCOPE\", \"AGG_PO_COUNT_MATCH_SUPPLIERS\", formatThousands, \"PO Count\"] },\r\n { label: \"Total Purchase Order Spend\", value: [\"AGG_PO_SPEND_IN_SCOPE\", \"AGG_PO_SPEND_MATCH_SUPPLIERS\", convertToMillion, \"PO Spend\"] },\r\n { label: \"Total Supplier Count\", value: [\"SUPPLIER_COUNT_IN_SCOPE\", \"SUPPLIER_COUNT_MATCH_SUPPLIERS\", formatThousands, \"Supplier Count\"] }\r\n ],\r\n selectedAribaNetworkMatched: [\"AGG_INV_COUNT_IN_SCOPE\", \"AGG_INV_COUNT_MATCH_SUPPLIERS\", formatThousands, \"Invoice Count\"],\r\n enablement: {\r\n DMC_ID: this.props.spendDetails.currentActiveRequest.DMC_ID,\r\n VS_ID: this.props.spendDetails.currentActiveRequest.VS_ID,\r\n User_Email: this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester,\r\n Solution: 'No Filter',\r\n BuyProcess: 'No Filter',\r\n MatchFilter: ''\r\n },\r\n aribaNetworkMatchedData: '',\r\n enablementSummary: [],\r\n supplierByReason: [],\r\n showMatchedSuppliers: true,\r\n legendText: {\r\n inScopeText: 'In-Scope Suppliers',\r\n matchSupplierText: 'Matched Suppliers'\r\n },\r\n currencySymbol: '',\r\n matchedFilter: [],\r\n selectedMatchedFilter: '',\r\n spendModule: 'Program Enablement Analysis',\r\n spendSubModule: 'Ariba Network enablement analysis'\r\n }\r\n this.handleAribaNetworkMatchedChange = this.handleAribaNetworkMatchedChange.bind(this)\r\n this.showMatchedSuppliers = this.showMatchedSuppliers.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n var matchFilterarray = [\r\n { label: 'Matched', value: 'Matched' },\r\n { label: 'Matched & Transacting', value: 'Matched & Transacting' },\r\n ]\r\n\r\n var target = this.props.spendDetails.userSpendFilterSelections.find((obj) => {\r\n return (obj.SpendModule === this.state.spendModule\r\n && obj.SpendSubModule === this.state.spendSubModule &&\r\n obj.CriteriaName === 'Match Filter')\r\n })\r\n var matchFilter = target.UserPreference === '' ? target.DefaultValue : target.UserPreference\r\n\r\n var enablementInstance = this.state.enablement;\r\n enablementInstance.MatchFilter = matchFilter;\r\n\r\n this.loadData();\r\n this.setState({\r\n selectedAribaNetworkMatched: [\"AGG_INV_COUNT_IN_SCOPE\", \"AGG_INV_COUNT_MATCH_SUPPLIERS\", formatThousands, \"Invoice Count\"],\r\n currencySymbol: this.props.spendDetails.currentActiveRequest !== undefined ? this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()] : '',\r\n matchedFilter: matchFilterarray, selectedMatchedFilter: matchFilter\r\n })\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetError();\r\n }\r\n\r\n\r\n handleAribaNetworkMatchedChange(value) {\r\n var dynamicLegend = this.state.legendText;\r\n switch (value.label) {\r\n case \"Total Invoice Count\":\r\n dynamicLegend.inScopeText = \"In-Scope Invoice Count\"\r\n dynamicLegend.matchSupplierText = \"Matched Invoice Count\"\r\n break;\r\n case \"Total Invoice Spend\":\r\n dynamicLegend.inScopeText = \"In-Scope Invoice Spend\"\r\n dynamicLegend.matchSupplierText = \"Matched Invoice Spend\"\r\n break;\r\n case \"Total Purchase Order Count\":\r\n dynamicLegend.inScopeText = \"In-Scope PO Count\"\r\n dynamicLegend.matchSupplierText = \"Matched PO Count\"\r\n break;\r\n case \"Total Purchase Order Spend\":\r\n dynamicLegend.inScopeText = \"In-Scope PO Spend\"\r\n dynamicLegend.matchSupplierText = \"Matched PO Spend\"\r\n break;\r\n case \"Total Supplier Count\":\r\n dynamicLegend.inScopeText = \"In-Scope Suppliers\"\r\n dynamicLegend.matchSupplierText = \"Matched Suppliers\"\r\n break;\r\n }\r\n this.setState({ selectedAribaNetworkMatched: value.value, legendText: dynamicLegend });\r\n }\r\n\r\n\r\n loadData() {\r\n this.props.enablementLoading(true)\r\n var objEnablement = this.state.enablement;\r\n\r\n\r\n this.props.getMatchedSupplier(objEnablement)\r\n .then((response) => {\r\n if (response.status === 200) {\r\n var matchedSupplier = response.data.Result;\r\n var new_ele = response.data.Result.reduce((pre, curr) => {\r\n return {\r\n SOLUTION_TYPE: 'Total',\r\n SUPPLIER_COUNT_IN_SCOPE: pre.SUPPLIER_COUNT_IN_SCOPE + curr.SUPPLIER_COUNT_IN_SCOPE,\r\n SUPPLIER_COUNT_MATCH_SUPPLIERS: pre.SUPPLIER_COUNT_MATCH_SUPPLIERS + curr.SUPPLIER_COUNT_MATCH_SUPPLIERS,\r\n AGG_INV_SPEND_IN_SCOPE: pre.AGG_INV_SPEND_IN_SCOPE + curr.AGG_INV_SPEND_IN_SCOPE,\r\n AGG_INV_SPEND_MATCH_SUPPLIERS: pre.AGG_INV_SPEND_MATCH_SUPPLIERS + curr.AGG_INV_SPEND_MATCH_SUPPLIERS,\r\n AGG_INV_COUNT_IN_SCOPE: pre.AGG_INV_COUNT_IN_SCOPE + curr.AGG_INV_COUNT_IN_SCOPE,\r\n AGG_INV_COUNT_MATCH_SUPPLIERS: pre.AGG_INV_COUNT_MATCH_SUPPLIERS + curr.AGG_INV_COUNT_MATCH_SUPPLIERS,\r\n AGG_PO_SPEND_IN_SCOPE: pre.AGG_PO_SPEND_IN_SCOPE + curr.AGG_PO_SPEND_IN_SCOPE,\r\n AGG_PO_SPEND_MATCH_SUPPLIERS: pre.AGG_PO_SPEND_MATCH_SUPPLIERS + curr.AGG_PO_SPEND_MATCH_SUPPLIERS,\r\n AGG_PO_COUNT_IN_SCOPE: pre.AGG_PO_COUNT_IN_SCOPE + curr.AGG_PO_COUNT_IN_SCOPE,\r\n AGG_PO_COUNT_MATCH_SUPPLIERS: pre.AGG_PO_COUNT_MATCH_SUPPLIERS + curr.AGG_PO_COUNT_MATCH_SUPPLIERS\r\n }\r\n })\r\n matchedSupplier.push(new_ele)\r\n this.setState({ aribaNetworkMatchedData: matchedSupplier },\r\n () => {\r\n this.props.enablementSuccess('')\r\n })\r\n }\r\n })\r\n .catch((exception) => {\r\n this.props.enablementFailure('')\r\n })\r\n\r\n this.props.getMatchedSummary(objEnablement)\r\n .then((response) => {\r\n if (response.status === 200) {\r\n this.setState({ enablementSummary: response.data.Result })\r\n }\r\n })\r\n .catch((exception) => {\r\n this.props.enablementFailure('')\r\n })\r\n\r\n this.props.getSupplierByReason(objEnablement)\r\n .then((response) => {\r\n if (response.status === 200) {\r\n var reasons = response.data.Result;\r\n var new_ele = response.data.Result.reduce((pre, curr) => {\r\n return {\r\n REASON: 'Total',\r\n SUPPLIER_COUNT: pre.SUPPLIER_COUNT + curr.SUPPLIER_COUNT,\r\n SPEND: pre.SPEND + curr.SPEND,\r\n INVOICES: pre.INVOICES + curr.INVOICES\r\n }\r\n })\r\n reasons.push(new_ele)\r\n this.setState({ targetEnterpriseSummary: reasons })\r\n }\r\n })\r\n .catch((exception) => {\r\n this.props.enablementFailure('')\r\n })\r\n\r\n }\r\n\r\n handleDimensionChange(value) {\r\n // To do fetch data on the of selected dimension\r\n this.setState({ dimension: value.label });\r\n }\r\n\r\n showMatchedSuppliers() {\r\n this.setState({ showMatchedSuppliers: !this.state.showMatchedSuppliers })\r\n }\r\n\r\n handleMatchedFilterChange(value) {\r\n var userEmail = this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester;\r\n var VSId = this.props.spendDetails.currentActiveRequest.VS_ID\r\n var DMCId = this.props.spendDetails.currentActiveRequest.DMC_ID\r\n this.props.storeUserSpendSelection(VSId, DMCId, this.state.spendModule, this.state.spendSubModule, 'Match Filter', value.value, userEmail)\r\n .then((response) => {\r\n this.props.trackUserSpendSelections(response.data.Result)\r\n var enablementInstance = this.state.enablement;\r\n enablementInstance.MatchFilter = value.value;\r\n this.setState({ selectedMatchedFilter: value.value }, () => this.loadData());\r\n }).catch((error) => {\r\n this.props.enablementFailure(error.response.data.Message)\r\n })\r\n }\r\n\r\n render() {\r\n var _this = this;\r\n return (\r\n \r\n \r\n {isReason ? row.REASON : row.SUMMARY_TYPE}\r\n \r\n \r\n {isReason ? (!isNaN(row.SUPPLIER_COUNT) ? (row.SUMMARY_TYPE !== undefined && row.SUMMARY_TYPE.includes('%')) ? row.SUPPLIER_COUNT + \"%\" : formatThousands(row.SUPPLIER_COUNT) : 0)\r\n : (!isNaN(row.SUPPLIERS) ? (row.SUMMARY_TYPE !== undefined && row.SUMMARY_TYPE.includes('%')) ? (row.SUPPLIERS !== null ? row.SUPPLIERS : 0) + \"%\" : formatThousands(row.SUPPLIERS) : 0)}\r\n \r\n \r\n {!isNaN(row.SPEND) ? (row.SUMMARY_TYPE !== undefined && row.SUMMARY_TYPE.includes('%')) ? (row.SPEND !== null ? row.SPEND : 0) + \"%\" : (currencySymbol !== null && currencySymbol !== undefined) ? currencySymbol + convertToMillion(row.SPEND, true) : '' + convertToMillion(row.SPEND, true) : 0}\r\n \r\n \r\n {!isNaN(row.INVOICES) ? (row.SUMMARY_TYPE !== undefined && row.SUMMARY_TYPE.includes('%')) ? (row.INVOICES !== null ? row.INVOICES : 0) + \"%\" : formatThousands(row.INVOICES) : 0}\r\n \r\n \r\n )\r\n }\r\n );\r\n return (\r\n
\" +\r\n // \"Type: \" + d3.select(this).data()[0].type + \"
\" +\r\n // \"Starts: \" + d3.select(this).data()[0].startTime1 + \"
\" +\r\n // \"Ends: \" + d3.select(this).data()[0].endTime1 + \"
\";\r\n // } else if (d3.select(this).data()[0] != undefined) {\r\n // tag = \"Task: \" + d3.select(this).data()[0].task + \"
\" +\r\n // \"Type: \" + d3.select(this).data()[0].type + \"
\" +\r\n // \"Starts: \" + d3.select(this).data()[0].startTime2 + \"
\" +\r\n // \"Ends: \" + d3.select(this).data()[0].endTime2 + \"
\";\r\n // }\r\n // var output = document.getElementById(\"tag\");\r\n\r\n // var x = this.x.animVal.getItem(this) + 25 + \"px\";\r\n // var y = d3.mouse(elements[index])[0] + 50 + \"px\";\r\n // console.log(\"top\", d3.mouse(elements[index])[0])\r\n // // var y = this.y.animVal.getItem(this) + 200 + \"px\";\r\n // // var y = d3.mouse(this)[1] + \"px\";\r\n\r\n // output.innerHTML = tag;\r\n // output.style.top = y;\r\n // output.style.left = x;\r\n // output.style.display = \"block\";\r\n // }).on('mouseout', function () {\r\n // var output = document.getElementById(\"tag\");\r\n // output.style.display = \"none\";\r\n // });\r\n\r\n innerRects.on('dblclick', function (e) {\r\n props.onDoubleClick(d3.select(this).data()[0])\r\n });\r\n\r\n //tooltipGantt code form stackedBarchart\r\n innerRects.on(\"mousemove\", function (d) {\r\n if (d3.select(this).data()[0].type !== 'No') {\r\n d3.select(this).style(\"fill\", '#4acfee');\r\n tooltipGantt\r\n .style(\"left\", d3.event.pageX - 50 + \"px\")\r\n .style(\"top\", d3.event.pageY - 70 + \"px\")\r\n .style(\"display\", \"inline-block\")\r\n .html(\r\n props.enablementOn ? \"Wave: \" + d3.select(this).data()[0].type + \"
\" + \"Enablement Recommendation: \" + d3.select(this).data()[0].task + \"
\" + \"Suppliers: \" + d3.select(this).data()[0].supplierCount_On + \"
\" + \"Unique ANIDs: \" + d3.select(this).data()[0].anIdCount_On + \"
\" + \"PO spend: \" + props.currency + convertToMillion(d3.select(this).data()[0].poSpend_On) + \"
\" + \"Invoice spend: \" + props.currency + convertToMillion(d3.select(this).data()[0].invSpend_On) + \"
\" + \"Documents: \" + formatThousands(d3.select(this).data()[0].docCount_On) + \"
\"\r\n : \"Wave: \" + d3.select(this).data()[0].type + \"
\" + \"Enablement Recommendation: \" + d3.select(this).data()[0].task + \"
\" + \"Suppliers: \" + d3.select(this).data()[0].supplierCount_Off + \"
\" + \"Unique ANIDs: \" + d3.select(this).data()[0].anIdCount_Off + \"
\" + \"PO spend: \" + props.currency + convertToMillion(d3.select(this).data()[0].poSpend_Off) + \"
\" + \"Invoice spend: \" + props.currency + convertToMillion(d3.select(this).data()[0].invSpend_Off) + \"
\" + \"Documents: \" + formatThousands(d3.select(this).data()[0].docCount_Off) + \"
\"\r\n );\r\n }\r\n })\r\n .on(\"mouseout\", function (d) {\r\n d3.select(this).style(\"fill\", props.isDefault ? color2(d3.select(this).data()[0].task) : color1(d3.select(this).data()[0].task));\r\n tooltipGantt\r\n .style(\"display\", \"none\");\r\n });\r\n\r\n // .on(\"mouseover\", function (d) {\r\n // d3.select(this).style(\"opacity\", \"0.5\");\r\n // })\r\n // .on(\"mouseout\", function (d) {\r\n // d3.select(this).style(\"opacity\", \"1\");\r\n // })\r\n\r\n // innerRects.on('mouseover', function (datum,index,elements) {\r\n // //console.log(this);\r\n // var tag = \"\";\r\n\r\n // if (d3.select(this).data()[0] != undefined && props.effort == 'Conservative') {\r\n // tag = \"Task: \" + d3.select(this).data()[0].task + \"
\" +\r\n // \"Type: \" + d3.select(this).data()[0].type + \"
\" +\r\n // \"Starts: \" + d3.select(this).data()[0].startTime1 + \"
\" +\r\n // \"Ends: \" + d3.select(this).data()[0].endTime1 + \"
\";\r\n // } else if (d3.select(this).data()[0] != undefined) {\r\n // tag = \"Task: \" + d3.select(this).data()[0].task + \"
\" +\r\n // \"Type: \" + d3.select(this).data()[0].type + \"
\" +\r\n // \"Starts: \" + d3.select(this).data()[0].startTime2 + \"
\" +\r\n // \"Ends: \" + d3.select(this).data()[0].endTime2 + \"
\";\r\n // }\r\n // var output = document.getElementById(\"tag\");\r\n\r\n // var x = (this.x.animVal.value + this.width.animVal.value / 2) + \"px\";\r\n // var y = this.y.animVal.value + 25 + \"px\";\r\n // //var y = d3.mouse(this)[1] + \"px\";\r\n // // var y = d3.mouse(elements[index])[0] - 85 + \"px\";\r\n\r\n // output.innerHTML = tag;\r\n // output.style.top = y;\r\n // output.style.left = x;\r\n // output.style.display = \"block\";\r\n // }).on('mouseout', function () {\r\n // var output = document.getElementById(\"tag\");\r\n // output.style.display = \"none\";\r\n\r\n // });\r\n }\r\n\r\n\r\n function makeGrid(theSidePad, theTopPad, w, h) {\r\n function tickFormat(date) {\r\n let month = date.getMonth();\r\n let yyyy = date.getFullYear();\r\n let year = props.year;//take current year provided by sp\r\n // if (month == 4) {\r\n // drawLine(date)\r\n // }\r\n //assuming that gannt chart will not spread over more than 10 years taking limit as 10 for below loop\r\n for (let i = 1; i < 10; i++) {\r\n if (yyyy == year && month == 0) {\r\n return ('Kick off')\r\n } else if (yyyy == year && month > 0) {\r\n return ('month ' + (month));\r\n } else if (yyyy == Number(year) + i) {\r\n return ('month ' + (month + 12 * i));\r\n }\r\n }\r\n };\r\n\r\n // function drawLine(date) {\r\n // var line = svg.append(\"line\")\r\n // .attr(\"x1\", date)\r\n // .attr(\"y1\", 0)\r\n // .attr(\"x2\", date)\r\n // .attr(\"y2\", h)\r\n // .style(\"stroke-width\", 2)\r\n // .style(\"stroke\", \"red\")\r\n // .style(\"fill\", \"none\");\r\n // }\r\n\r\n var xAxis = d3.axisBottom(timeScale)\r\n // .ticks(d3.timeDay, 1)\r\n .ticks(props.xAxisVal != null && props.xAxisVal != 'default' ? props.xAxisVal : props.effort == 'Conservative' ? props.lastMonth2 > 6 ? 12 : 6 : props.lastMonth1 > 6 ? 12 : 6)\r\n .tickSize(-h + theTopPad + 20, 0, 0)\r\n // .tickFormat(d3.timeFormat('%d %b'));\r\n // .tickFormat(d3.timeFormat('%b %Y'));\r\n .tickFormat(tickFormat);\r\n\r\n var grid = svg.append('g')\r\n .attr('class', 'grid')\r\n .attr('transform', 'translate(' + theSidePad + ', ' + (h - 50) + ')')\r\n .call(xAxis)\r\n .selectAll(\"text\")\r\n .style(\"text-anchor\", \"middle\")\r\n .attr(\"fill\", \"#000\")\r\n .attr(\"stroke\", \"none\")\r\n .attr(\"font-size\", 12)\r\n .attr(\"dy\", \"1em\")\r\n .attr(\"transform\", \"rotate(35)\")\r\n .style(\"text-anchor\", \"start\");\r\n\r\n // text label for the y axis\r\n svg.append(\"text\")\r\n .attr(\"transform\", \"rotate(-90)\")\r\n .attr(\"y\", -20)\r\n .attr(\"x\", 0 - (h / 2))\r\n .attr(\"dy\", \"1em\")\r\n .style(\"text-anchor\", \"middle\")\r\n .attr(\"font-size\", 14)\r\n .text(\"Waves\");\r\n }\r\n\r\n function vertLabels(theGap, theTopPad, theSidePad, theBarHeight, theColorScale) {\r\n var numOccurances = new Array();\r\n var prevGap = 0;\r\n\r\n for (var i = 0; i < categories.length; i++) {\r\n numOccurances[i] = [categories[i], getCount(categories[i], catsUnfiltered), categories_label[i]];\r\n }\r\n\r\n var axisText = svg.append(\"g\") //without doing this, impossible to put grid lines behind text\r\n .selectAll(\"text\")\r\n .data(numOccurances)\r\n .enter()\r\n .append(\"text\")\r\n .text(function (d) {\r\n return d[0] != 'No' && d[0] != 0 ? d[0] : '';\r\n })\r\n .attr(\"x\", 10)\r\n .attr(\"y\", function (d, i) {\r\n if (i > 0) {\r\n for (var j = 0; j < i; j++) {\r\n prevGap += numOccurances[i - 1][1];\r\n // console.log(prevGap);\r\n return d[1] * theGap / 2 + prevGap * theGap + theTopPad;\r\n }\r\n } else {\r\n return d[1] * theGap / 2 + theTopPad;\r\n }\r\n })\r\n .attr(\"font-size\", 11)\r\n .attr(\"text-anchor\", \"start\")\r\n .attr(\"cursor\", \"pointer\")\r\n .attr(\"text-height\", 14)\r\n .append(\"svg:title\")\r\n .text(function (d) { return d[2] != null ? \"Wave Description: \" + d[2] : \"Wave Description: \"});\r\n // .attr(\"fill\", function (d) {\r\n // for (var i = 0; i < categories.length; i++) {\r\n // if (d[0] == categories[i]) {\r\n // // console.log(\"true!\");\r\n // return d3.rgb(theColorScale(i)).darker();\r\n // }\r\n // }\r\n // });\r\n\r\n }\r\n\r\n\r\n\r\n //from this stackexchange question: http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript\r\n function checkUnique(arr) {\r\n var hash = {}, result = [];\r\n for (var i = 0, l = arr.length; i < l; ++i) {\r\n if (!hash.hasOwnProperty(arr[i])) { //it works with objects! in FF, at least\r\n hash[arr[i]] = true;\r\n result.push(arr[i]);\r\n }\r\n }\r\n return result;\r\n }\r\n\r\n //from this stackexchange question: http://stackoverflow.com/questions/14227981/count-how-many-strings-in-an-array-have-duplicates-in-the-same-array\r\n function getCounts(arr) {\r\n var i = arr.length, // var to loop over\r\n obj = {}; // obj to store results\r\n while (i) obj[arr[--i]] = (obj[arr[i]] || 0) + 1; // count occurrences\r\n return obj;\r\n }\r\n\r\n // get specific from everything\r\n function getCount(word, arr) {\r\n return getCounts(arr)[word] || 0;\r\n }\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n\r\n {/* )\r\n //this.props.capIQSearchTree(result)\r\n this.setState({ companyDetails: result, isLoading: false })\r\n\r\n }\r\n\r\n\r\n handleSelectionChange(value) {\r\n this.setState({ selectedOption: value });\r\n }\r\n\r\n handleCountryChange(value) {\r\n this.setState({ selectedCountry: value });\r\n }\r\n\r\n componentDidMount() {\r\n console.log('Discovery Form Props: ', this.props.contentData);\r\n var array1 = [];\r\n this.props.contentData.capIQCountryList.forEach((element) => {\r\n var obj = {};\r\n obj.label = element;\r\n obj.value = element;\r\n array1.push(obj);\r\n });\r\n console.log(this.props.doubleCapIqId)\r\n this.createCompanyProfileArray(this.props.doubleCapIqId);\r\n this.setState({ countryArray: array1, capIQId: this.props.doubleCapIqId })\r\n }\r\n \r\n componentWillUnmount() {\r\n this.props.resetError()\r\n }\r\n\r\n render() {\r\n return (\r\n {\r\n const currentColumn = worksheet.getColumn(item.key);\r\n switch(item.key){\r\n // case 'isUserDefinedRowUpdated':\r\n // currentColumn.eachCell(function(cell, rowNumber) { \r\n // cell.dataValidation={ \r\n // type: 'list',\r\n // allowBlank: false,\r\n // value: 'No',\r\n // formulae: ['\"Yes,No\"'],\r\n // showErrorMessage: true,\r\n // errorStyle: 'error',\r\n // errorTitle: 'User Selection',\r\n // error: 'Please select value from dropdown list.',\r\n // }\r\n // });\r\n // break;\r\n\r\n // case 'BUYER_SUPPLIER_RELATIONSHIP':\r\n // currentColumn.eachCell(function(cell, rowNumber) { \r\n // cell.dataValidation={ \r\n // type: 'textLength',\r\n // operator: 'lessThan',\r\n // showErrorMessage: true,\r\n // allowBlank: true,\r\n // formulae: [50],\r\n // errorStyle: 'error',\r\n // errorTitle: 'User Input',\r\n // error: 'Input text length must be less than 50',\r\n // showInputMessage: true, \r\n // promptTitle: 'User Input',\r\n // prompt: 'Input text length must be less than 50'\r\n // }\r\n // });\r\n // break;\r\n case 'SAP_ARIBA_BUY_ENABLE_MTHD_RECMD':\r\n currentColumn.eachCell(function(cell, rowNumber) { \r\n cell.dataValidation={ \r\n type: 'list',\r\n operator: 'equal',\r\n allowBlank: false, \r\n showErrorMessage: true,\r\n errorStyle: 'error',\r\n errorTitle: 'User Selection',\r\n error: 'Please select value from dropdown list.',\r\n formulae: ['$Y$2:$Y$11'],\r\n //formulae: ['\"Already Transacting,Relationship Exists,Enterprise - Supplier Dedicated Specialist (Integration & Catalog),Enterprise - Integration Ready & Catalog Candidate,Enterprise - Integration Ready Candidate,Enterprise - Integration & Catalog Candidate,Enterprise - Integration & Catalog,Enterprise - Integration Candidate,Enterprise - Integration,Enterprise - Portal & Catalog Candidate,Enterprise - Portal & Catalog,Enterprise - Portal,Managed Standard Account,On Going Standard Account,Out of Scope - Category Not Eligible\"'],\r\n }\r\n });\r\n break;\r\n case 'ONBOARDING_WORKSTREAM_DETAILS':\r\n currentColumn.eachCell(function(cell, rowNumber) { \r\n cell.dataValidation={ \r\n type: 'list',\r\n operator: 'equal',\r\n allowBlank: false,\r\n showErrorMessage: true,\r\n errorStyle: 'error',\r\n errorTitle: 'User Selection',\r\n error: 'Please select value from dropdown list.', \r\n formulae: ['\"Integration Questionnaire, Supplier Choice, Null\"'],\r\n }\r\n });\r\n break;\r\n case 'ENABLEMENT_WAVE':\r\n currentColumn.eachCell(function(cell, rowNumber) { \r\n cell.dataValidation={ \r\n type: 'list',\r\n operator: 'equal',\r\n allowBlank: false,\r\n showErrorMessage: true,\r\n errorStyle: 'error',\r\n errorTitle: 'User Selection',\r\n error: 'Please select value from dropdown list.', \r\n formulae: ['\"1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, Already Transacting, Relationship Exists, On Going Standard Account, Out of Scope, Negative spend\"'],\r\n }\r\n });\r\n break;\r\n } \r\n \r\n \r\n // Numeric column validation\r\n const numericColumn = editableHeader.filter(d=>d.isNumeric === true);\r\n numericColumn.map(item => {\r\n const currentNumColumn = worksheet.getColumn(item.key);\r\n currentNumColumn.eachCell(function(cell, rowNumber) { \r\n cell.dataValidation={ type: 'decimal',\r\n operator: 'greaterThan',\r\n formulae: [0],\r\n allowBlank: true,\r\n showErrorMessage: true,\r\n showInputMessage: true,\r\n promptTitle: 'Number',\r\n prompt: `Note: Accept only number.`,\r\n error: 'Please provide numeric value.',\r\n }\r\n });\r\n })\r\n\r\n // text with length limit column validation\r\n const textColumn = editableHeader.filter(d=>d.isTextWithLengtLimit === true);\r\n textColumn.map(item => {\r\n const currentTextColumn = worksheet.getColumn(item.key);\r\n currentTextColumn.eachCell(function(cell, rowNumber) { \r\n cell.dataValidation={ \r\n type: 'textLength',\r\n operator: 'lessThan',\r\n showErrorMessage: true,\r\n allowBlank: true,\r\n formulae: [Number(item.textLength) + 1], \r\n errorStyle: 'error',\r\n errorTitle: 'User Input',\r\n error: 'Input text length must be less than or equal to '+ item.textLength,\r\n showInputMessage: true, \r\n promptTitle: 'User Input',\r\n prompt: 'Input text length must be less than or equal to '+ item.textLength\r\n }\r\n });\r\n })\r\n\r\n // DATA_COLLECTIONS_SKEY validation\r\n const skeyColumn = nonEditableHeader.filter(d=>d.key === \"DATA_COLLECTIONS_SKEY\");\r\n skeyColumn.map(item => {\r\n const currentTextColumn = worksheet.getColumn(item.key);\r\n currentTextColumn.eachCell(function(cell, rowNumber) { \r\n cell.dataValidation={ \r\n type: 'textLength',\r\n operator: 'equal',\r\n showErrorMessage: true,\r\n allowBlank: true,\r\n formulae: [cell.value], \r\n errorStyle: 'error',\r\n errorTitle: 'User Input',\r\n error: 'Not allowed to change Skey column value.',\r\n showInputMessage: true, \r\n //promptTitle: 'User Input',\r\n prompt: `Note: Not allowed to change Skey column value.`,\r\n }\r\n });\r\n })\r\n\r\n // unlock editable column\r\n worksheet.getColumn(item.key).protection = {\r\n locked: false,\r\n hidden: false,\r\n }; \r\n\r\n })\r\n \r\n\r\n nonEditableHeader.map(item => {\r\n worksheet.getRow(1).getCell(item.key).fill = {\r\n type: 'pattern',\r\n pattern:'solid',\r\n fgColor:{ argb:'007ad9' }\r\n };\r\n worksheet.getRow(1).getCell(item.key).font = { \r\n color: { argb: 'FFFFFF' } \r\n }; \r\n });\r\n\r\n editableHeader.map(item => {\r\n worksheet.getRow(1).getCell(item.key).fill = {\r\n type: 'pattern',\r\n pattern:'solid',\r\n fgColor:{ argb:'ff8c00' }\r\n };\r\n worksheet.getRow(1).getCell(item.key).font = { \r\n color: { argb: 'FFFFFF' } \r\n }; \r\n\r\n // make header row readonly \r\n worksheet.getRow(1).getCell(item.key).protection = {\r\n locked: false,\r\n hidden: false,\r\n };\r\n\r\n // Add autofilter to all column\r\n worksheet.autoFilter = 'A1:V1';\r\n\r\n }\r\n );\r\n \r\n // to make header row frozen\r\n worksheet.views = [\r\n {state: 'frozen', ySplit: 1}\r\n ];\r\n\r\n // below column used internally \t\t\r\n worksheet.getColumn('SAP_ARIBA_DOC_PROXY').hidden = true; \r\n worksheet.getColumn('SAP_ARIBA_SPEND_PROXY').hidden = true; \r\n worksheet.getColumn('V').hidden = true; \r\n\r\n // add notes sheet\r\n let worksheet1 = workbook.addWorksheet(\"Read Me\");\r\n let columns = [];\r\n let tableColumn = {\r\n header: \"Instructions:\", \r\n width: 100\r\n }\r\n columns.push(tableColumn);\r\n worksheet1.columns = columns;\r\n\r\n for(var i=0; i<=instructions.length; i++){\r\n let cellIndex = i+2;\r\n worksheet1.getCell('A'+ cellIndex).value= instructions[i];\r\n } \r\n\r\n // add notes header\r\n worksheet1.getCell('A7').value= \"Notes:\";\r\n for(var i=0; i<=notes.length; i++){\r\n let cellIndex = i+8;\r\n worksheet1.getCell('A'+ cellIndex).value= notes[i];\r\n } \r\n \r\n //add data and file name and download\r\n workbook.xlsx.writeBuffer().then((data) => {\r\n let blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); \r\n FileSaver.saveAs(blob, fname+'.xlsx');\r\n this.setState({isSaveInProgress: false})\r\n });\r\n \r\n \r\n} \r\n\r\n handleSubmit = (e) => {\r\n //let rowData = this.state.excelData.filter(d=>d[\"Update Flag\"])\r\n let rowData = this.state.excelData\r\n\r\n // if(rowData.length == 0){\r\n // this.setState({ responseMsg: this.props.content.invalidFileSelect, isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n // return; \r\n // }else{\r\n // rowData = this.state.excelData.filter(d=>d[\"Update Flag\"].toString().toLowerCase() === \"yes\");\r\n // if(rowData.length == 0){\r\n // this.setState({ responseMsg: this.props.content.noRecordForUpdate, isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n // return; \r\n // }\r\n // }\r\n\r\n if(rowData.length == 0){\r\n this.setState({ responseMsg: this.props.content.noRecordForUpdate, isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n return; \r\n }\r\n \r\n this.setState({isLoading: true, isSaveInProgress: true})\r\n const columnDetails = ExcelUploadColumns;\r\n \r\n const recordsToInsert = [];\r\n rowData.forEach((item) => {\r\n var excelDate = item[columnDetails.filter(d=>d.field === \"USER_DATE_FIELD\")[0].screen_field_name]; \r\n var converted_date;\r\n \r\n if(isNaN(excelDate) || excelDate === \"\"){\r\n converted_date = excelDate \r\n }else{\r\n var date = new Date(Math.round((item[columnDetails.filter(d=>d.field === \"USER_DATE_FIELD\")[0].screen_field_name] - (25567 + 1)) * 86400 * 1000)); \r\n var year = date.getFullYear();\r\n var month = (1 + date.getMonth()).toString();\r\n month = month.length > 1 ? month : '0' + month;\r\n\r\n var day = date.getDate().toString();\r\n day = day.length > 1 ? day : '0' + day;\r\n converted_date = month + '/' + day + '/' + year;\r\n } \r\n \r\n const record = {\r\n VS_ID: this.props.spendDetails.currentActiveRequest.VS_ID, \r\n DMC_ID: this.props.spendDetails.currentActiveRequest.DMC_ID, \r\n USER_ID: this.props.user.user.Email,\r\n\r\n DATA_COLLECTIONS_SKEY: item[columnDetails.filter(d=>d.field === \"DATA_COLLECTIONS_SKEY\")[0].screen_field_name],\r\n USER_DEF_TEXT_FIELD_1: item[columnDetails.filter(d=>d.field === \"USER_DEF_TEXT_FIELD_1\")[0].screen_field_name],\r\n USER_DEF_TEXT_FIELD_2: item[columnDetails.filter(d=>d.field === \"USER_DEF_TEXT_FIELD_2\")[0].screen_field_name],\r\n USER_DEF_TEXT_FIELD_3: item[columnDetails.filter(d=>d.field === \"USER_DEF_TEXT_FIELD_3\")[0].screen_field_name],\r\n USER_DEF_TEXT_FIELD_4: item[columnDetails.filter(d=>d.field === \"USER_DEF_TEXT_FIELD_4\")[0].screen_field_name],\r\n USER_DEF_TEXT_FIELD_5: item[columnDetails.filter(d=>d.field === \"USER_DEF_TEXT_FIELD_5\")[0].screen_field_name],\r\n USER_DEF_NUMBERIC_FIELD_1: item[columnDetails.filter(d=>d.field === \"USER_DEF_NUMBERIC_FIELD_1\")[0].screen_field_name],\r\n USER_DEF_NUMBERIC_FIELD_2: item[columnDetails.filter(d=>d.field === \"USER_DEF_NUMBERIC_FIELD_2\")[0].screen_field_name],\r\n USER_DEF_NUMBERIC_FIELD_3: item[columnDetails.filter(d=>d.field === \"USER_DEF_NUMBERIC_FIELD_3\")[0].screen_field_name],\r\n USER_DEF_NUMBERIC_FIELD_4: item[columnDetails.filter(d=>d.field === \"USER_DEF_NUMBERIC_FIELD_4\")[0].screen_field_name],\r\n USER_DEF_NUMBERIC_FIELD_5: item[columnDetails.filter(d=>d.field === \"USER_DEF_NUMBERIC_FIELD_5\")[0].screen_field_name],\r\n\r\n BUYER_SUPPLIER_RELATIONSHIP: item[columnDetails.filter(d=>d.field === \"BUYER_SUPPLIER_RELATIONSHIP\")[0].screen_field_name],\r\n SAP_ARIBA_BUY_ENABLE_MTHD_RECMD: item[columnDetails.filter(d=>d.field === \"SAP_ARIBA_BUY_ENABLE_MTHD_RECMD\")[0].screen_field_name],\r\n ENABLEMENT_WAVE: item[columnDetails.filter(d=>d.field === \"ENABLEMENT_WAVE\")[0].screen_field_name],\r\n SAP_ARIBA_DOC_PROXY: item[columnDetails.filter(d=>d.field === \"SAP_ARIBA_DOC_PROXY\")[0].screen_field_name],\r\n SAP_ARIBA_SPEND_PROXY: item[columnDetails.filter(d=>d.field === \"SAP_ARIBA_SPEND_PROXY\")[0].screen_field_name],\r\n ENABLEMENT_WAVE_OVERRIDE : \"Override\",\r\n ENABLEMENT_RECOMMENDATION_OVERRIDE: \"Override\",\r\n \r\n USER_DATE_FIELD: converted_date,\r\n ENABLE_MTHD_RECMD_OUT_SCOPE_REASON: item[columnDetails.filter(d=>d.field === \"ENABLE_MTHD_RECMD_OUT_SCOPE_REASON\")[0].screen_field_name],\r\n ONBOARDING_WORKSTREAM_DETAILS: item[columnDetails.filter(d=>d.field === \"ONBOARDING_WORKSTREAM_DETAILS\")[0].screen_field_name]\r\n };\r\n recordsToInsert.push(record); \r\n })\r\n\r\n this.props.uploadUserDefinedFields(recordsToInsert)\r\n .then((response) => {\r\n this.props.closePopup();\r\n this.setState({ responseMsg: 'Record/s has been updated successfully', isError: 'No', isLoading: false, isSaveInProgress: false })\r\n this.props.reloadGrid();\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n //this.props.defineScopeLoading(false)\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n }\r\n else {\r\n //this.props.defineScopeLoading(false)\r\n this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n }\r\n })\r\n }\r\n\r\n render(){\r\n return(\r\n \r\n // )\r\n // } else {\r\n // result = (\r\n // )\r\n // }\r\n // this.setState({ filterDiv: result })\r\n // }\r\n\r\n filterToggle() {\r\n this.setState((previousState) => { return { filterFlag: !previousState.filterFlag } })\r\n }\r\n\r\n getValidationDiv() {\r\n const pendingRecords = this.state.pendingRecords;\r\n const warningRecords = this.state.warningRecords;\r\n const errorRecords = this.state.errorRecords;\r\n if (pendingRecords.length === 0) {\r\n this.props.pendingChanges(null)\r\n return '';\r\n } else {\r\n this.props.pendingChanges(pendingRecords)\r\n }\r\n\r\n var warningRecordSize = 0;\r\n var totalWarningRecords = []\r\n Object.values(warningRecords).forEach((item) => {\r\n totalWarningRecords = totalWarningRecords.concat(item);\r\n })\r\n var warningDiv = Object.keys(warningRecords).map((key, index) => (\r\n warningRecords[key].length !== 0 ?\r\n
Population: \" + format(data.population) + \"\")\r\n // .style(\"left\", (d3.event.pageX) + \"px\")\r\n // .style(\"top\", (d3.event.pageY - 28) + \"px\")\r\n if (props.dValue == 'AGGR_INV_SPEND') {\r\n\r\n div.html(\"Country: \" + data.name + \"
Invoice Spend: \" + (data.AGGR_INV_SPEND > 0 ? props.currency + convertToMillion(data.AGGR_INV_SPEND, true) : 'N/A') + \"\")\r\n .style(\"left\", (d3.event.pageX) + \"px\")\r\n .style(\"top\", (d3.event.pageY - 28) + \"px\")\r\n\r\n } else if (props.dValue == 'AGGR_INV_CNT') {\r\n\r\n div.html(\"Country: \" + data.name + \"
Invoice Count: \" + (data.invoiceCount > 0 ? format(data.invoiceCount) : 'N/A') + \"\")\r\n .style(\"left\", (d3.event.pageX) + \"px\")\r\n .style(\"top\", (d3.event.pageY - 28) + \"px\")\r\n\r\n } else if (props.dValue == 'AGGR_PO_SPEND') {\r\n\r\n div.html(\"Country: \" + data.name + \"
PO Spend: \" + (data.poSpend > 0 ? props.currency + convertToMillion(data.poSpend, true) : 'N/A') + \"\")\r\n .style(\"left\", (d3.event.pageX) + \"px\")\r\n .style(\"top\", (d3.event.pageY - 28) + \"px\")\r\n\r\n } else if (props.dValue == 'AGGR_PO_CNT') {\r\n\r\n div.html(\"Country: \" + data.name + \"
PO Count: \" + (data.poCount > 0 ? format(data.poCount) : 'N/A') + \"\")\r\n .style(\"left\", (d3.event.pageX) + \"px\")\r\n .style(\"top\", (d3.event.pageY - 28) + \"px\")\r\n\r\n } else {\r\n\r\n div.html(\"Country: \" + data.name + \"
Vendor Count: \" + (data.vendorCount > 0 ? format(data.vendorCount) : 'N/A') + \"\")\r\n .style(\"left\", (d3.event.pageX) + \"px\")\r\n .style(\"top\", (d3.event.pageY - 28) + \"px\")\r\n\r\n }\r\n\r\n })\r\n .on('mouseout', function (d) {\r\n // tips.hide(d);\r\n d3.select(this)\r\n .style('opacity', 0.8)\r\n .style('stroke-width', 0.3);\r\n });\r\n\r\n svg.append('path')\r\n .datum(topojson.mesh(data.features, (a, b) => a.id !== b.id))\r\n .attr('class', 'names')\r\n .attr('d', path);\r\n\r\n // legend({\r\n // color: d3.scaleSequentialLog([1, 100], d3.interpolateBlues),\r\n // title: \"Energy (joules)\",\r\n // ticks: 10,\r\n // tickFormat: \".0s\"\r\n // })\r\n props.showLoading(false)\r\n }\r\n\r\n\r\n\r\n render() {\r\n return (\r\n\r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n ui: state.content.ui,\r\n content: state.content,\r\n sccTabJsonFile: state.content.sccTab,\r\n spendDetails: state.spendDetails,\r\n pendingChanges: state.detailedFileChanges.changes,\r\n userData: state.valueStory,\r\n user: state.default,\r\n ganntTexts: state.content.ganntChartTab,\r\n enablementInsightTexts: state.content.enablementInsight,\r\n enablementWaveInputDetails: state.spendDetails.enablementWaveInputDetails,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n valueStoryCurrentMenu: (menuItem) => dispatch(valueStoryCurrentMenu(menuItem)),\r\n showValueStoryMenu: (menuItem) => dispatch(showValueStoryMenu(menuItem)),\r\n UpdateComment: requestDetails => dispatch(UpdateComment(requestDetails)),\r\n setValueStoryDmciDetails: (data) => dispatch(setValueStoryDmciDetails(data)),\r\n setResultSummaryDetails: (data) => dispatch(setResultSummaryDetails(data)),\r\n setTopDetails: (data) => dispatch(setTopDetails(data)),\r\n resetError: error => dispatch(resetError(error)),\r\n clearCurrentActiveRequest: () => dispatch(clearCurrentActiveRequest()),\r\n getCapIQDataBlank: bool => dispatch(getCapIQDataBlank(bool)),\r\n getSccLoadData: (DMCId, VSId, userEmail) => dispatch(getSccLoadData(DMCId, VSId, userEmail)),\r\n defineScopeLoading: bool => dispatch(defineScopeLoading(bool)),\r\n getSCCMasterColumnsConfiguration: () => dispatch(getSCCMasterColumnsConfiguration()),\r\n uploadSccTabData: (data) => dispatch(uploadSccTabData(data)),\r\n addSelectedColumnForScc: (DMCId, VSId, userId, Columns) => dispatch(addSelectedColumnForScc(DMCId, VSId, userId, Columns)),\r\n getSccSelectedColumn: (DMCId, VSId, userId) => dispatch(getSccSelectedColumn(DMCId, VSId, userId)),\r\n selectedEnablementWaveDetails: message => dispatch(selectedEnablementWaveDetails(message)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SccComponent)","import React, { Component } from 'react'\r\nimport { Link } from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\n\r\n// Components\r\nimport SpendTabPanel from '../../Tabs/SpendTabPanel'\r\n\r\nimport SubTabsContainer from 'components/Spend/SubTabsContainer'\r\n//import YourFileContainer from 'components/Spend/YourFileContainer'\r\nimport IndustryBreakdownContainer from 'components/Spend/IndustryBreakdown/IndustryBreakdownContainer'\r\nimport SpendFilesContainer from 'components/Spend/SpendDetails/SpendFilesContainer'\r\nimport ScopeSummaryContainer from 'components/Spend/ScopeSummary/ScopeSummaryContainer'\r\nimport {ScreenE, ReadOnlyContext} from 'UI/CustomComponents/Controls';\r\nimport WorldMapContainer from 'components/Spend/WorldMap/WorldMapContainer'\r\nimport EnablementInsightContainer from 'components/Spend/EnablementInsight/EnablementInsightContainer'\r\nimport {\r\n\tvalueStoryCurrentMenu,\r\n\tshowValueStoryMenu\r\n} from 'actions/userActions'\r\n\r\nimport { UpdateComment, redirectFromEnablementTab } from 'actions/spendActions'\r\n\r\nimport {\r\n\tsetValueStoryDmciDetails,\r\n\tsetResultSummaryDetails,\r\n\tsetTopDetails,\r\n\tresetError,\r\n\tclearCurrentActiveRequest\r\n} from 'actions/spendActions'\r\n\r\nimport {\r\n\tgetCurrentLanguage\r\n} from 'utils/Utils'\r\n\r\nimport { routes } from 'Constants'\r\nimport SpendNextStepsContainer from '../../NextSteps/SpendNextStepsContainer';\r\nimport SccComponent from '../../Scc/SccComponent';\r\n\r\nclass YourSpendContainer extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = {\r\n\t\t\ttabId: 1,\r\n\t\t\tnextButtonLabel: props.ui.next,\r\n\t\t\tlanguage: '',\r\n\t\t\tbtnDisabled: this.props.userData.VSId === undefined || this.props.userData.VSId === 0 //|| this.props.spendDetails.currentActiveRequest.DMC_ID === undefined\t\t\t\r\n\t\t}\r\n\r\n\t\tthis.dispatchTabChange = this.dispatchTabChange.bind(this)\r\n\t\tthis.intializePrioritiesTabs = this.intializePrioritiesTabs.bind(this)\r\n\t\tthis.dispatchLastButtonClick = this.dispatchLastButtonClick.bind(this)\r\n\t\tthis.handleNextButton = this.handleNextButton.bind(this)\r\n\t\tthis.actions = this.getApplicationFeatureActions()\r\n\r\n\t}\r\n\r\n getApplicationFeatureActions() {\r\n\t\tlet actions = [];\r\n\t\tlet applicationFeatures = this.props.user && this.props.user.user && this.props.user.user.applicationFeatures ? this.props.user.user.applicationFeatures : [];\r\n\t\tapplicationFeatures.map(applicationFeat => {\r\n\t\t\tactions.push(applicationFeat.Action);\r\n\t\t})\r\n\t\treturn actions;\r\n\t}\r\n\r\n\t// shouldComponentUpdate() {\r\n\t// \treturn true;\r\n\t// }\r\n\tcomponentWillReceiveProps(nextProps) {\r\n\t\t//if (this.props.spendDetails.currentActiveRequest !== nextProps.spendDetails.currentActiveRequest) {\r\n\t\tthis.intializePrioritiesTabs();\r\n\t\t//}\r\n\t\tlet language = getCurrentLanguage();\r\n\t\tif(language != this.state.language){\t\t\t\r\n\t\t\tthis.dispatchTabChange(this.state.tabId)\r\n\t\t\t//this.setState({language: language})\r\n\t\t}\r\n\r\n\t\tif ( this.props.userData !== nextProps.userData){ //&& this.props.spendDetails !== nextProps.spendDetails){\r\n\t\t\tthis.setState({ btnDisabled: nextProps.userData.VSId === undefined || nextProps.userData.VSId === 0 \r\n\t\t\t\t|| nextProps.spendDetails.currentActiveRequest === undefined || nextProps.spendDetails.currentActiveRequest === \"\" })\r\n\t\t}\r\n\t}\r\n\r\n\t// componentDidMount(){\r\n\t// \tlet language = getCurrentLanguage()\r\n\t// \tthis.setState({language: language})\r\n\t// \t//this.intializePrioritiesTabs();\r\n\t// }\r\n\t\r\n\t// static getDerivedStateFromProps(nextProps, state){\r\n\t// \tlet language = getCurrentLanguage();\r\n\t// \t//this.intializePrioritiesTabs();\r\n\r\n // if (language != state.language) {\r\n\t// \t\t//this.dispatchTabChange();\r\n // return({ language })\r\n // } \r\n\t// }\r\n\r\n\r\n\tcomponentWillUnmount(){\r\n\t\tthis.props.resetError();\r\n\t\tif(this.props.userData.VSId === undefined || this.props.userData.VSId === 0)\r\n\t\t{\r\n\t\tthis.props.clearCurrentActiveRequest();\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentDidMount() {\t\t\r\n\t\t//calling this to reset tab value to 1 after redirect\r\n\t\tthis.props.redirectFromEnablementTab(false)\r\n\t\tlet flag = localStorage.getItem('enablementInsightFlag')\r\n\t\tif(flag === \"true\"){\r\n\t\t\tthis.setState({ enablementInsightFlag: true })\r\n\t\t}else{\r\n\t\t\tthis.setState({ enablementInsightFlag: false })\r\n\t\t}\r\n\t}\r\n\r\n\tintializePrioritiesTabs() {\r\n\t\tconst tabs = this.state.enablementInsightFlag ? [\r\n\t\t\t{\r\n\t\t\t\tid: 1,\r\n\t\t\t\tlabel: this.props.content.spendAnalysis.yourFile.title,\r\n\t\t\t\tcomponent: ()\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\tid: 2,\r\n\t\t\t\tlabel: this.props.content.spendAnalysis.detailedFile.title,\r\n\t\t\t\tcomponent:\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{(readOnly) => (\r\n\t\t\t\t\t\t\t \r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\tid: 3,\r\n\t\t\t\tlabel: this.props.enablementInsightTexts.title,\r\n\t\t\t\tcomponent: (\r\n\t\t\t\t\t{(readOnly) => (\r\n\t\t\t\t\t\r\n\t\t\t\t\t)}\r\n\t\t\t\t \r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\tid: 5,\r\n\t\t\t\tlabel: this.props.enablementInsightTexts.title,\r\n\t\t\t\tcomponent: (\r\n\t\t\t\t \r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tui: state.content.ui,\r\n\t\tcontent: state.content,\r\n\t\tspendDetails: state.spendDetails,\r\n\t\tpendingChanges: state.detailedFileChanges.changes,\r\n\t\tuserData: state.valueStory,\r\n\t\tuser: state.default,\r\n\t\tganntTexts: state.content.ganntChartTab,\r\n\t\tenablementInsightTexts: state.content.enablementInsight\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tvalueStoryCurrentMenu: (menuItem) => dispatch(valueStoryCurrentMenu(menuItem)),\r\n\t\tshowValueStoryMenu: (menuItem) => dispatch(showValueStoryMenu(menuItem)),\r\n\t\tUpdateComment: requestDetails => dispatch(UpdateComment(requestDetails)),\r\n\t\tsetValueStoryDmciDetails: (data) => dispatch(setValueStoryDmciDetails(data)),\r\n\t\tsetResultSummaryDetails: (data) => dispatch(setResultSummaryDetails(data)),\r\n\t\tsetTopDetails: (data) => dispatch(setTopDetails(data)),\r\n\t\tresetError: error => dispatch(resetError(error)),\r\n\t\tclearCurrentActiveRequest: () => dispatch(clearCurrentActiveRequest()),\r\n\t\tredirectFromEnablementTab: (flag) => dispatch(redirectFromEnablementTab(flag))\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(YourSpendContainer)","import React, { Component } from 'react'\r\nimport { Link } from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\n\r\n// Components\r\nimport SpendTabPanel from '../../Tabs/SpendTabPanel'\r\n\r\nimport SubTabsContainer from 'components/Spend/SubTabsContainer'\r\nimport IndustryBreakdownContainer from 'components/Spend/IndustryBreakdown/IndustryBreakdownContainer'\r\nimport SpendFilesContainer from 'components/Spend/SpendDetails/SpendFilesContainer'\r\nimport ScopeSummaryContainer from 'components/Spend/ScopeSummary/ScopeSummaryContainer'\r\nimport { ScreenE, ReadOnlyContext } from 'UI/CustomComponents/Controls';\r\nimport WorldMapContainer from 'components/Spend/WorldMap/WorldMapContainer'\r\nimport EnablementInsightContainer from 'components/Spend/EnablementInsight/EnablementInsightContainer'\r\n\r\nimport {\r\n\tvalueStoryCurrentMenu,\r\n\tshowValueStoryMenu\r\n} from 'actions/userActions'\r\n\r\nimport { UpdateComment } from 'actions/spendActions'\r\n\r\nimport {\r\n\tsetValueStoryDmciDetails,\r\n\tsetResultSummaryDetails,\r\n\tsetTopDetails,\r\n\tresetError,\r\n\tclearCurrentActiveRequest,\r\n\tgetCapIQDataBlank,\r\n\tredirectFromEnablementTab\r\n} from 'actions/spendActions'\r\n\r\nimport {\r\n\tgetCurrentLanguage\r\n} from 'utils/Utils'\r\n\r\nimport { routes } from 'Constants'\r\nimport SpendNextStepsContainer from '../../NextSteps/SpendNextStepsContainer';\r\nimport classNames from \"classnames\";\r\nimport SccComponent from '../../Scc/SccComponent';\r\n\r\n\r\n\r\nclass DiscoveryAndYourSpendContainer extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = {\r\n\t\t\ttabId: 1,\r\n\t\t\tnextButtonLabel: props.ui.next,\r\n\t\t\tlanguage: '',\r\n\t\t\tbtnDisabled: this.props.userData.VSId === undefined || this.props.userData.VSId === 0\r\n\t\t}\r\n\r\n\t\tthis.dispatchTabChange = this.dispatchTabChange.bind(this)\r\n\t\tthis.intializePrioritiesTabs = this.intializePrioritiesTabs.bind(this)\r\n\t\tthis.dispatchLastButtonClick = this.dispatchLastButtonClick.bind(this)\r\n\t\tthis.handleNextButton = this.handleNextButton.bind(this)\r\n\t\tthis.actions = this.getApplicationFeatureActions()\r\n\t\t//this.redirectFromWizard = this.redirectFromWizard.bind()\r\n\r\n\t}\r\n\r\n\r\n\r\n\t// shouldComponentUpdate() {\r\n\t// \treturn true;\r\n\t// }\r\n\tcomponentWillReceiveProps(nextProps) {\r\n\t\t//if (this.props.spendDetails.currentActiveRequest !== nextProps.spendDetails.currentActiveRequest) {\r\n\t\tthis.intializePrioritiesTabs();\r\n\t\t//}\r\n\t\tlet language = getCurrentLanguage();\r\n\t\tif (language != this.state.language) {\r\n\t\t\tthis.dispatchTabChange(this.state.tabId)\r\n\t\t\t//this.setState({language: language})\r\n\t\t}\r\n\r\n\t\tif (this.props !== nextProps) { //&& this.props.spendDetails !== nextProps.spendDetails){\r\n\t\t\tif (nextProps.userData.VSId === undefined || nextProps.userData.VSId === 0 || nextProps.userData.ValueStoryName === \"\"\r\n\t\t\t\t|| nextProps.userData.Industry === 0 || nextProps.userData.Industry === \"\" || nextProps.userData.Organization === \"\"\r\n\t\t\t\t|| nextProps.spendDetails.currentActiveRequest === undefined || nextProps.spendDetails.currentActiveRequest === \"\") {\r\n\t\t\t\tthis.setState({ btnDisabled: true })\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentWillUnmount() {\r\n\t\tthis.props.resetError();\r\n\t\tif (this.props.userData.VSId === undefined || this.props.userData.VSId === 0) {\r\n\t\t\tthis.props.clearCurrentActiveRequest();\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\t//calling this to reset tab value to 1 after redirect\r\n\t\tthis.props.redirectFromEnablementTab(false)\r\n\t\tlet flag = localStorage.getItem('enablementInsightFlag')\r\n\t\tif (flag == \"true\") {\r\n\t\t\tthis.setState({ enablementInsightFlag: true })\r\n\t\t} else {\r\n\t\t\tthis.setState({ enablementInsightFlag: false })\r\n\t\t}\r\n\t}\r\n\r\n\tintializePrioritiesTabs() {\r\n\t\tconst tabs = this.state.enablementInsightFlag ? [\r\n\t\t\t{\r\n\t\t\t\tid: 1,\r\n\t\t\t\tlabel: this.props.content.spendAnalysis.yourFile.title,\r\n\t\t\t\tcomponent: (\r\n\t\t\t\t\t\t{(readOnly) => (\r\n\t\t\t\t\t\t\t \r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\tid: 3,\r\n\t\t\t\tlabel: this.props.enablementInsightTexts.title,\r\n\t\t\t\tcomponent: (\r\n\t\t\t\t\t\t{(readOnly) => (\r\n\t\t\t\t\t\t\t \r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\tid: 5,\r\n\t\t\t\tlabel: this.props.enablementInsightTexts.title,\r\n\t\t\t\tcomponent: (\r\n\t\t\t\t \r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tui: state.content.ui,\r\n\t\tcontent: state.content,\r\n\t\tspendDetails: state.spendDetails,\r\n\t\tpendingChanges: state.detailedFileChanges.changes,\r\n\t\tuserData: state.valueStory,\r\n\t\tuser: state.default,\r\n\t\tganntTexts: state.content.ganntChartTab,\r\n\t\tenablementInsightTexts: state.content.enablementInsight\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tvalueStoryCurrentMenu: (menuItem) => dispatch(valueStoryCurrentMenu(menuItem)),\r\n\t\tshowValueStoryMenu: (menuItem) => dispatch(showValueStoryMenu(menuItem)),\r\n\t\tUpdateComment: requestDetails => dispatch(UpdateComment(requestDetails)),\r\n\t\tsetValueStoryDmciDetails: (data) => dispatch(setValueStoryDmciDetails(data)),\r\n\t\tsetResultSummaryDetails: (data) => dispatch(setResultSummaryDetails(data)),\r\n\t\tsetTopDetails: (data) => dispatch(setTopDetails(data)),\r\n\t\tresetError: error => dispatch(resetError(error)),\r\n\t\tclearCurrentActiveRequest: () => dispatch(clearCurrentActiveRequest()),\r\n\t\tgetCapIQDataBlank: bool => dispatch(getCapIQDataBlank(bool)),\r\n\t\tredirectFromEnablementTab: (flag) => dispatch(redirectFromEnablementTab(flag)),\r\n\t\t//redirectFromWizard: (flag) => dispatch(redirectFromWizard(flag))\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DiscoveryAndYourSpendContainer)","import React from 'react'\r\nimport { Link } from 'react-router-dom'\r\nimport PropTypes from 'prop-types'\r\n\r\n// Utils\r\nimport classnames from 'classnames'\r\nimport { path } from 'Constants'\r\n\r\nconst ValueMenuItems = (props) => {\r\n\tvar showMenuItem = props.user !== null &&\r\n\t\t\t\t\t\tprops.user !== undefined &&\r\n\t\t\t\t\t\tprops.user.applicationFeatures !== null &&\r\n\t\t\t\t\t\tprops.user.applicationFeatures !== '' &&\r\n\t\t\t\t\t\tprops.user.applicationFeatures !== undefined ?\r\n\t\tprops.user.applicationFeatures.filter(a => a.Action === props.content.link) : []\r\n\tif (showMenuItem !== null && showMenuItem.length > 0) {\r\n\t\treturn (\r\n\r\n\t\t\t props.disabled ? e.stopPropagation() : true}\r\n\t\t\t\tto={{\r\n\t\t\t\t\tpathname: props.content.link\r\n\t\t\t\t}}>\r\n\t\t\t\t props.handleSelectedMenuItem(e, props.content.name)} onMouseEnter={(e)=> props.handleMouseEnter(e)} onMouseLeave={props.handleMouseLeave}>\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t{props.content.name} \r\n\t\t\t\t\t \r\n\t\t\t\t\r\n\t\t\t\r\n\r\n\t\t)\r\n\t}\r\n\telse {\r\n\t\treturn null;\r\n\t}\r\n}\r\n\r\nexport default ValueMenuItems\r\n\r\nValueMenuItems.defaultProps = {\r\n\taccountMenuExpanded: false,\r\n\tadminMenuExpanded: false,\r\n\tlanguageMenuExpanded: false\r\n}\r\n\r\nValueMenuItems.propTypes = {\r\n\taccountMenuExpanded: PropTypes.bool.isRequired,\r\n\thandleMenuAction: PropTypes.func.isRequired,\r\n\tadminMenuExpanded: PropTypes.func.isRequired,\r\n\tlanguageMenuExpanded: PropTypes.func.isRequired\r\n}\r\n","import React from 'react'\r\nimport { Link } from 'react-router-dom'\r\nimport PropTypes from 'prop-types'\r\n\r\n// Utils\r\nimport classnames from 'classnames'\r\nimport { path } from 'Constants'\r\n\r\nconst ValueMenuItemsExpanded = (props) => {\r\n\tvar showMenuItem = props.user !== undefined &&\r\n\t\tprops.user.applicationFeatures !== '' && props.user.applicationFeatures !== undefined ?\r\n\t\tprops.user.applicationFeatures.filter(a => a.Action === props.content.link) : []\r\n\tif (showMenuItem !== null && showMenuItem.length > 0) {\r\n\t\treturn (\r\n
\r\n ) : null\r\n }\r\n}\r\nconst mapStateToProps = state => {\r\n return {\r\n content: state.content.valueStoryMenu,\r\n form: state.discoveryForm.$form,\r\n validation: state.content.validation,\r\n user: state.default,\r\n userData: state.valueStory,\r\n newValueStory: state.isNewValueStory,\r\n currentMenuItem: state.valueStoryCurrentMenu,\r\n displayValueStoryMenu: state.showValueStoryMenu,\r\n change: state.detailedFileChanges.changes,\r\n tabMessage: state.content.spendAnalysis.detailedFile.toggleTabMessage,\r\n hoverLink : state.syncMenuAndButton\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n resetValueStory: () => dispatch(valueStoryReset()),\r\n valueStoryCurrentMenu: (menuItem) => dispatch(valueStoryCurrentMenu(menuItem)),\r\n pendingChanges: changes => dispatch(pendingChanges(changes)),\r\n syncMenuAndButton: (selectedLink) => dispatch(syncMenuAndButton(selectedLink))\r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(ValueMenuContainer)\r\n","// @flow\r\n\r\nimport React, { Component } from 'react'\r\nimport {\r\n\tMemoryRouter,\r\n\tRoute,\r\n\tSwitch,\r\n\tRedirect,\r\n\twithRouter,\r\n\tHashRouter,\r\n\tLink,\r\n\tRouter\r\n} from 'react-router-dom'\r\nimport createBrowserHistory from 'history/createBrowserHistory'\r\nimport { connect } from 'react-redux'\r\nimport ReactCSSTransitionGroup from 'react-addons-css-transition-group'\r\n\r\n// Actions\r\nimport { contentFetchData, contentPEsFetchData } from './actions/fetchContent'\r\nimport { valueStoryFetchData } from './actions/fetchValueStory'\r\nimport {\r\n\tupdateLanguage,\r\n\topenValueStory,\r\n\topenValueStorySuccess,\r\n\topenValueStoryFailure,\r\n\tautoSave,\r\n\tvalueStoryIsSaving,\r\n\tautoSaveSuccess,\r\n\tautoSaveFailure,\r\n\tresetError,\r\n\tvalidateSession,\r\n\tsignInUserSuccess,\r\n\tloadUserFromToken,\r\n\tupdateOnlineStatus,\r\n\tresetToken,\r\n\tfetchToken,\r\n\tfetchTokenLoading,\r\n\tfetchTokenSuccess,\r\n\tfetchTokenFailure\r\n} from './actions/userActions'\r\nimport { valueStoryFetchDataSuccess } from 'actions/fetchValueStory'\r\nimport { initPrioritiesItems } from 'actions/prioritiesActions'\r\nimport dotenv from 'dotenv'\r\n//import CacheBuster from 'CacheBuster'\r\n \r\n// UI\r\nimport './App.css'\r\nimport 'material-components-web/dist/material-components-web.min.css'\r\nimport { changeModalBorderStyle, changeModalBorderContentStyle, changeModalBorderRectStyle, modalStyle, modalContentStyle } from 'Constants'\r\nimport Modal from 'reboron/OutlineModal'\r\nimport Button from 'UI/Button'\r\n\r\n// Components\r\nimport NavContainer from 'Nav/NavContainer'\r\nimport MenuContainer from 'Menu/MenuContainer'\r\nimport HomeContainer from 'Home/HomeContainer'\r\nimport RegisterContainer from 'Register/RegisterContainer'\r\nimport RegisterThankYou from 'Register/RegisterThankYou'\r\nimport LoginContainer from 'Login/LoginContainer'\r\nimport ActivationContainer from 'Activation/ActivationContainer'\r\nimport ForgotPasswordContainer from 'ForgotPassword/ForgotPasswordContainer'\r\nimport ResetPasswordContainer from 'ResetPassword/ResetPasswordContainer'\r\nimport StartContainer from 'Start/StartContainer'\r\nimport DiscoveryContainer from 'Discovery/DiscoveryContainer'\r\nimport AreaOfInterestContainer from './components/AreaOfInterest/AreaOfInterestContainer'\r\nimport PrioritiesContainer from 'Priorities/PrioritiesContainer'\r\nimport BusinessCaseContainer from 'BusinessCase/BusinessCaseContainer'\r\nimport SubLeverCalculationContainer from 'SubLeverCalculation/SubLeverCalculationContainer'\r\nimport CalculateROIContainer from 'CalculateROI/CalculateROIContainer'\r\nimport NextStepsContainer from 'NextSteps/NextStepsContainer'\r\n \r\nimport BusinessValueFromSAPAribaContainer from 'BusinessValueFromSAPAriba/BusinessValueFromSAPAribaContainer'\r\nimport Loading from 'UI/Loading'\r\nimport AutoSave from 'UI/AutoSave'\r\nimport OnlineStatus from 'UI/OnlineStatus'\r\nimport Orientation from 'UI/Orientation'\r\nimport TranslateScreen from 'components/Language/TranslateScreen'\r\nimport LanguageContainer from 'components/Language/LanguageContainer'\r\nimport BenchmarkContainer from 'components/Benchmark/BenchmarkContainer'\r\nimport Carousel from 'components/Start/StartContainer'\r\nimport SkuContainer from 'components/SKU/SkuContainer'\r\nimport UserAndRoleManagerContainer from 'components/Admin/UserAndRoleManagerContainer'\r\nimport SearchContainer from 'components/Search/SearchContainer'\r\nimport SubTabsContainer from 'components/Spend/SubTabsContainer'\r\nimport YourFileContainer from 'components/Spend/YourFileContainer'\r\nimport IndustryBreakdownContainer from 'components/Spend/IndustryBreakdown/IndustryBreakdownContainer'\r\nimport SearchBar from 'components/Search/SearchBar'\r\nimport SpendFilesContainer from 'components/Spend/SpendDetails/SpendFilesContainer'\r\nimport YourSpendContainer from 'components/Spend/YourSpendFile/YourSpendContainer'\r\nimport DiscoveryAndYourSpendContainer from 'components/Spend/YourSpendFile/DiscoveryAndYourSpendContainer'\r\nimport ValueMenuContainer from './components/ValueStoryMenu/ValueMenuContainer';\r\nimport GICSAdminController from './components/GICSAdmin/GICSAdminController';\r\nimport ReleaseContainer from './components/ReleaseNotification/ReleaseContainer';\r\nimport SpendParameter from 'components/Admin/SpendParametersContainer'\r\nimport VideoManagerContainer from 'components/Admin/VideoManagerContainer'\r\nimport CountryLookup from 'components/Admin/CountryLookup'\r\nimport EnablementParameters from 'components/Admin/EnablementParameters'\r\nimport Terms from 'components/Login/Terms'\r\nimport ANIDManager from 'components/Admin/ANIDManager'\r\n\r\n\r\n// Utils\r\nimport 'babel-polyfill'\r\nimport {\r\n\tsetCookie,\r\n\tgetCookie,\r\n\tclearLocalStorage,\r\n\tsetCurrentLanguage,\r\n\tgetCurrentLanguage,\r\n\tgetParameterByName\r\n} from 'utils/Utils'\r\nimport classnames from 'classnames'\r\n\r\n// Needed for \r\n//import injectTapEventPlugin from 'react-tap-event-plugin'\r\n\r\n// Settings\r\nimport {\r\n\troutes,\r\n\tpublicRoutes,\r\n\tpath, \r\n\tenv,\r\n\tevents,\r\n\twarnTimeout,\r\n\tlogoutTimeout\r\n} from './Constants'\r\nimport WorldMapContainer from 'components/Spend/WorldMap/WorldMapContainer'\r\n\r\nconst noHelpRoutes = [\r\n\troutes.areaOfInterest,\r\n\troutes.priorities,\r\n\troutes.businessValueFromSAPAriba,\r\n\troutes.calculateROI,\r\n\troutes.nextSteps,\r\n\troutes.start,\r\n\troutes.skus,\r\n\troutes.translateScreen,\r\n\troutes.languageManager,\r\n\troutes.userAndRoleManager,\r\n\troutes.benchmark,\r\n\troutes.carousel,\r\n\troutes.yourFile,\r\n\troutes.defineScope,\r\n\troutes.detailedFile,\r\n\troutes.searchBar,\r\n\troutes.searchContainer,\r\n\troutes.yourSpend,\r\n\troutes.gicsAdmin,\r\n\troutes.releaseContainer,\r\n\troutes.spendParameter,\r\n\troutes.videoManager,\r\n\troutes.enablementParameters,\r\n\troutes.systemReporting,\r\n\troutes.anIdManager\r\n]\r\n\r\nconst noAutoSave = [\r\n\troutes.translateScreen,\r\n\troutes.languageManager,\r\n\troutes.userAndRoleManager,\r\n\t//routes.yourSpend,\r\n\troutes.searchBar,\r\n\troutes.searchContainer,\r\n\troutes.gicsAdmin,\r\n\troutes.releaseContainer,\r\n\troutes.spendParameter,\r\n\troutes.videoManager,\r\n\troutes.enablementParameters,\r\n\troutes.systemReporting,\r\n\troutes.anIdManager\r\n]\r\n\r\nlet customHistory = createBrowserHistory()\r\nconst publicRoutes_new = publicRoutes;\r\nconst MenuWithRouter = withRouter(MenuContainer)\r\nconst ValueMenuWithRouter = withRouter(ValueMenuContainer)\r\nconst NavWithRouter = withRouter(NavContainer)\r\n\r\nlet autoSaveTimer,\r\n\tautoSaveInterval = 30000,\r\n\tmessageDuration = 2000,\r\n\tonline = null\r\n\r\nvar bredCrumbVisible = false;\r\n\r\nexport class App extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t\t//this.location = ''\r\n\t\tthis.showMenu = this.showMenu.bind(this)\r\n\t\tthis.hideMenu = this.hideMenu.bind(this)\r\n\t\tthis.showLanguageSelector = this.showLanguageSelector.bind(this)\r\n\t\tthis.hideLanguageSelector = this.hideLanguageSelector.bind(this)\r\n\t\tthis.handleLanguageSelection = this.handleLanguageSelection.bind(this)\r\n\t\tthis.autoSave = this.autoSave.bind(this)\r\n\t\tthis.startInterval = this.startInterval.bind(this)\r\n\t\tthis.stopInterval = this.stopInterval.bind(this)\r\n\t\tthis.createSessionInfo = this.createSessionInfo.bind(this)\r\n\t\tthis.validateSession = this.validateSession.bind(this)\r\n\t\tthis.setSessionState = this.setSessionState.bind(this)\r\n\t\tthis.dispatchOpenValueStory = this.dispatchOpenValueStory.bind(this)\r\n\t\tthis.setCurrentPath = this.setCurrentPath.bind(this)\r\n\t\tthis.getCurrentPath = this.getCurrentPath.bind(this)\r\n\t\tthis.updateIndicator = this.updateIndicator.bind(this)\r\n\t\tthis.loadContent = this.loadContent.bind(this)\r\n\t\tthis.publicRoutes = this.publicRoutes;\r\n\t\tthis.loadPEsContent = this.loadPEsContent.bind(this)\r\n\t\tthis.showModal = this.showModal.bind(this)\r\n\t\tthis.expiredAlertOnOk = this.expiredAlertOnOk.bind(this)\r\n\t\tthis.renewSession = this.renewSession.bind(this)\r\n\t\tthis.logoutUser = this.logoutUser.bind(this)\r\n\t\tthis.warn = this.warn.bind(this);\r\n\t\tthis.resetTimeout = this.resetTimeout.bind(this);\r\n\t\tthis.tokenScheduler = this.tokenScheduler.bind(this)\r\n\t\tthis.userClock = this.userClock.bind(this)\r\n\t\tthis.renewalFunc = this.renewalFunc.bind(this)\r\n\t\tthis.setActivityMonitor = this.setActivityMonitor.bind(this)\r\n\t\tthis.clearActivityMonitor = this.clearActivityMonitor.bind(this)\r\n\t\tthis.actions = this.getApplicationFeatureActions.bind(this)\r\n\r\n\t\tthis.state = {\r\n\t\t\tmenuVisible: false,\r\n\t\t\tlanguageSelectorVisible: false,\r\n\t\t\tcurrentLang: 'ENGLISH',\r\n\t\t\tsession: false,\r\n\t\t\tsessionChecked: false,\r\n\t\t\tcode: null,\r\n\t\t\thref: window.location.href,\r\n\t\t\ttimeoutCounter: 300,\r\n\t\t\trenewalCounter: 0,\r\n\t\t}\r\n\r\n\t\tthis.tokenScheduler();\r\n\t}\r\n\r\n\ttokenScheduler() {\r\n\t\tsetInterval(()=> \r\n\t\t\t{\r\n\t\t\t\tconst pathname = this.getCurrentPath();\r\n\t\t\t\tvar init = pathname !== routes.home && pathname !== routes.login\r\n\t\t\t\tif(init && !this.initialIterationStart) {\r\n\t\t\t\t\tevents.forEach(event => window.addEventListener(event, this.resetTimeout))\r\n\t\t\t\t\tthis.setAppTimeout();\r\n\t\t\t\t\tthis.setActivityMonitor()\r\n\t\t\t\t\tthis.initialIterationStart = true;\r\n\t\t\t\t\tthis.initialIterationEnd = false;\r\n\t\t\t\t} else if((!this.props.user.user && !this.initialIterationEnd)) {\r\n\t\t\t\t\tthis.clearAppTimeout();\r\n\t\t\t\t\tthis.clearActivityMonitor()\r\n\t\t\t\t\tevents.forEach(event => window.removeEventListener(event, this.resetTimeout))\r\n\t\t\t\t\tthis.initialIterationStart = false;\r\n\t\t\t\t\tthis.initialIterationEnd = true\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t, 1000)\r\n\t}\r\n\r\n\tsetActivityMonitor() {\r\n\t\tthis.renewalCnt = setInterval(this.renewalFunc, 1000)\r\n\t}\r\n\r\n\tclearActivityMonitor() {\r\n\t\tthis.setState({renewalCounter: 0})\r\n\t\tif(this.renewalCnt) clearInterval(this.renewalCnt)\r\n\t}\r\n\r\n\trenewalFunc() {\r\n\t\tif(this.state.renewalCounter * 1000 === (warnTimeout + 5 * 60 * 1000)) {\r\n\t\t\tthis.renewToken('renew');\r\n\t\t\tthis.setState({renewalCounter: 0})\r\n\t\t} else if(this.state.renewalCounter <= logoutTimeout){\r\n\t\t\tthis.setState((previousState) => { return {renewalCounter: previousState.renewalCounter + 1}})\r\n\t\t}\r\n\t}\r\n\r\n\tsetAppTimeout() {\r\n\t\tthis.warnTimeout = setTimeout(this.warn, warnTimeout);\r\n\t\tthis.logoutTimeout = setTimeout(this.logout, logoutTimeout);\r\n\t}\r\n\r\n\tclearAppTimeout() {\r\n\t\tif (this.warnTimeout) clearTimeout(this.warnTimeout);\r\n\t\tif (this.logoutTimeout) clearTimeout(this.logoutTimeout);\r\n\t}\r\n\r\n\tresetTimeout() {\r\n\t\tthis.clearAppTimeout();\r\n\t\tthis.setAppTimeout();\r\n\t}\r\n\t\r\n\twarn() {\r\n\t\tthis.clearActivityMonitor();\r\n\t\tthis.showModal(\"expiredAlert\");\r\n\t\tthis.setClock();\r\n\t}\r\n\r\n\tsetClock() {\r\n\t\tthis.intervalClock = setInterval(this.userClock\r\n\t\t, 1000)\r\n\t}\r\n\r\n\tuserClock() {\r\n\t\tthis.setState((previousState) => { \r\n\t\t\treturn {timeoutCounter: previousState.timeoutCounter === 0 ? previousState.timeoutCounter: previousState.timeoutCounter - 1}}, \r\n\t\t\t()=> {\r\n\t\t\tif(this.state.timeoutCounter === 0) {\r\n\t\t\t\tthis.clearClock();\r\n\t\t\t\tthis.expiredAlertOnOk('expiredAlert');\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\tclearClock() {\r\n\t\tif (this.intervalClock) {\r\n\t\t\tclearInterval(this.intervalClock);\r\n\t\t\tthis.setState({timeoutCounter: 300})\r\n\t\t}\r\n\t}\r\n\r\n\tshowModal(action) {\r\n\t\tif(this.refs[action])\r\n \tthis.refs[action].show()\r\n\t}\r\n\t\r\n expiredAlertOnOk(action) {\r\n\t\tthis.refs[action].hide()\r\n\t\tthis.clearClock()\r\n\t\tthis.logoutUser();\r\n\t}\r\n\r\n\trenewSession(action) {\r\n\t\tthis.refs[action].hide()\r\n\t\tthis.clearClock()\r\n\t\tthis.setActivityMonitor();\r\n\t\tthis.renewToken('renew');\r\n\t}\r\n\r\n\trenewToken(e) {\r\n\t\tif(!(e === 'renew' || e === 'backdrop')) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\t//var content = this.props.content;\r\n\t\tconst email = this.props.user.user.Email\r\n\t\tconst token = localStorage.getItem('jwtToken')\r\n\r\n\t\tif (email && token) {\r\n\t\t\tlet formValues = {\r\n\t\t\t\tToken: token,\r\n\t\t\t\tEmail: email\r\n\t\t\t}\r\n\r\n\t\tthis.props.fetchToken(formValues)\r\n\t\t\t.then((result) => {\r\n\t\t\t\tthis.props.fetchTokenSuccess(result);\r\n\t\t\t\t// Store JWT Token\r\n\t\t\t\tlocalStorage.setItem('jwtToken', result.data.Result)\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.message === \"Network Error\") {\r\n\t\t\t\t\tthis.props.fetchTokenFailure(\"API service is down. Please contact administrator.\")\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.props.fetchTokenFailure(error.response.data.Message);\r\n\t\t\t\t}\r\n\r\n\t\t\t\t//console.log(error.message)\r\n\t\t\t\talert('Failed to renew User Session.');\r\n\t\t\t\tthis.logoutUser();\r\n\t\t\t})\r\n\t\t}\r\n\t}\r\n\t\r\n\tlogoutUser() {\r\n\t\tthis.clearAppTimeout();\r\n\t\tevents.forEach(event => window.removeEventListener(event, this.resetTimeout))\r\n\t\tthis.props.resetToken()\r\n\t\t// Redirect to home page\r\n\t\twindow.location.href = path\r\n\t}\r\n\r\n\tshowMenu() {\r\n\t\tthis.setState({ menuVisible: true })\r\n\t}\r\n\r\n\thideMenu() {\r\n\t\tthis.state.menuVisible && this.setState({ menuVisible: false })\r\n\t}\r\n\r\n\tshowLanguageSelector() {\r\n\t\tthis.setState({ languageSelectorVisible: true })\r\n\r\n\t}\r\n\r\n\thideLanguageSelector() {\r\n\t\tthis.state.languageSelectorVisible && this.setState({ languageSelectorVisible: false })\r\n\t}\r\n\r\n\thandleLanguageSelection(text, lang) {\r\n\t\tsetCurrentLanguage(lang)\r\n\t\tthis.props.fetchData('data/' + lang + '.json', 'data/jsonDBData/BenchMarkDetails/' + 'benchmarkdetails_' + lang.toLowerCase() + '.json')\r\n\t\t\t.then(() => {\r\n\t\t\t\tthis.setState({\r\n\t\t\t\t\tcurrentLang: text\r\n\t\t\t\t})\r\n\r\n\t\t\t\tsetCurrentLanguage(lang)\r\n\r\n\t\t\t\tthis.props.updateLanguage(lang)\r\n\t\t\t\t//window.location.reload();\r\n\t\t\t})\r\n\t}\r\n\r\n\tautoSave() {\r\n\t\tlet token = localStorage.getItem('jwtToken')\r\n\t\tvar path = this.getCurrentPath();\r\n\r\n\t\tif (noAutoSave.indexOf(path) === -1 && this.props.userData.BusinessValueToYou !== null && this.props.userData.BusinessValueToYou !== undefined) {\r\n\t\t\tif (this.props.user.user && token) {\r\n\t\t\t\tif(sessionStorage.getItem('isCustomer') === 'true') {\r\n\t\t\t\t\treturn\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\tthis.validateSession()\r\n\t\t\t\t\t.then((response) => {\r\n\t\t\t\t\t\tif (response) {\r\n\t\t\t\t\t\t\tif (this.props.user.userprofile.Roles[0].indexOf(\"BusinessCaseRole\") > -1) {\r\n\t\t\t\t\t\t\t\tthis.props.valueStoryIsSaving(true)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\t//NOTE: Uncomment below line to show autosave banner on top of the screen for all roles\r\n\t\t\t\t\t\t\t\t//this.props.valueStoryIsSaving(true)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\tthis.props.autoSave(this.props.userData, this.props.user.userprofile.Roles[0].indexOf(\"BusinessCaseRole\") > -1)\r\n\t\t\t\t\t\t\t\t.then(() => {\r\n\t\t\t\t\t\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\t\t\t\t\t\tthis.props.autoSaveSuccess()\r\n\t\t\t\t\t\t\t\t\t}, messageDuration)\r\n\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t\t.catch(() => {\r\n\t\t\t\t\t\t\t\t\tthis.props.autoSaveFailure(this.props.ui.expired)\r\n\t\t\t\t\t\t\t\t\tthis.stopInterval()\r\n\t\t\t\t\t\t\t\t\tclearLocalStorage()\r\n\t\t\t\t\t\t\t\t\t//this.showModal(\"expiredAlert\")\r\n\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t})\r\n\t\t\t\t\t.catch(() => {\r\n\t\t\t\t\t\t//console.log('auto save session expired')\r\n\t\t\t\t\t\tthis.props.autoSaveFailure(this.props.ui.expired)\r\n\t\t\t\t\t\tthis.stopInterval()\r\n\t\t\t\t\t\tclearLocalStorage()\r\n\t\t\t\t\t\t//this.showModal(\"expiredAlert\")\r\n\t\t\t\t\t})\r\n\r\n\t\t\t} else {\r\n\t\t\t\t//console.log('auto save session expired')\r\n\t\t\t\tthis.props.autoSaveFailure(this.props.ui.expired)\r\n\t\t\t\tthis.stopInterval()\r\n\t\t\t\tclearLocalStorage()\r\n\t\t\t\t//this.showModal(\"expiredAlert\")\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t}\r\n\r\n\tstartInterval(user) {\r\n\t\tautoSaveTimer = setInterval(this.autoSave, autoSaveInterval)\r\n\t\tthis.createSessionInfo(user)\r\n\t}\r\n\r\n\tstopInterval() {\r\n\t\tclearInterval(autoSaveTimer)\r\n\t}\r\n\r\n\tcreateSessionInfo(nextProps) {\r\n\t\tconst sessionValues = {\r\n\t\t\tEmail: nextProps.user.user.Email,\r\n\t\t\tVSId: nextProps.userData.VSId\r\n\t\t}\r\n\r\n\t\tlocalStorage.setItem('sessionInfo', JSON.stringify(sessionValues))\r\n\t}\r\n\r\n\tvalidateSession(onLoad = false) {\r\n\t\t// Check for valid session and login user\r\n\t\tconst sessionInfo = JSON.parse(localStorage.getItem('sessionInfo'))\r\n\t\tconst token = localStorage.getItem('jwtToken')\r\n\r\n\t\tif (sessionInfo && token) {\r\n\t\t\tlet formValues = {\r\n\t\t\t\tToken: token,\r\n\t\t\t\tEmail: sessionInfo.Email\r\n\t\t\t}\r\n\r\n\t\t\treturn this.props.validateSession(formValues)\r\n\t\t\t\t.then((response) => {\r\n\r\n\t\t\t\t\t// Session valid\r\n\t\t\t\t\tif (response.data.Result) {\r\n\r\n\t\t\t\t\t\tif (onLoad) {\r\n\t\t\t\t\t\t\tthis.props.signInUserSuccess(response)\r\n\t\t\t\t\t\t\tif (sessionInfo.VSId) {\r\n\t\t\t\t\t\t\t\tthis.dispatchOpenValueStory(sessionInfo.VSId)\r\n\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\tthis.props.history.push(routes.home)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\treturn true\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t}).catch((error) => {\r\n\r\n\t\t\t\t\t// Session expired\r\n\t\t\t\t\tif (this.props.ui) {\r\n\t\t\t\t\t\tlet message = ''\r\n\t\t\t\t\t\tif(!error.response) {\r\n\t\t\t\t\t\t\tmessage = this.props.ui.expired;\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\tswitch (error.response.data.Result) {\r\n\t\t\t\t\t\t\t\tcase 1:\r\n\t\t\t\t\t\t\t\t\tmessage = this.props.ui.invalidEmail\r\n\t\t\t\t\t\t\t\t\tbreak;\r\n\t\t\t\t\t\t\t\tcase 2:\r\n\t\t\t\t\t\t\t\t\tmessage = this.props.ui.invalidToken\r\n\t\t\t\t\t\t\t\t\tbreak;\r\n\t\t\t\t\t\t\t\tcase 3:\r\n\t\t\t\t\t\t\t\t\tmessage = this.props.ui.duplicateSession\r\n\t\t\t\t\t\t\t\t\tbreak;\r\n\t\t\t\t\t\t\t\tcase 4:\r\n\t\t\t\t\t\t\t\t\tmessage = this.props.ui.sessionVerificationError\r\n\t\t\t\t\t\t\t\t\tbreak;\r\n\r\n\t\t\t\t\t\t\t\tdefault:\r\n\t\t\t\t\t\t\t\t\tmessage = this.props.ui.expired\r\n\t\t\t\t\t\t\t\t\tbreak;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tthis.props.autoSaveFailure(message)\r\n\t\t\t\t\t\tthis.stopInterval()\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\tthis.setState({ sessionChecked: true })\r\n\t\t\t\t\tclearLocalStorage()\r\n\t\t\t\t\treturn false\r\n\t\t\t\t})\r\n\t\t} else {\r\n\t\t\tthis.setState({ sessionChecked: true })\r\n\t\t\tclearLocalStorage()\r\n\t\t\treturn false\r\n\t\t}\r\n\t}\r\n\r\n\tsetSessionState(state) {\r\n\t\tthis.setState({ session: state, sessionChecked: true })\r\n\t}\r\n\r\n\tdispatchOpenValueStory(VSId) {\r\n\t\tthis.props.openValueStory(VSId, this.props.user.user.Id)\r\n\t\t\t.then((response) => {\r\n\t\t\t\t// Push value story data to store\r\n\t\t\t\tthis.props.valueStoryFetchDataSuccess(response.data.Result)\r\n\r\n\t\t\t\t// Add indexes of selected priorities to priorities array in store\r\n\t\t\t\tlet items = response.data.Result.AreaOfInterest.map((item, i) => item.Selected && i)\r\n\t\t\t\titems = items.filter((item) => item !== false)\r\n\t\t\t\tthis.props.initPrioritiesItems(items)\r\n\r\n\t\t\t\t// Render\r\n\t\t\t\tthis.setSessionState(true)\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.response !== undefined) {\r\n\t\t\t\t\tthis.props.openValueStoryFailure(error.response.data.Message)\r\n\t\t\t\t}\r\n\r\n\t\t\t})\r\n\t}\r\n\r\n\tsessionExpiredAlert() {\r\n\t\tthis.props.resetToken()\r\n\t\t\t\t\t\t// Redirect to home page\r\n\t\twindow.location.href = path\r\n\t}\r\n\r\n\tsetCurrentPath(location) {\r\n\t\tlet settings = {}\r\n\r\n\t\tif (getCookie('settings') !== '' && getCookie('settings') !== 'undefined') {\r\n\t\t\tsettings = JSON.parse(getCookie('settings'))\r\n\t\t\tsettings.location = location\r\n\t\t\tif (location === '/start') {\r\n\t\t\t\tbredCrumbVisible = true;\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tsettings.location = location\r\n\t\t}\r\n\r\n\r\n\t\t// 0.0138 is 20 minutes out of a day (1440 minutes)\r\n\t\tsetCookie('settings', JSON.stringify(settings), 1)\r\n\t}\r\n\r\n\tgetCurrentPath() {\r\n\t\tlet settings = {}\r\n\t\tconst pathname = window.location.pathname.split('/')[1]\r\n\t\tconst pathname_new = '/' + pathname;\r\n\t\tlet _publicPath = publicRoutes_new.indexOf('/' + pathname) > -1\r\n\t\tif (_publicPath) {\r\n\t\t\tcustomHistory.push(pathname_new);\r\n\t\t\tthis.setCurrentPath(pathname_new);\r\n\t\t}\r\n\t\tif (getCookie('settings') !== '' && getCookie('settings') !== 'undefined') {\r\n\t\t\tsettings = JSON.parse(getCookie('settings'))\r\n\t\t\treturn settings.location\r\n\t\t} else {\r\n\t\t\treturn routes.home\r\n\t\t}\r\n\t}\r\n\r\n\tupdateIndicator() {\r\n\t\tif (!navigator.onLine) {\r\n\t\t\tthis.props.updateOnlineStatus(navigator.onLine)\r\n\t\t\tthis.stopInterval()\r\n\t\t\tonline = false\r\n\t\t} else if (online === false) {\r\n\t\t\t// Indicate online\r\n\t\t\tonline = true\r\n\t\t\tthis.props.updateOnlineStatus(navigator.onLine)\r\n\r\n\t\t\t// Hide online indicator\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tthis.props.updateOnlineStatus(null)\r\n\t\t\t\tonline = null\r\n\t\t\t}, messageDuration)\r\n\r\n\t\t\t// if logged in\r\n\t\t\tif (this.props.userData) this.startInterval(this.props)\r\n\t\t}\r\n\t}\r\n\r\n\tonlineStatus() {\r\n\t\twindow.addEventListener('online', this.updateIndicator)\r\n\t\twindow.addEventListener('offline', this.updateIndicator)\r\n\t\tthis.updateIndicator()\r\n\t}\r\n\r\n\tloadContent() {\r\n\t\tlet language = getCurrentLanguage()\r\n\r\n\t\tif (language === undefined || language === 'undefined' || language === '') {\r\n\t\t\tlanguage = 'en'\r\n\t\t}\r\n\t\tthis.props.fetchData(path + 'data/' + language + '.json', path + 'data/jsonDBData/BenchMarkDetails/' + 'benchmarkdetails_' + language.toLowerCase() + '.json')\r\n\t}\r\n\r\n\tloadPEsContent() {\r\n\t\tthis.props.fetchPEsData(path + 'data/jsonDBData/PEs/PEs.json');\r\n\t}\r\n\r\n\r\n\tcomponentWillReceiveProps(nextProps) {\r\n\t\tif (this.props.content !== nextProps.content) {\r\n\r\n\t\t\t// Get language from cookie\r\n\t\t\tconst languageCode = getCurrentLanguage()\r\n\t\t\tconst language = nextProps.content.nav.languageSelector.find((obj) => {\r\n\t\t\t\treturn languageCode === obj.lang\r\n\t\t\t})\r\n\r\n\t\t\t// Update local state\r\n\t\t\tthis.setState({\r\n\t\t\t\tcurrentLang: language.text\r\n\t\t\t})\r\n\r\n\t\t\t// Update store\r\n\t\t\tthis.props.updateLanguage(language.lang)\r\n\t\t}\r\n\r\n\t\t// Restart auto save interval\r\n\t\t// if new value story is loaded\r\n\t\tif (nextProps.userData) {\r\n\t\t\tif (this.props.userData === null || (this.props.userData && this.props.userData.VSId !== nextProps.userData.VSId)) {\r\n\t\t\t\tthis.stopInterval()\r\n\t\t\t\tthis.startInterval(nextProps)\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\r\n\tcomponentDidMount() {\r\n\t\t//injectTapEventPlugin()\r\n\r\n\t\t// Validate existing session (if any)\r\n\t\tthis.validateSession(true);\r\n\r\n\t\tthis.onlineStatus();\r\n\r\n\t\tthis.loadContent();\r\n\r\n\t\t//this.loadPEsContent();\r\n\r\n\t\tlet code = getParameterByName('code', this.state.href);\r\n\t\tthis.setState({ code: code })\r\n\t}\r\n\r\n\tgetApplicationFeatureActions() {\r\n\t\tlet actions = [];\r\n\t\tlet applicationFeatures = this.props.user && this.props.user.user && this.props.user.user.applicationFeatures ? this.props.user.user.applicationFeatures : [];\r\n\t\tapplicationFeatures.map(applicationFeat => {\r\n\t\t\tactions.push(applicationFeat.Action);\r\n\t\t})\r\n\t\treturn actions;\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst pathname = window.location.pathname.split('/')[1]\r\n\t\tconst pathname_new = '/' + pathname;\r\n\t\tlet _publicPath = publicRoutes_new.indexOf('/' + pathname) > -1\r\n\t\tif (_publicPath) {\r\n\t\t\tcustomHistory.push(pathname_new);\r\n\t\t\tthis.setCurrentPath(pathname_new);\r\n\t\t}\r\n\t\tif (this.props.hasErrored) {\r\n\t\t\treturn \r\n
\r\n {this.props.industryNetworkStats.tabHeader}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.props.industryNetworkStats.supplierCount}
\r\n {this.state.supplierRelationshipCountData.length === 0 ? null : formatThousands(round(Number(this.state.supplierRelationshipCountData[0]['supplierCount']), 2).toFixed(0))}
\r\n \r\n
\r\n {this.props.industryNetworkStats.relationshipCount}
\r\n {this.state.supplierRelationshipCountData.length === 0 ? null : formatThousands(round(Number(this.state.supplierRelationshipCountData[0]['relationshipCount']), 2).toFixed(0))}
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {/*
\r\n )\r\n }\r\n}\r\n\r\nclass UserTable extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n };\r\n }\r\n render() {\r\n let self = this;\r\n let documentData = this.props.gridData.map(function (data) {\r\n return ( */}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n *{this.props.industryNetworkStats.statsFooter}\r\n
\r\n \r\n **{this.props.industryNetworkStats.currencyNote}\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass UserRow extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n };\r\n }\r\n render() {\r\n return (\r\n | {self.props.document} | \r\n\r\n {self.props.documentType === \"count\" ? self.props.documentCount : self.props.documentSpend} | \r\n {/* {self.props.documentType === \"count\" ?\r\nSupplier Count | : null}\r\n {self.props.documentType === \"count\" ?\r\nRelationship Count | : null} */}\r\n{self.props.l4Rank} | \r\n
|---|
\r\n {this.refs.supplierIndustries ? this.props.open ?\r\n this.refs.supplierIndustries.show() :\r\n this.refs.supplierIndustries.hide() : ''}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content.spendAnalysis.industryDrilldown.tabNames,\r\n spendDetails: state.spendDetails,\r\n user: state.default,\r\n capIQ: state.content.spendAnalysis.detailedFile\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n storeIndustryGICS_ID: (GICS_ID) => dispatch(storeIndustryGICS_ID(GICS_ID)),\r\n storeIndustryDetails: (data) => dispatch(storeIndustryDetails(data))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SupplierIndustriesPopup); ","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport moment from 'moment'\r\n// Utils\r\nimport {\r\n sortObjectArray, round, formatThousands, convertToMillion\r\n} from 'utils/Utils'\r\n// UI\r\nimport Button from 'UI/Button'\r\nimport Modal from 'reboron/OutlineModal'\r\nimport PopupButton from 'UI/PopupButton'\r\n// Settings\r\nimport { validators } from 'Constants'\r\nimport Select from 'react-select';\r\nimport SupplierDrillDownPopup from '../SupplierDrillDownPopup'\r\nimport SupplierIndustriesPopup from '../SupplierIndustriesPopup'\r\nimport { dropdownStyles } from 'react-select-css'\r\nimport {\r\n suggestedValueModalStyle,\r\n suggestedValueContentStyle,\r\n path, backdropStyle, changeModalStyle, changeModalContentStyle\r\n} from 'Constants'\r\nimport {\r\n topDetailsSuccess,\r\n topDetailsFailure,\r\n topDetailsLoading,\r\n setTopDetails,\r\n resetError,\r\n getTopDetails,\r\n storeSupplierSKEY,\r\n storeIndustryGICS_ID,\r\n trackSupplierDrillDownChanges,\r\n trackSupplierDrillDownSave,\r\n trackIndustryDrillScopeChanges\r\n} from 'actions/spendActions'\r\n\r\nimport VideoHelp from 'components/UI/VideoHelp'\r\n\r\n//import {Dropdown} from 'react-bootstrap'\r\n\r\nconst changeBackdropStyle = Object.assign({}, backdropStyle);\r\nchangeBackdropStyle.zIndex = '1050';\r\n\r\nconst alertModalStyle = Object.assign({}, changeModalStyle);\r\nalertModalStyle.zIndex = '1060';\r\n\r\nclass TopDetailsContainer extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n topDetails: '',\r\n topDetailsData: '',\r\n dimension: '',\r\n dimensionOption: [],\r\n total5Industry: '',\r\n total25Classified: '',\r\n total25UnClassified: '',\r\n currencySymbol: '',\r\n open: false,\r\n openIndustryPopup: false\r\n }\r\n this.showSupplierDrilldownModal = this.showSupplierDrilldownModal.bind(this)\r\n this.setVisibility = this.setVisibility.bind(this)\r\n this.showAlertModal = this.showAlertModal.bind(this)\r\n this.hideAlertModal = this.hideAlertModal.bind(this)\r\n this.continueNavigation = this.continueNavigation.bind(this)\r\n this.outsidePopupClick = this.outsidePopupClick.bind(this)\r\n this.showSupplierIndustriesModal = this.showSupplierIndustriesModal.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n window.scrollTo(0, 0);\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetError();\r\n }\r\n\r\n loadData() {\r\n\r\n var array = [\r\n { label: 'Total invoice spend', value: 'Total invoice spend' },\r\n { label: 'Total invoice count', value: 'Total invoice count' },\r\n { label: 'Total purchase order spend', value: 'Total purchase order spend' },\r\n { label: 'Total purchase order count', value: 'Total purchase order count' },\r\n ]\r\n\r\n this.setState({\r\n dimensionOption: array, currencySymbol: this.props.spendDetails.currentActiveRequest !== undefined ?\r\n this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()] : ''\r\n })\r\n if (this.props.spendDetails.currentActiveRequest !== undefined && this.props.spendDetails.currentActiveRequest !== '') {\r\n this.getTopDetailsData();\r\n }\r\n\r\n\r\n }\r\n\r\n getMessage(keyToFindMessage) {\r\n return this.props.content[keyToFindMessage];\r\n }\r\n\r\n getTopDetailsData() {\r\n //hardcoded id's for testing purpose. need to replace it with actual data\r\n //if (this.props.spendDetails.resultTopDetails.length === 0) {\r\n this.props.topDetailsLoading(true)\r\n var userEmail = this.props.spendDetails.currentActiveRequest !== undefined &&\r\n this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester;\r\n this.props.getTopDetails(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID, userEmail)\r\n .then((response) => {\r\n this.setState({ topDetailsData: response.data.Result, dimension: 'Total invoice spend' });\r\n this.filterTopDetailsData(response.data.Result, 'Total invoice spend')\r\n this.props.topDetailsSuccess();\r\n this.props.setTopDetails(response.data.Result);\r\n\r\n })\r\n .catch((response) => {\r\n this.props.topDetailsFailure(this.getMessage(\"notFound\"));\r\n this.props.topDetailsLoading(false)\r\n })\r\n // } else {\r\n // this.setState({ topDetailsData: this.props.spendDetails.resultTopDetails, dimension: 'Total invoice spend' });\r\n // this.filterTopDetailsData(this.props.spendDetails.resultTopDetails, 'Total invoice spend')\r\n // }\r\n }\r\n\r\n handleDimensionChange(value) {\r\n // To do fetch data on the of selected dimension\r\n this.setState({ dimension: value.label });\r\n if (this.state.topDetailsData !== undefined && this.state.topDetailsData !== '') {\r\n this.filterTopDetailsData(this.state.topDetailsData, value.label)\r\n }\r\n }\r\n\r\n filterTopDetailsData(detailsData, dimensionType) {\r\n var requiredData = [];\r\n\r\n switch (dimensionType.toLowerCase()) {\r\n case '':\r\n case 'total invoice spend':\r\n var top5 = detailsData.filter(a => a.KPI.toLowerCase() === this.props.content.kpi[0].toLowerCase())\r\n var topValues = top5.sort((a, b) => a.RANK_INVOICE_SPEND - b.RANK_INVOICE_SPEND).slice(0, 5);\r\n var sum5Industry = 0;\r\n for (let index = 0; index < topValues.length; index++) {\r\n sum5Industry = sum5Industry + topValues[index].INVOICE_SPEND;\r\n }\r\n requiredData.push(topValues.sort(sortObjectArray('RANK_INVOICE_SPEND', 'asc')));\r\n\r\n var top25Classified = detailsData.filter(a => a.KPI.toLowerCase() === this.props.content.kpi[1].toLowerCase())\r\n var top25Values = top25Classified.sort((a, b) => a.RANK_INVOICE_SPEND - b.RANK_INVOICE_SPEND).slice(0, 25);\r\n var sum25Supplier = 0;\r\n for (let index = 0; index < top25Values.length; index++) {\r\n sum25Supplier = sum25Supplier + top25Values[index].INVOICE_SPEND;\r\n }\r\n requiredData.push(top25Values.sort(sortObjectArray('RANK_INVOICE_SPEND', 'asc')));\r\n\r\n var top25UnClassified = detailsData.filter(a => a.KPI.toLowerCase() === this.props.content.kpi[2].toLowerCase())\r\n var top25UnCValues = top25UnClassified.sort((a, b) => a.RANK_INVOICE_SPEND - b.RANK_INVOICE_SPEND).slice(0, 25);\r\n var sum25UnCSupplier = 0;\r\n for (let index = 0; index < top25UnCValues.length; index++) {\r\n sum25UnCSupplier = sum25UnCSupplier + top25UnCValues[index].INVOICE_SPEND;\r\n }\r\n requiredData.push(top25UnCValues.sort(sortObjectArray('RANK_INVOICE_SPEND', 'asc')));\r\n\r\n this.setState({ total5Industry: convertToMillion(sum5Industry), total25Classified: convertToMillion(sum25Supplier), total25UnClassified: convertToMillion(sum25UnCSupplier) })\r\n break\r\n\r\n case 'total invoice count':\r\n var top5 = detailsData.filter(a => a.KPI.toLowerCase() === this.props.content.kpi[0].toLowerCase())\r\n var topValues = top5.sort((a, b) => a.RANK_INVOICE_COUNT - b.RANK_INVOICE_COUNT).slice(0, 5);\r\n var sum5Industry = 0;\r\n for (let index = 0; index < topValues.length; index++) {\r\n sum5Industry = sum5Industry + topValues[index].INVOICE_COUNT;\r\n }\r\n requiredData.push(topValues.sort(sortObjectArray('RANK_INVOICE_COUNT', 'asc')));\r\n\r\n var top25Classified = detailsData.filter(a => a.KPI.toLowerCase() === this.props.content.kpi[1].toLowerCase())\r\n var top25Values = top25Classified.sort((a, b) => a.RANK_INVOICE_COUNT - b.RANK_INVOICE_COUNT).slice(0, 25);\r\n var sum25Supplier = 0;\r\n for (let index = 0; index < top25Values.length; index++) {\r\n sum25Supplier = sum25Supplier + top25Values[index].INVOICE_COUNT;\r\n }\r\n requiredData.push(top25Values.sort(sortObjectArray('RANK_INVOICE_COUNT', 'asc')));\r\n\r\n var top25UnClassified = detailsData.filter(a => a.KPI.toLowerCase() === this.props.content.kpi[2].toLowerCase())\r\n var top25UnCValues = top25UnClassified.sort((a, b) => a.RANK_INVOICE_COUNT - b.RANK_INVOICE_COUNT).slice(0, 25);\r\n var sum25UnCSupplier = 0;\r\n for (let index = 0; index < top25UnCValues.length; index++) {\r\n sum25UnCSupplier = sum25UnCSupplier + top25UnCValues[index].INVOICE_COUNT;\r\n }\r\n requiredData.push(top25UnCValues.sort(sortObjectArray('RANK_INVOICE_COUNT', 'asc')));\r\n\r\n this.setState({ total5Industry: round(sum5Industry, 2), total25Classified: round(sum25Supplier, 2), total25UnClassified: round(sum25UnCSupplier, 2) })\r\n break\r\n\r\n case 'total purchase order spend':\r\n var top5 = detailsData.filter(a => a.KPI.toLowerCase() === this.props.content.kpi[0].toLowerCase())\r\n var topValues = top5.sort((a, b) => a.RANK_PO_SPEND - b.RANK_PO_SPEND).slice(0, 5);\r\n var sum5Industry = 0;\r\n for (let index = 0; index < topValues.length; index++) {\r\n sum5Industry = sum5Industry + topValues[index].PO_SPEND;\r\n }\r\n requiredData.push(topValues.sort(sortObjectArray('RANK_PO_SPEND', 'asc')));\r\n\r\n var top25Classified = detailsData.filter(a => a.KPI.toLowerCase() === this.props.content.kpi[1].toLowerCase())\r\n var top25Values = top25Classified.sort((a, b) => a.RANK_PO_SPEND - b.RANK_PO_SPEND).slice(0, 25);\r\n var sum25Supplier = 0;\r\n for (let index = 0; index < top25Values.length; index++) {\r\n sum25Supplier = sum25Supplier + top25Values[index].PO_SPEND;\r\n }\r\n requiredData.push(top25Values.sort(sortObjectArray('RANK_PO_SPEND', 'asc')));\r\n\r\n var top25UnClassified = detailsData.filter(a => a.KPI.toLowerCase() === this.props.content.kpi[2].toLowerCase())\r\n var top25UnCValues = top25UnClassified.sort((a, b) => a.RANK_PO_SPEND - b.RANK_PO_SPEND).slice(0, 25);\r\n var sum25UnCSupplier = 0;\r\n for (let index = 0; index < top25UnCValues.length; index++) {\r\n sum25UnCSupplier = sum25UnCSupplier + top25UnCValues[index].PO_SPEND;\r\n }\r\n requiredData.push(top25UnCValues.sort(sortObjectArray('RANK_PO_SPEND', 'asc')));\r\n this.setState({ total5Industry: convertToMillion(sum5Industry), total25Classified: convertToMillion(sum25Supplier), total25UnClassified: convertToMillion(sum25UnCSupplier) })\r\n break\r\n\r\n case 'total purchase order count':\r\n var top5 = detailsData.filter(a => a.KPI.toLowerCase() === this.props.content.kpi[0].toLowerCase())\r\n var topValues = top5.sort((a, b) => a.RANK_PO_COUNT - b.RANK_PO_COUNT).slice(0, 5);\r\n var sum5Industry = 0;\r\n for (let index = 0; index < topValues.length; index++) {\r\n sum5Industry = sum5Industry + topValues[index].PO_COUNT;\r\n }\r\n requiredData.push(topValues.sort(sortObjectArray('RANK_PO_COUNT', 'asc')));\r\n\r\n var top25Classified = detailsData.filter(a => a.KPI.toLowerCase() === this.props.content.kpi[1].toLowerCase())\r\n var top25Values = top25Classified.sort((a, b) => a.RANK_PO_COUNT - b.RANK_PO_COUNT).slice(0, 25);\r\n var sum25Supplier = 0;\r\n for (let index = 0; index < top25Values.length; index++) {\r\n sum25Supplier = sum25Supplier + top25Values[index].PO_COUNT;\r\n }\r\n requiredData.push(top25Values.sort(sortObjectArray('RANK_PO_COUNT', 'asc')));\r\n\r\n var top25UnClassified = detailsData.filter(a => a.KPI.toLowerCase() === this.props.content.kpi[2].toLowerCase())\r\n var top25UnCValues = top25UnClassified.sort((a, b) => a.RANK_PO_COUNT - b.RANK_PO_COUNT).slice(0, 25);\r\n var sum25UnCSupplier = 0;\r\n for (let index = 0; index < top25UnCValues.length; index++) {\r\n sum25UnCSupplier = sum25UnCSupplier + top25UnCValues[index].PO_COUNT;\r\n }\r\n requiredData.push(top25UnCValues.sort(sortObjectArray('RANK_PO_COUNT', 'asc')));\r\n this.setState({ total5Industry: round(sum5Industry, 2), total25Classified: round(sum25Supplier, 2), total25UnClassified: round(sum25UnCSupplier, 2) })\r\n break\r\n }\r\n this.setState({ topDetails: requiredData });\r\n }\r\n\r\n toggleDiv(ele) {\r\n this.setState({ currentKPI: ele.target.id });\r\n if (ele.target.className === \"collaps\") {\r\n ele.target.className = \"expand\"\r\n } else if (ele.target.className === \"expand\") {\r\n ele.target.className = \"collaps\"\r\n this.setState({ currentKPI: '' });\r\n }\r\n }\r\n\r\n showAlertModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideAlertModal(action) {\r\n this.refs[action].hide()\r\n }\r\n\r\n continueNavigation(action) {\r\n this.refs[action].hide()\r\n this.props.trackSupplierDrillDownChanges(false)\r\n this.props.trackIndustryDrillScopeChanges(false)\r\n if (this.props.spendDetails.supplierDrilldownSavedChanges === true) {\r\n this.props.trackSupplierDrillDownSave(false)\r\n this.setState({ open: false, openIndustryPopup: false })\r\n this.loadData()\r\n window.scrollTo(0, 0);\r\n }\r\n else {\r\n this.setState({ open: false, openIndustryPopup: false })\r\n }\r\n }\r\n\r\n showSupplierDrilldownModal(SKEY, capIQId, parentCapIQId) {\r\n var supplierDetails = { SKEY: SKEY, capIQId: capIQId, parentCapIQId: parentCapIQId }\r\n this.props.storeSupplierSKEY(supplierDetails)\r\n this.setState({\r\n open: true\r\n })\r\n }\r\n\r\n showSupplierIndustriesModal(data, SKEY, industry, level) {\r\n // var industryGICS_Details = { SKEY: SKEY, industry: industry, level: level }\r\n // this.props.storeIndustryGICS_ID(industryGICS_Details)\r\n \r\n\t\tdata['name'] = industry;\r\n\t\tvar industryGICS_Details = { SKEY: SKEY, industry: industry, level: level, industryData: { params: data, filters: {country: \"\", solution: \"No Filter\", solutionConfirmation: \"all\"} }}\r\n\t\tthis.props.storeIndustryGICS_ID(industryGICS_Details)\r\n this.setState({\r\n openIndustryPopup: true\r\n })\r\n }\r\n\r\n setVisibility(isVisible) {\r\n if (this.props.supplierDrilldownPendingChanges !== undefined && this.props.supplierDrilldownPendingChanges !== null\r\n && this.props.supplierDrilldownPendingChanges === true) {\r\n this.showAlertModal(\"alert\")\r\n } else if (this.props.industryDrillScopePendingChanges !== undefined && this.props.industryDrillScopePendingChanges !== null\r\n\t\t\t&& this.props.industryDrillScopePendingChanges === true) {\r\n\t\t\tthis.showAlertModal(\"alert\")\r\n\t\t}\r\n else {\r\n if (this.props.spendDetails.supplierDrilldownSavedChanges === true) {\r\n this.props.trackSupplierDrillDownSave(false)\r\n this.setState({ open: false, openIndustryPopup: false })\r\n this.loadData()\r\n window.scrollTo(0, 0);\r\n }\r\n else {\r\n this.setState({ open: false, openIndustryPopup: false })\r\n }\r\n }\r\n }\r\n\r\n outsidePopupClick() {\r\n this.props.trackSupplierDrillDownChanges(false)\r\n this.props.trackIndustryDrillScopeChanges(false)\r\n this.setState({ open: false, openIndustryPopup: false })\r\n }\r\n\r\n render() {\r\n var row = (instance) => {\r\n let indexCnt = 0;\r\n var temp = Object.values(instance.state.topDetails).map((data) => {\r\n indexCnt++;\r\n return (\r\n \r\n {this.props.spendDetails.industryDetails !== undefined ?\r\n
\r\n \r\n
\r\n :\r\n null}\r\n {this.props.spendDetails.industryDetails[\"header\"]}
\r\n {this.props.spendDetails.industryDetails.subHeader.map((item, index) => {\r\n let level = Number.parseInt(this.props.spendDetails.industryGICS_Details.level)\r\n if (level >= (index + 1))\r\n return this.changeIndustry(item)} style={{ fontSize: '15px', paddingTop: '3px', paddingLeft: '5px' }}>{item.name} {level !== index + 1 ? '|' : ''}\r\n\r\n return ''\r\n })\r\n }\r\n \r\n { -1\r\n || this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1) ?\r\n this.state.tabs :\r\n this.state.tabs.filter(function (value) {\r\n return (value.id !== 8) //Industry network Stats\r\n })}\r\n tabId={1}\r\n dispatchTabChange={this.dispatchTabChange}\r\n dispatchLastButtonClick={this.dispatchLastButtonClick}\r\n />}\r\n
\r\n \r\n this.callback()}\r\n modalStyle={suggestedValueModalStyle}\r\n contentStyle={suggestedValueContentStyle}>\r\n
\r\n )\r\n })\r\n return temp;\r\n }\r\n\r\n var subItems = (data, instance) => {\r\n if (data[0] !== undefined) {\r\n var a = [];\r\n var lenIndex = 1;\r\n var prevExpandeEle = document.getElementById(data[0].KPI);\r\n if (data[0].KPI === instance.state.currentKPI) {\r\n lenIndex = data.length;\r\n } else if (prevExpandeEle !== null && prevExpandeEle.className === \"expand\") {\r\n lenIndex = data.length;\r\n }\r\n\r\n for (let index = 0; index < lenIndex; index++) {\r\n a.push(\r\n \r\n
\r\n \r\n \r\n {this.props.content.allOtherMessage}\r\n
\r\n \r\n
\r\n \r\n this.refs.modal.hide()}\r\n />\r\n
\r\n \r\n {this.props.spendDetails.supplierDetails !== undefined ?\r\n
\r\n \r\n
\r\n \r\n this.callback()}\r\n >\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n {this.props.tabMessage}\r\n
\r\n \r\n
\r\n \r\n this.continueNavigation(\"alert\")}\r\n color /> \r\n this.hideAlertModal(\"alert\")}\r\n color /> \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n | \r\n {this.props.content.total + \" : \"}\r\n {this.state.dimension.toLowerCase() === this.props.content.dimension[1].toLowerCase() ? null\r\n : this.state.dimension.toLowerCase() === this.props.content.dimension[3].toLowerCase() ? null\r\n : this.state.currencySymbol}\r\n {data[0] === undefined ? 0 + (this.state.dimension.toLowerCase().includes('spend') ? 'M' : null)\r\n : data[0].KPI === this.props.content.kpi[0] ? formatThousands(this.state.total5Industry) :\r\n (data[0].KPI === this.props.content.kpi[1] ? formatThousands(this.state.total25Classified) : formatThousands(this.state.total25UnClassified))}\r\n\r\n | \r\n{data[0] === undefined ? this.props.content.kpi[indexCnt - 1] : (data[0].KPI)} | \r\n\r\n \r\n | \r\n\r\n | \r\n
\r\n
\r\n )\r\n\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n // language: state.language,\r\n // ui: state.content.ui,\r\n userData: state.valueStory,\r\n user: state.default,\r\n content: state.content.spendAnalysis.topDetails,\r\n validation: state.content.validation,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n supplierDrilldownPendingChanges: state.spendDetails.supplierDrilldownPendingChanges,\r\n industryDrillScopePendingChanges: state.spendDetails.industryDrillScopePendingChanges,\r\n tabMessage: state.content.spendAnalysis.detailedFile.toggleTabMessage\r\n\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n topDetailsSuccess: message => dispatch(topDetailsSuccess(message)),\r\n topDetailsFailure: error => dispatch(topDetailsFailure(error)),\r\n topDetailsLoading: bool => dispatch(topDetailsLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n getTopDetails: (DMC_ID, VS_ID, User_ID) => dispatch(getTopDetails(DMC_ID, VS_ID, User_ID)),\r\n setTopDetails: data => dispatch(setTopDetails(data)),\r\n storeSupplierSKEY: (SKEY) => dispatch(storeSupplierSKEY(SKEY)),\r\n trackSupplierDrillDownChanges: changes => dispatch(trackSupplierDrillDownChanges(changes)),\r\n trackSupplierDrillDownSave: message => dispatch(trackSupplierDrillDownSave(message)),\r\n storeIndustryGICS_ID: (GICS_ID) => dispatch(storeIndustryGICS_ID(GICS_ID)),\r\n trackIndustryDrillScopeChanges: bool => dispatch(trackIndustryDrillScopeChanges(bool)) \r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(TopDetailsContainer)\r\n","import React, { Component } from 'react'\r\nimport * as d3 from 'd3'\r\nimport { convertToMillion, formatThousands, convertToThousands } from 'utils/Utils'\r\nimport { uid } from 'react-uid'\r\n\r\nconst groupbarchart = (yaxiscolumnkey,yaxiscolumnkey2, xaxiscolumnkey, keys, data, elementId, leftAxisText) => {\r\n\r\n var xaxiscolumnkey = xaxiscolumnkey\r\n var yaxiscolumnkey = yaxiscolumnkey\r\n //var xaxiscolumnkey = xaxiscolumnkey\r\n var parentNode = document.getElementById(\"chart\").parentNode;\r\n var windowWidth = parentNode.clientWidth;\r\n var windowHeight = parentNode.clientHeight;\r\n var svg = d3.select(\"#\" + elementId),\r\n margin = { top: 40, right: 40, bottom: 30, left: 40 },\r\n //margin = { top: 20, right: 20, bottom: 30, left: 40 },\r\n width = windowWidth - margin.left - margin.right - margin.right,\r\n height = windowHeight - margin.left - margin.bottom,\r\n g = svg.append(\"g\").attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\r\n\r\n var x0 = d3.scaleBand()\r\n .rangeRound([0, width])\r\n .paddingInner(0.1);\r\n\r\n var x1 = d3.scaleBand()\r\n .padding(0.05);\r\n\r\n var y = d3.scaleLinear()\r\n .rangeRound([height, 0]);\r\n\r\n var y0 = d3.scaleLinear()\r\n .rangeRound([height, 0]); \r\n\r\n const rScale = d3.scaleLinear()\r\n .range([height, 0])\r\n \r\n\r\n var z = d3.scaleOrdinal()\r\n .range([\"#33c3ff\", \"#d6d4d4\"]);\r\n\r\n var data = data;\r\n var keys = keys;\r\n\r\n x0.domain(data.map(function (d) { return d[xaxiscolumnkey]; }));\r\n x1.domain(keys).rangeRound([0, x0.bandwidth()]);\r\n rScale.domain([0, d3.max(data, d=>d.SUPPLIERS_COUNT)]) ;\r\n\r\n y0.domain([0,d3.max(data, function(d){\r\n return d[yaxiscolumnkey2] !==\"\"? (d[yaxiscolumnkey] < d[yaxiscolumnkey2]) ? d[yaxiscolumnkey2] : d[yaxiscolumnkey] : d[yaxiscolumnkey];\r\n })])\r\n\r\n //y0.domain([0, d3.max(data, d=> d[yaxiscolumnkey])]) ; working\r\n //y0.domain([0, d3.max(data, d=> yaxiscolumnkey.toLowerCase().includes('spend')? convertToMillion(d[yaxiscolumnkey]) : formatThousands(d[yaxiscolumnkey]) )]) ;\r\n \r\n y.domain([0, d3.max(data, function (d) { return d3.max(keys, function (key) { return d[key]; }); })]).nice();\r\n //rScale.domain([0, d3.max(data, function (d) { return d3.max(keys, function (key) { return d[key]; }); })]).nice();\r\n\r\n svg.attr('height', windowHeight);\r\n svg.attr('width', windowWidth);\r\n\r\n g.append(\"g\")\r\n .selectAll(\"g\")\r\n .data(data)\r\n .enter().append(\"g\")\r\n .attr(\"transform\", function (d) { return \"translate(\" + x0(d[xaxiscolumnkey]) + \",0)\"; })\r\n .selectAll(\"rect\")\r\n .data(function (d) { return keys.map(function (key) { return { key: key, value: d[key] }; }); })\r\n .enter().append(\"rect\")\r\n .attr(\"x\", function (d) { \r\n return x1(d.key);\r\n })\r\n .attr(\"y\", function (d) { return rScale(d.value); })\r\n .attr(\"width\", x1.bandwidth())\r\n .attr(\"height\", function (d) { return height - rScale(d.value); })\r\n .attr(\"fill\", function (d) { return z(d.key); });\r\n\r\n g.append(\"g\")\r\n .selectAll(\"g\")\r\n .data(data)\r\n .enter().append(\"g\")\r\n .attr(\"transform\", function (d) { return \"translate(\" + x0(d[xaxiscolumnkey]) + \",0)\"; })\r\n .selectAll(\"text\")\r\n .data(function (d) { return keys.map(function (key) { return { key: key, value: d[key] }; }); })\r\n .enter().append(\"text\")\r\n .style(\"font-size\", \"0.625rem\")\r\n .attr('fill','currentcolor')\r\n .style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\")\r\n .attr(\"text-anchor\", \"middle\")\r\n .attr(\"x\", function (d) { \r\n return (x1(d.key) + x1.bandwidth() / 2);\r\n })\r\n .attr(\"y\", function (d) { \r\n return rScale(d.value) - 10; \r\n })\r\n .text(function(d){return formatThousands(d.value)})\r\n \r\n\r\n g.append(\"g\")\r\n .attr(\"class\", \"axis\")\r\n .attr(\"transform\", \"translate(0,\" + height + \")\")\r\n .style(\"font-size\", \"0.75rem\")\r\n .style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\")\r\n .call(d3.axisBottom(x0).tickFormat(function(d){\r\n return d + \"%\";\r\n }));\r\n\r\n \r\n g.append(\"g\")\r\n .attr(\"class\", \"axis\")\r\n .style(\"font-size\", \"0.75rem\")\r\n .style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\")\r\n .call(d3.axisLeft(y0).tickFormat(function(d){\r\n return yaxiscolumnkey.toLowerCase().includes('spend')? convertToMillion(d) : convertToThousands(d);\r\n })) \r\n .append(\"text\")\r\n .attr(\"x\", -74)\r\n .attr(\"y\", -25)\r\n .attr(\"dy\", \"0.32em\")\r\n .attr(\"fill\", \"currentcolor\")\r\n .style(\"font-size\", \"0.875rem\")\r\n .style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\") \r\n .attr(\"text-anchor\", \"start\")\r\n .text(leftAxisText);\r\n\r\n g.append(\"g\")\r\n .attr(\"class\", \"axis\")\r\n .style(\"font-size\", \"0.75rem\")\r\n .style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\")\r\n .attr(\"transform\", \"translate(\" + width + \" ,0)\")\t\r\n .call(d3.axisRight(rScale))\r\n .append(\"text\") \r\n .attr(\"x\", 8)\r\n .attr(\"y\", -25) \r\n .attr(\"fill\", \"currentcolor\")\r\n .style(\"font-size\", \"0.875rem\")\r\n .style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\")\r\n .attr(\"text-anchor\", \"start\")\r\n .text(\"Supplier Count\"); \r\n \r\n g.append(\"text\")\r\n .attr(\"x\", (width / 2)) \r\n .attr(\"y\", height + 40)\r\n .attr(\"text-anchor\", \"middle\") \r\n .style(\"font-size\", \"0.875rem\") \r\n .attr(\"fill\",'currentcolor') \r\n .style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\")\r\n .text(\"% of Total In-Scope \" + leftAxisText);\r\n\r\n return svg;\r\n}\r\n\r\nexport default groupbarchart\r\n","import React, { Component } from 'react'\r\nimport * as d3 from 'd3'\r\nimport { convertToMillion, convertToThousands } from 'utils/Utils'\r\nimport { uid } from 'react-uid'\r\n\r\nconst lineChart = (drawXY, xaxiscolumnkey, yaxiscolumnkey, data, elementId, svg, fillColor, yKey, leftAxisText) => {\r\n if (data !== undefined) {\r\n d3.select(\"#chart\").selectAll(\"groupbarchart\").remove();\r\n var xaxiscolumnkey = xaxiscolumnkey\r\n var yaxiscolumnkey = yaxiscolumnkey\r\n\r\n var parentNode = document.getElementById(\"chart\").parentNode;\r\n var windowWidth = parentNode.clientWidth;\r\n var windowHeight = parentNode.clientHeight;\r\n\r\n var margin = { top: 20, right: 40, bottom: 30, left: 40 },\r\n width = (windowWidth - margin.left - margin.right) + 57,\r\n height = (windowHeight - margin.top - margin.bottom)\r\n \r\n if (svg === undefined) {\r\n // append the svg object to the body of the page\r\n var svg = d3.select(\"#\" + elementId)\r\n .append(\"svg\")\r\n\r\n .attr(\"width\", width)\r\n .attr(\"height\", height)\r\n .append(\"g\")\r\n .attr(\"transform\",\r\n \"translate(\" + margin.left + \",\" + margin.top + \")\");\r\n\r\n } else {\r\n svg.attr('height', windowHeight);\r\n svg.attr('width', windowWidth);\r\n }\r\n\r\n\r\n\r\n // Add X axis \r\n var x = d3.scaleBand()\r\n .domain(data.map(function (d) { return d[xaxiscolumnkey]; }))\r\n .rangeRound([margin.left + 45, width])\r\n .paddingInner(0.1);\r\n\r\n\r\n\r\n // Add Y axis\r\n var y = d3.scaleLinear()\r\n .domain([0, d3.max(data, function (d) { return d[yKey]; })]).nice()\r\n .range([height, 0]);\r\n // svg.append(\"g\")\r\n // .call(d3.axisRight(y0).ticks(10)).attr(\"margin-Left\", 40) ;\r\n\r\n if (drawXY) {\r\n svg.append(\"g\")\r\n .attr(\"class\", \"axis\")\r\n .call(d3.axisRight(y).ticks(null, \"s\"))\r\n .call(g => g.selectAll(\".domain\").remove())\r\n .append(\"text\")\r\n .attr(\"x\", 0)\r\n .attr(\"y\", 10)\r\n .attr(\"fill\", \"#000\")\r\n .attr(\"font-size\", \"0.625rem\")\r\n .attr(\"text-anchor\", \"start\")\r\n .text(leftAxisText);\r\n }\r\n // Add the line\r\n svg.append(\"path\")\r\n .datum(data)\r\n .attr(\"fill\", \"none\")\r\n .attr(\"stroke\", fillColor)\r\n .attr(\"stroke-width\", 1.5)\r\n .attr(\"d\", d3.line()\r\n .x(function (d) {\r\n return x(d[xaxiscolumnkey])//+10\r\n })\r\n .y(function (d) {\r\n return y(d[yaxiscolumnkey])+ 15\r\n })\r\n )\r\n\r\n // Add the points\r\n svg.append(\"g\")\r\n .selectAll(\"dot\")\r\n .data(data)\r\n .enter()\r\n .append(\"circle\")\r\n .attr(\"class\", \"dot\")\r\n .attr(\"cx\", function (d) {\r\n return x(d[xaxiscolumnkey])//+10\r\n })\r\n .attr(\"cy\", function (d) {\r\n return y(d[yaxiscolumnkey]) + 15\r\n })\r\n .attr(\"r\", 5)\r\n .attr(\"fill\", fillColor)\r\n\r\n const label = svg.append(\"g\")\r\n .attr(\"fill\", \"currentcolor\")\r\n .selectAll(\"g\")\r\n .data(data)\r\n .join(\"g\")\r\n .attr(\"transform\", d => yaxiscolumnkey.toLowerCase().includes('matched') ?\r\n `translate(${x(d[xaxiscolumnkey]) + 10},${y(d[yaxiscolumnkey]) + 40})`\r\n : `translate(${x(d[xaxiscolumnkey]) + 10},${y(d[yaxiscolumnkey]) - 20})`)\r\n .attr(\"opacity\", 1).append(\"text\")\r\n .style(\"font-size\", \"0.625rem\")\r\n .style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\")\r\n .text(function (d) {\r\n return yaxiscolumnkey.toLowerCase().includes('spend') ?\r\n convertToMillion(d[yaxiscolumnkey], true)\r\n : convertToThousands(d[yaxiscolumnkey]);\r\n });\r\n\r\n\r\n return svg;\r\n }\r\n}\r\n\r\nexport default lineChart\r\n\r\n","\r\nimport React, { Component } from 'react'\r\nimport * as d3 from 'd3'\r\nimport { convertToMillion, formatThousands } from 'utils/Utils'\r\nimport { uid } from 'react-uid'\r\nimport { connect } from 'react-redux'\r\n\r\nimport groupbarchart from './GroupBarChart'\r\nimport lineChart from './ScatterPlotChart'\r\nimport {\r\n enablementSuccess,\r\n enablementLoading,\r\n enablementFailure,\r\n resetError,\r\n getConcentrationAnalysis\r\n} from 'actions/spendActions'\r\n\r\nclass GroupBarScatterPlotChart extends Component {\r\n _isMounted = false;\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n grpbar: '',\r\n }\r\n\r\n }\r\n\r\n componentDidMount() {\r\n this._isMounted = true;\r\n }\r\n\r\n checkedColumn(data, columnName) {\r\n var isColumnValid\r\n for (var i = 0; i < data.length; i++) {\r\n if (data[i][columnName] !== 0 && data[i][columnName] !== null) {\r\n return true;\r\n } else {\r\n isColumnValid = false;\r\n }\r\n }\r\n return isColumnValid\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n //if (nextProps.data !== this.props.data) {\r\n d3.select(\"#groupbarchart\").selectAll(\"g\").remove();\r\n d3.select(\"#groupbarchart\").selectAll(\"path\").remove();\r\n\r\n\r\n var isColumn1Valid = this.checkedColumn(nextProps.data, nextProps.column1)\r\n var isColumn2Valid = this.checkedColumn(nextProps.data, nextProps.column2)\r\n\r\n if (nextProps.isShowMatchedData) {\r\n var groupBarSVG = groupbarchart(nextProps.column1, nextProps.column2, \"PERCENTAGE_OF_TRANSACTIONS\",\r\n [\"SUPPLIERS_COUNT\", \"MATCHED_SUPPLIERS_COUNT\"],\r\n nextProps.data, \"groupbarchart\", nextProps.leftAxisText)\r\n\r\n\r\n if (isColumn1Valid) {\r\n lineChart(false, \"PERCENTAGE_OF_TRANSACTIONS\", nextProps.column1,\r\n nextProps.data, 'lineChart', groupBarSVG, '#f07e37', nextProps.column1, nextProps.leftAxisText)\r\n }\r\n\r\n if (isColumn2Valid) {\r\n lineChart(false, \"PERCENTAGE_OF_TRANSACTIONS\", nextProps.column2,\r\n nextProps.data, 'lineChart', groupBarSVG, '#f0d737', nextProps.column1, nextProps.leftAxisText)\r\n }\r\n\r\n }\r\n else {\r\n var groupBarSVG = groupbarchart(nextProps.column1, \"\", \"PERCENTAGE_OF_TRANSACTIONS\",\r\n [\"SUPPLIERS_COUNT\"],\r\n nextProps.data, \"groupbarchart\", nextProps.leftAxisText)\r\n\r\n lineChart(false, \"PERCENTAGE_OF_TRANSACTIONS\", nextProps.column1, nextProps.data,\r\n '', groupBarSVG, '#f07e37', nextProps.column1, nextProps.leftAxisText)\r\n\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this._isMounted = false;\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n {(this.props.content.title)}{
\r\n {this.props.content.subTitle}
\r\n \r\n option.label === this.state.dimension)}\r\n onChange={(value) => this.handleDimensionChange(value)}\r\n validators={{ required: validators.required }}\r\n validateOn='change'\r\n options={this.state.dimensionOption}\r\n isSearchable={false}\r\n noOptionsMessage={() => null}\r\n />\r\n
\r\n \r\n {\r\n row(this)\r\n }\r\n
\r\n\r\n\r\n \r\n
\r\n {/* {this.props.spendDetails.error}
\r\n \r\n
*/}\r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n user: state.default,\r\n content: state.content.spendAnalysis.enablement,\r\n validation: state.content.validation,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n enablementSuccess: message => dispatch(enablementSuccess(message)),\r\n enablementFailure: error => dispatch(enablementFailure(error)),\r\n enablementLoading: bool => dispatch(enablementLoading(bool)),\r\n getConcentrationAnalysis: (data) => dispatch(getConcentrationAnalysis(data)),\r\n\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(GroupBarScatterPlotChart)\r\n","import React, { Fragment } from 'react';\r\nimport PropTypes from 'prop-types';\r\n \r\nimport Popup from \"reactjs-popup\";\r\n\r\nexport default class ZoomModal extends React.Component\r\n{\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n open: false\r\n }\r\n\r\n this.open = this.open.bind(this)\r\n this.closePopUp = this.closePopUp.bind(this)\r\n this.outsidePopupClick = this.outsidePopupClick.bind(this)\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n +\r\n
\r\n {!this.state.open? \r\n \r\n {this.props.children}\r\n
\r\n :\r\n \r\n {this.props.children}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {this.props.content.title}{
\r\n {this.props.content.subTitle}
\r\n \r\n
\r\n \r\n \r\n option.label === this.state.selectedFocus)}\r\n onChange={(value) => this.handleMetricChange(value)}\r\n options={this.state.focusOption}\r\n isSearchable={false}\r\n className=\"border-with-DD dropDownContent\"\r\n />\r\n
\r\n \r\n \r\n option.value === this.state.selectedSolution)}\r\n onChange={(value) => this.handleSolutionChange(value)}\r\n options={this.state.solutionOption}\r\n isSearchable={false}\r\n className=\"border-with-DD dropDownContent\"\r\n />\r\n
\r\n \r\n \r\n option.label === this.state.selectedBuyProcess || option.value === this.state.selectedBuyProcess)}\r\n onChange={(value) => this.handleBuyProcessChange(value)}\r\n options={this.state.buyProcessOptions}\r\n isSearchable={false}\r\n className=\"border-with-DD dropDownContent\"\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n JSON.stringify(option.value) === JSON.stringify(this.state.selectedMatchedFilter)\r\n )}\r\n onChange={value => this.handleMatchedFilterChange(value)}\r\n options={this.state.matchedFilter}\r\n isSearchable={false}\r\n isDisabled={this.props.spendDetails.isLoading}\r\n noOptionsMessage={() => null} />\r\n
\r\n \r\n
\r\n \r\n {this.state.showMatchedSuppliers ?\r\n ![](\"images/show_active.svg\")
\r\n : ![](\"images/show_inactive.svg\")
\r\n }\r\n
\r\n \r\n : \r\n }\r\n \r\n
\r\n \r\n \r\n {\r\n this.state.enablementData !== null && this.state.enablementData !== undefined && this.state.enablementData.length > 0 ?\r\n
\r\n {this.state.enablementData !== null && this.state.enablementData !== undefined && this.state.enablementData.length > 0 ?\r\n {this.props.content.noDataFound}
}\r\n \r\n
\r\n : null}\r\n \r\n \r\n {this.state.showMatchedSuppliers ?\r\n \r\n : null}\r\n \r\n {this.state.showMatchedSuppliers ?\r\n \r\n : null}\r\n
\r\n {this.state.legendText.invoiceText}
{this.state.legendText.matchInvoiceText}
{this.state.legendText.supplierText}
{this.state.legendText.matchSupplierText}
\r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\nclass EnablementTable extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n {\r\n }\r\n }\r\n\r\n compare(a, b) {\r\n if (a.REASON !== undefined) {\r\n const bandA = a.REASON.toUpperCase();\r\n const bandB = b.REASON.toUpperCase();\r\n\r\n let comparison = 0;\r\n if (bandA > bandB) {\r\n comparison = 1;\r\n } else if (bandA < bandB) {\r\n comparison = -1;\r\n }\r\n return comparison;\r\n }\r\n return null;\r\n }\r\n\r\n render() {\r\n var currencySymbol = this.props.currencySymbol !== undefined ? this.props.currencySymbol : ''\r\n var isReason = this.props.isTargertEnterpriseTable\r\n var rows = this.props.resultData.sort(this.compare).map(\r\n function (row) {\r\n return (\r\n \r\n
\r\n \r\n {this.props.content.aribaNetworkTitle}\r\n
\r\n \r\n {this.props.content.aribaNetworkSubTitle}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n {this.props.content.aribaNetworkMatch}
\r\n \r\n JSON.stringify(option.value) === JSON.stringify(_this.state.selectedAribaNetworkMatched)\r\n )}\r\n onChange={value => this.handleAribaNetworkMatchedChange(value)}\r\n options={this.state.aribaNetworkMatched}\r\n isSearchable={false}\r\n isDisabled={this.props.spendDetails.isLoading}\r\n noOptionsMessage={() => null} />\r\n
\r\n {this.props.content.matchFilter}
\r\n \r\n JSON.stringify(option.value) === JSON.stringify(_this.state.selectedMatchedFilter)\r\n )}\r\n onChange={value => this.handleMatchedFilterChange(value)}\r\n options={this.state.matchedFilter}\r\n isSearchable={false}\r\n isDisabled={this.props.spendDetails.isLoading}\r\n noOptionsMessage={() => null} />\r\n
\r\n \r\n
\r\n \r\n
\r\n this.showMatchedSuppliers()}>\r\n {this.state.showMatchedSuppliers ?\r\n \r\n : \r\n }\r\n
\r\n \r\n : \r\n }\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.state.aribaNetworkMatchedData !== '' ?\r\n \r\n : null}\r\n
\r\n \r\n
\r\n
\r\n \r\n {this.state.enablementSummary.length !== 0 ?\r\n
\r\n \r\n
\r\n :\r\n {this.props.content.noDataFound}
}\r\n \r\n
\r\n
\r\n \r\n
\r\n {this.state.targetEnterpriseSummary.length !== 0 ?\r\n {this.props.content.targetEnterpriseHeader}
\r\n\r\n
\r\n :\r\n {this.props.content.noDataFound}
}\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n\r\n\r\nclass SupplierCountTable extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n {\r\n }\r\n this.calculatePercentage = this.calculatePercentage.bind(this)\r\n }\r\n\r\n calculatePercentage(value, columnName, type) {\r\n if (value !== null && value > 0) {\r\n var supplierData = this.props.resultData.filter((a) => a.SOLUTION_TYPE === \"Total\");\r\n var scalePercent = (value / supplierData[0][columnName]) * 100\r\n\r\n var solutionTypeData = this.props.resultData.filter((a) => a.SOLUTION_TYPE === type);\r\n var matchedPercent = (value / solutionTypeData[0][columnName]) * 100;\r\n\r\n return [scalePercent.toFixed(0), matchedPercent.toFixed(0)]\r\n }\r\n else {\r\n return [0, 0];\r\n }\r\n }\r\n\r\n render() {\r\n var i = 0;\r\n var selectedAribaNetworkMatched = this.props.selectedAribaNetworkMatched\r\n var showMatchedSuppliers = this.props.showMatchedSuppliers\r\n var supplierLegend = this.props.legendText\r\n var _this = this\r\n return (\r\n | {this.props.isTargertEnterpriseTable === true ? 'Reason' : ''} | \r\n{'Suppliers'} | \r\n{'Spend'} | \r\n{'Invoices'} | \r\n
|---|
\r\n\r\n {this.props.resultData.map(\r\n function (row) {\r\n i++;\r\n var format = selectedAribaNetworkMatched[2]\r\n return \r\n \r\n
\r\n })}\r\n\r\n
\r\n );\r\n\r\n }\r\n}\r\n\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n // language: state.language,\r\n // ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.spendAnalysis.enablement,\r\n validation: state.content.validation,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n enablementSuccess: message => dispatch(enablementSuccess(message)),\r\n enablementFailure: error => dispatch(enablementFailure(error)),\r\n enablementLoading: bool => dispatch(enablementLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n getMatchedSupplier: (data) => dispatch(getMatchedSupplier(data)),\r\n getMatchedSummary: (data) => dispatch(getMatchedSummary(data)),\r\n getSupplierByReason: (data) => dispatch(getSupplierByReason(data)),\r\n storeUserSpendSelection: (VSId, DMCId, spendModule, spendSubModule, criteriaName, selectedValue, userEmail) => dispatch(storeUserSpendSelection(VSId, DMCId, spendModule, spendSubModule, criteriaName, selectedValue, userEmail)),\r\n trackUserSpendSelections: (userSelections) => dispatch(trackUserSpendSelections(userSelections))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(AribaNetworkEnablementAnalysis)\r\n","import React from 'react';\r\nimport * as d3 from 'd3';\r\nimport * as topojson from \"topojson-client\";\r\nimport { convertToMillion, formatThousands, convertToThousands } from 'utils/Utils'\r\nimport { withTheme } from '@material-ui/core';\r\nimport { color } from 'd3-color';\r\n\r\nclass GanntChart extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n taskArray: props.taskArray\r\n }\r\n\r\n this.drawChart = this.drawChart.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.drawChart(this.props);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n let height = 450;\r\n if (nextProps.taskArray.length > 0) {\r\n //Perform some operation\r\n if (nextProps.taskLength > 0) {\r\n height = 35 * nextProps.taskLength;\r\n }\r\n console.log('height: ', height)\r\n this.setState({ taskArray: nextProps.taskArray, height: height + 100 })\r\n this.drawChart(nextProps, height > 450 ? height : 450);\r\n }\r\n }\r\n\r\n //tooltipGantt code from stackedBarChart\r\n componentWillUnmount() {\r\n d3.selectAll('.tooltipGantt').style('display', 'none');\r\n }\r\n\r\n\r\n drawChart = (props, height) => {\r\n d3.select(\"#chartId\").selectAll(\"svg\").remove();\r\n d3.selectAll('.tooltipGantt').style('display', 'none');//tooltipGantt code from stackedBarChart\r\n var w = 1240;\r\n var h = height;\r\n\r\n\r\n var svg = d3.selectAll(\"#chartId\")\r\n //.selectAll(\"svg\")\r\n .append(\"svg\")\r\n .attr(\"width\", \"100%\")\r\n // .attr(\"height\", h)\r\n // Responsive SVG needs these 2 attributes and no width and height attr.\r\n .attr(\"preserveAspectRatio\", \"xMinYMin meet\")\r\n .attr(\"viewBox\", [0, 0, w, h])\r\n .style(\"overflow\", \"visible\")\r\n .attr(\"class\", \"svg\");\r\n\r\n var taskArray = props.taskArray;\r\n\r\n var dateFormat = d3.timeParse(\"%Y-%m-%d\");\r\n\r\n var timeScale = d3.scaleTime()\r\n .domain([d3.min(taskArray, function (d) { return props.effort == 'Conservative' ? dateFormat(d.startTime2) : dateFormat(d.startTime1) }),\r\n d3.max(taskArray, function (d) { return props.effort == 'Conservative' ? dateFormat(d.endTime2) : dateFormat(d.endTime1) })])\r\n .range([0, w - 150]);\r\n\r\n var categories = new Array();\r\n var taskCategories = new Array();\r\n var categories_label = new Array();\r\n\r\n for (var i = 0; i < taskArray.length; i++) {\r\n categories.push(taskArray[i].type);\r\n taskCategories.push(taskArray[i].task);\r\n categories_label.push(taskArray[i].label);\r\n }\r\n\r\n var catsUnfiltered = categories; //for vert labels\r\n\r\n categories = checkUnique(categories);\r\n taskCategories = checkUnique(taskCategories);\r\n //taskCategories.sort();\r\n\r\n makeGant(taskArray, w, h);\r\n\r\n // var title = svg.append(\"text\")\r\n // .text(\"Gantt Chart Process\")\r\n // // .attr(\"x\", w / 2)\r\n // .attr(\"x\", 5)\r\n // .attr(\"y\", 25)\r\n // .attr(\"text-anchor\", \"left\")\r\n // .attr(\"font-size\", 14)\r\n // .attr(\"fill\", \"#009FFC\");\r\n //tooltipGantt code from stackedBarChart\r\n var tooltipGantt = d3.select(\"body\").append(\"div\").attr(\"class\", \"tooltipGantt\").style('display', 'none');\r\n\r\n\r\n function makeGant(tasks, pageWidth, pageHeight) {\r\n\r\n var barHeight = 20;\r\n var gap = barHeight + 4;\r\n var topPadding = 75;\r\n var sidePadding = 75;\r\n\r\n var colorScale1 = d3.scaleOrdinal()\r\n .domain(props.enablementMethodsInOrder)\r\n .range([\"#808080\", \"#0FAAFF\", \"#0076CB\", \"#0F46A7\", \"#00195A\", \"#F0AB00\", \"#E35500\"]);\r\n var colorScale2 = d3.scaleOrdinal()\r\n .domain(taskCategories)\r\n .range([\"#808080\", \"#0FAAFF\", \"#E35500\"]);\r\n var colorScaleTint1 = d3.scaleOrdinal()\r\n .domain(props.enablementMethodsInOrder)\r\n .range([\"#808080\", \"#0e9ae6\", \"#006ab7\", \"#0e4096\", \"#001751\", \"#c08a00\", \"#b64200\"]);\r\n var colorScaleTint2 = d3.scaleOrdinal()\r\n .domain(taskCategories)\r\n .range([\"#808080\", \"#0e9ae6\", \"#b64200\"]);\r\n // .range([\"#808080\", \"#008FD3\", \"#F0AB00\", \"#4FB81C\", \"#E35500\", \"#970A82\"]);\r\n // .interpolate(d3.interpolateHcl);\r\n\r\n makeGrid(sidePadding, topPadding, pageWidth, pageHeight);\r\n drawRects(tasks, gap, topPadding, sidePadding, barHeight, colorScale1, colorScale2, colorScaleTint1, colorScaleTint2, pageWidth, pageHeight);\r\n vertLabels(gap, topPadding, sidePadding, barHeight, colorScale1);\r\n }\r\n\r\n\r\n function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, color1, color2, tint1, tint2, w, h) {\r\n let x_value = 0; let w_value1 = 0; let w_value2 = 0;\r\n if (theArray.length > 0) {\r\n let data = theArray[0];\r\n x_value = props.effort == 'Conservative' ? dateFormat(data.startTime2) : dateFormat(data.startTime1);\r\n w_value1 = props.effort == 'Conservative' ? dateFormat(data.endTime2) : dateFormat(data.endTime1);\r\n w_value2 = props.effort == 'Conservative' ? dateFormat(data.startTime2) : dateFormat(data.startTime1);\r\n }\r\n\r\n\r\n var line = svg.append(\"line\")\r\n .data(theArray)\r\n .attr(\"x1\", function (d) {\r\n return timeScale(props.effort == 'Conservative' ? dateFormat(props.firstWaveEnd2) : dateFormat(props.firstWaveEnd1)) + theSidePad + 2;\r\n })\r\n .attr(\"y1\", 50)\r\n .attr(\"x2\", function (d) {\r\n return timeScale(props.effort == 'Conservative' ? dateFormat(props.firstWaveEnd2) : dateFormat(props.firstWaveEnd1)) + theSidePad + 2;\r\n })\r\n .attr(\"y2\", h - 50)\r\n .style(\"stroke-width\", 2)\r\n .style(\"stroke\", \"red\")\r\n .style(\"fill\", \"none\");\r\n\r\n var bigVerticalRects = svg.append(\"g\")\r\n .selectAll(\"rect\")\r\n .data(theArray)\r\n .enter()\r\n .append(\"rect\")\r\n // .attr(\"x\", 75)\r\n // .attr(\"y\", function (d, i) {\r\n // return i * theGap + theTopPad - 2;\r\n // })\r\n // .attr(\"width\", function (d) {\r\n // return 134;\r\n // })\r\n .attr(\"x\", function (d) {\r\n return timeScale(x_value) + theSidePad;\r\n })\r\n .attr(\"y\", function (d, i) {\r\n return i * theGap + theTopPad;\r\n })\r\n .attr(\"width\", function (d) {\r\n return (timeScale(w_value1) - timeScale(w_value2));\r\n })\r\n .attr(\"height\", theGap)\r\n .attr(\"stroke\", \"none\")\r\n .attr(\"fill\", \"#878686\");\r\n // .attr(\"opacity\", 0.1);\r\n\r\n // bigVerticalRects.append(\"svg:title\")\r\n // .text(\"Ramp up period\");\r\n\r\n var bigRects = svg.append(\"g\")\r\n .selectAll(\"rect\")\r\n .data(theArray)\r\n .enter()\r\n .append(\"rect\")\r\n .attr(\"x\", 0)\r\n .attr(\"y\", function (d, i) {\r\n return i * theGap + theTopPad - 2;\r\n })\r\n .attr(\"width\", function (d) {\r\n return w - theSidePad / 2;\r\n })\r\n .attr(\"height\", theGap)\r\n .attr(\"stroke\", \"none\")\r\n .attr(\"fill\", function (d) {\r\n for (var i = 0; i < categories.length; i++) {\r\n if (d.type == categories[i]) {\r\n // return d3.rgb(theColorScale(i));\r\n if (i % 2 == 0) {\r\n return d3.rgb('white');\r\n }\r\n return d3.rgb('lightGrey');\r\n }\r\n }\r\n })\r\n .attr(\"opacity\", 0.2);\r\n\r\n\r\n var rectangles = svg.append('g')\r\n .selectAll(\"rect\")\r\n .data(theArray)\r\n .enter();\r\n\r\n\r\n var innerRects = rectangles.append(\"rect\")\r\n .attr(\"rx\", 3)\r\n .attr(\"ry\", 3)\r\n .attr(\"x\", function (d) {\r\n return timeScale(props.effort == 'Conservative' ? dateFormat(d.startTime2) : dateFormat(d.startTime1)) + theSidePad;\r\n })\r\n .attr(\"y\", function (d, i) {\r\n return i * theGap + theTopPad;\r\n })\r\n .attr(\"width\", function (d) {\r\n return (timeScale(props.effort == 'Conservative' ? dateFormat(d.endTime2) : dateFormat(d.endTime1)) - timeScale(props.effort == 'Conservative' ? dateFormat(d.startTime2) : dateFormat(d.startTime1)));\r\n })\r\n .attr(\"height\", theBarHeight)\r\n .attr(\"stroke\", \"none\")\r\n .style(\"opacity\", 1)\r\n .attr(\"fill\", function (d) {\r\n for (var i = 0; i < taskCategories.length; i++) {\r\n if (d.task == taskCategories[i] && d.task == 'Ramp-Up') {\r\n return 'none';\r\n } else if (d.task == taskCategories[i]) {\r\n return props.isDefault ? color2(taskCategories[i]) : color1(taskCategories[i]);\r\n }\r\n }\r\n // var i = categories.indexOf(d.type);\r\n // return color(i);\r\n })\r\n\r\n\r\n var rectText = rectangles.append(\"text\")\r\n // .text(function (d) {\r\n // return d.showStar ? '*' : '';\r\n // })\r\n .attr(\"x\", function (d) {\r\n return (timeScale(props.effort == 'Conservative' ? dateFormat(d.endTime2) : dateFormat(d.endTime1)) - timeScale(props.effort == 'Conservative' ? dateFormat(d.startTime2) : dateFormat(d.startTime1))) / 2 + timeScale(props.effort == 'Conservative' ? dateFormat(d.startTime2) : dateFormat(d.startTime1)) + theSidePad;\r\n })\r\n .attr(\"y\", function (d, i) {\r\n return i * theGap + theTopPad;\r\n })\r\n\r\n //start at end\r\n // .attr(\"x\", function (d) {\r\n // return (timeScale(props.effort == 'Conservative' ? dateFormat(d.endTime1) : dateFormat(d.endTime2)) - timeScale(props.effort == 'Conservative' ? dateFormat(d.startTime1) : dateFormat(d.startTime2))) + timeScale(props.effort == 'Conservative' ? dateFormat(d.startTime1) : dateFormat(d.startTime2)) + theSidePad + 5;\r\n // })\r\n // .attr(\"y\", function (d, i) {\r\n // return i * theGap + 14 + theTopPad;\r\n // })\r\n .attr(\"font-size\", 16)\r\n .attr(\"font-weight\", 600)\r\n .attr(\"text-anchor\", \"middle\")\r\n .attr(\"text-height\", theBarHeight)\r\n .attr(\"fill\", \"red\");\r\n\r\n\r\n // rectText.on('mouseover', function (datum,index,elements) {\r\n // var tag = \"\";\r\n\r\n // if (d3.select(this).data()[0] != undefined && props.effort == 'Conservative') {\r\n // tag = \"Task: \" + d3.select(this).data()[0].task + \"| {row.SOLUTION_TYPE} | \r\n{i === 1 ? selectedAribaNetworkMatched[3] : ''} | \r\n
|---|---|
| \r\n \r\n \r\n\r\n \r\n {!isNaN(row[selectedAribaNetworkMatched[0]]) ? 0 : row[selectedAribaNetworkMatched[0]]}\r\n \r\n | \r\n \r\n {format(row[selectedAribaNetworkMatched[0]])}\r\n | \r\n
| \r\n \r\n \r\n \r\n {_this.calculatePercentage(row[selectedAribaNetworkMatched[1]], selectedAribaNetworkMatched[0], row.SOLUTION_TYPE)[1] + '%'}\r\n \r\n | \r\n \r\n {format(row[selectedAribaNetworkMatched[1]])}\r\n | \r\n
\r\n
\r\n \r\n \r\n {supplierLegend.inScopeText}\r\n
\r\n {showMatchedSuppliers ? \r\n \r\n {supplierLegend.matchSupplierText}\r\n
: null}\r\n \" +\r\n // \"Type: \" + d3.select(this).data()[0].type + \"
\" +\r\n // \"Starts: \" + d3.select(this).data()[0].startTime1 + \"
\" +\r\n // \"Ends: \" + d3.select(this).data()[0].endTime1 + \"
\";\r\n // } else if (d3.select(this).data()[0] != undefined) {\r\n // tag = \"Task: \" + d3.select(this).data()[0].task + \"
\" +\r\n // \"Type: \" + d3.select(this).data()[0].type + \"
\" +\r\n // \"Starts: \" + d3.select(this).data()[0].startTime2 + \"
\" +\r\n // \"Ends: \" + d3.select(this).data()[0].endTime2 + \"
\";\r\n // }\r\n // var output = document.getElementById(\"tag\");\r\n\r\n // var x = this.x.animVal.getItem(this) + 25 + \"px\";\r\n // var y = d3.mouse(elements[index])[0] + 50 + \"px\";\r\n // console.log(\"top\", d3.mouse(elements[index])[0])\r\n // // var y = this.y.animVal.getItem(this) + 200 + \"px\";\r\n // // var y = d3.mouse(this)[1] + \"px\";\r\n\r\n // output.innerHTML = tag;\r\n // output.style.top = y;\r\n // output.style.left = x;\r\n // output.style.display = \"block\";\r\n // }).on('mouseout', function () {\r\n // var output = document.getElementById(\"tag\");\r\n // output.style.display = \"none\";\r\n // });\r\n\r\n innerRects.on('dblclick', function (e) {\r\n props.onDoubleClick(d3.select(this).data()[0])\r\n });\r\n\r\n //tooltipGantt code form stackedBarchart\r\n innerRects.on(\"mousemove\", function (d) {\r\n if (d3.select(this).data()[0].type !== 'No') {\r\n d3.select(this).style(\"fill\", '#4acfee');\r\n tooltipGantt\r\n .style(\"left\", d3.event.pageX - 50 + \"px\")\r\n .style(\"top\", d3.event.pageY - 70 + \"px\")\r\n .style(\"display\", \"inline-block\")\r\n .html(\r\n props.enablementOn ? \"Wave: \" + d3.select(this).data()[0].type + \"
\" + \"Enablement Recommendation: \" + d3.select(this).data()[0].task + \"
\" + \"Suppliers: \" + d3.select(this).data()[0].supplierCount_On + \"
\" + \"Unique ANIDs: \" + d3.select(this).data()[0].anIdCount_On + \"
\" + \"PO spend: \" + props.currency + convertToMillion(d3.select(this).data()[0].poSpend_On) + \"
\" + \"Invoice spend: \" + props.currency + convertToMillion(d3.select(this).data()[0].invSpend_On) + \"
\" + \"Documents: \" + formatThousands(d3.select(this).data()[0].docCount_On) + \"
\"\r\n : \"Wave: \" + d3.select(this).data()[0].type + \"
\" + \"Enablement Recommendation: \" + d3.select(this).data()[0].task + \"
\" + \"Suppliers: \" + d3.select(this).data()[0].supplierCount_Off + \"
\" + \"Unique ANIDs: \" + d3.select(this).data()[0].anIdCount_Off + \"
\" + \"PO spend: \" + props.currency + convertToMillion(d3.select(this).data()[0].poSpend_Off) + \"
\" + \"Invoice spend: \" + props.currency + convertToMillion(d3.select(this).data()[0].invSpend_Off) + \"
\" + \"Documents: \" + formatThousands(d3.select(this).data()[0].docCount_Off) + \"
\"\r\n );\r\n }\r\n })\r\n .on(\"mouseout\", function (d) {\r\n d3.select(this).style(\"fill\", props.isDefault ? color2(d3.select(this).data()[0].task) : color1(d3.select(this).data()[0].task));\r\n tooltipGantt\r\n .style(\"display\", \"none\");\r\n });\r\n\r\n // .on(\"mouseover\", function (d) {\r\n // d3.select(this).style(\"opacity\", \"0.5\");\r\n // })\r\n // .on(\"mouseout\", function (d) {\r\n // d3.select(this).style(\"opacity\", \"1\");\r\n // })\r\n\r\n // innerRects.on('mouseover', function (datum,index,elements) {\r\n // //console.log(this);\r\n // var tag = \"\";\r\n\r\n // if (d3.select(this).data()[0] != undefined && props.effort == 'Conservative') {\r\n // tag = \"Task: \" + d3.select(this).data()[0].task + \"
\" +\r\n // \"Type: \" + d3.select(this).data()[0].type + \"
\" +\r\n // \"Starts: \" + d3.select(this).data()[0].startTime1 + \"
\" +\r\n // \"Ends: \" + d3.select(this).data()[0].endTime1 + \"
\";\r\n // } else if (d3.select(this).data()[0] != undefined) {\r\n // tag = \"Task: \" + d3.select(this).data()[0].task + \"
\" +\r\n // \"Type: \" + d3.select(this).data()[0].type + \"
\" +\r\n // \"Starts: \" + d3.select(this).data()[0].startTime2 + \"
\" +\r\n // \"Ends: \" + d3.select(this).data()[0].endTime2 + \"
\";\r\n // }\r\n // var output = document.getElementById(\"tag\");\r\n\r\n // var x = (this.x.animVal.value + this.width.animVal.value / 2) + \"px\";\r\n // var y = this.y.animVal.value + 25 + \"px\";\r\n // //var y = d3.mouse(this)[1] + \"px\";\r\n // // var y = d3.mouse(elements[index])[0] - 85 + \"px\";\r\n\r\n // output.innerHTML = tag;\r\n // output.style.top = y;\r\n // output.style.left = x;\r\n // output.style.display = \"block\";\r\n // }).on('mouseout', function () {\r\n // var output = document.getElementById(\"tag\");\r\n // output.style.display = \"none\";\r\n\r\n // });\r\n }\r\n\r\n\r\n function makeGrid(theSidePad, theTopPad, w, h) {\r\n function tickFormat(date) {\r\n let month = date.getMonth();\r\n let yyyy = date.getFullYear();\r\n let year = props.year;//take current year provided by sp\r\n // if (month == 4) {\r\n // drawLine(date)\r\n // }\r\n //assuming that gannt chart will not spread over more than 10 years taking limit as 10 for below loop\r\n for (let i = 1; i < 10; i++) {\r\n if (yyyy == year && month == 0) {\r\n return ('Kick off')\r\n } else if (yyyy == year && month > 0) {\r\n return ('month ' + (month));\r\n } else if (yyyy == Number(year) + i) {\r\n return ('month ' + (month + 12 * i));\r\n }\r\n }\r\n };\r\n\r\n // function drawLine(date) {\r\n // var line = svg.append(\"line\")\r\n // .attr(\"x1\", date)\r\n // .attr(\"y1\", 0)\r\n // .attr(\"x2\", date)\r\n // .attr(\"y2\", h)\r\n // .style(\"stroke-width\", 2)\r\n // .style(\"stroke\", \"red\")\r\n // .style(\"fill\", \"none\");\r\n // }\r\n\r\n var xAxis = d3.axisBottom(timeScale)\r\n // .ticks(d3.timeDay, 1)\r\n .ticks(props.xAxisVal != null && props.xAxisVal != 'default' ? props.xAxisVal : props.effort == 'Conservative' ? props.lastMonth2 > 6 ? 12 : 6 : props.lastMonth1 > 6 ? 12 : 6)\r\n .tickSize(-h + theTopPad + 20, 0, 0)\r\n // .tickFormat(d3.timeFormat('%d %b'));\r\n // .tickFormat(d3.timeFormat('%b %Y'));\r\n .tickFormat(tickFormat);\r\n\r\n var grid = svg.append('g')\r\n .attr('class', 'grid')\r\n .attr('transform', 'translate(' + theSidePad + ', ' + (h - 50) + ')')\r\n .call(xAxis)\r\n .selectAll(\"text\")\r\n .style(\"text-anchor\", \"middle\")\r\n .attr(\"fill\", \"#000\")\r\n .attr(\"stroke\", \"none\")\r\n .attr(\"font-size\", 12)\r\n .attr(\"dy\", \"1em\")\r\n .attr(\"transform\", \"rotate(35)\")\r\n .style(\"text-anchor\", \"start\");\r\n\r\n // text label for the y axis\r\n svg.append(\"text\")\r\n .attr(\"transform\", \"rotate(-90)\")\r\n .attr(\"y\", -20)\r\n .attr(\"x\", 0 - (h / 2))\r\n .attr(\"dy\", \"1em\")\r\n .style(\"text-anchor\", \"middle\")\r\n .attr(\"font-size\", 14)\r\n .text(\"Waves\");\r\n }\r\n\r\n function vertLabels(theGap, theTopPad, theSidePad, theBarHeight, theColorScale) {\r\n var numOccurances = new Array();\r\n var prevGap = 0;\r\n\r\n for (var i = 0; i < categories.length; i++) {\r\n numOccurances[i] = [categories[i], getCount(categories[i], catsUnfiltered), categories_label[i]];\r\n }\r\n\r\n var axisText = svg.append(\"g\") //without doing this, impossible to put grid lines behind text\r\n .selectAll(\"text\")\r\n .data(numOccurances)\r\n .enter()\r\n .append(\"text\")\r\n .text(function (d) {\r\n return d[0] != 'No' && d[0] != 0 ? d[0] : '';\r\n })\r\n .attr(\"x\", 10)\r\n .attr(\"y\", function (d, i) {\r\n if (i > 0) {\r\n for (var j = 0; j < i; j++) {\r\n prevGap += numOccurances[i - 1][1];\r\n // console.log(prevGap);\r\n return d[1] * theGap / 2 + prevGap * theGap + theTopPad;\r\n }\r\n } else {\r\n return d[1] * theGap / 2 + theTopPad;\r\n }\r\n })\r\n .attr(\"font-size\", 11)\r\n .attr(\"text-anchor\", \"start\")\r\n .attr(\"cursor\", \"pointer\")\r\n .attr(\"text-height\", 14)\r\n .append(\"svg:title\")\r\n .text(function (d) { return d[2] != null ? \"Wave Description: \" + d[2] : \"Wave Description: \"});\r\n // .attr(\"fill\", function (d) {\r\n // for (var i = 0; i < categories.length; i++) {\r\n // if (d[0] == categories[i]) {\r\n // // console.log(\"true!\");\r\n // return d3.rgb(theColorScale(i)).darker();\r\n // }\r\n // }\r\n // });\r\n\r\n }\r\n\r\n\r\n\r\n //from this stackexchange question: http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript\r\n function checkUnique(arr) {\r\n var hash = {}, result = [];\r\n for (var i = 0, l = arr.length; i < l; ++i) {\r\n if (!hash.hasOwnProperty(arr[i])) { //it works with objects! in FF, at least\r\n hash[arr[i]] = true;\r\n result.push(arr[i]);\r\n }\r\n }\r\n return result;\r\n }\r\n\r\n //from this stackexchange question: http://stackoverflow.com/questions/14227981/count-how-many-strings-in-an-array-have-duplicates-in-the-same-array\r\n function getCounts(arr) {\r\n var i = arr.length, // var to loop over\r\n obj = {}; // obj to store results\r\n while (i) obj[arr[--i]] = (obj[arr[i]] || 0) + 1; // count occurrences\r\n return obj;\r\n }\r\n\r\n // get specific from everything\r\n function getCount(word, arr) {\r\n return getCounts(arr)[word] || 0;\r\n }\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n
\r\n \r\n {/* */}\r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\n\r\nexport default GanntChart","import React, { Fragment } from 'react';\r\nimport { connect } from 'react-redux'\r\nimport ScrollArea from 'react-scrollbar'\r\nimport Button from 'UI/Button';\r\nimport { RadioButton } from 'material-ui';\r\n\r\nimport {\r\n selectedEnablementWaveDetails\r\n} from 'actions/spendActions'\r\n\r\n\r\nclass EnablementWavePopUp extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.myRef = React.createRef()\r\n this.state = {\r\n designationList: ['Already Transacting', 'Relationship Exists', 'On Going Standard Account',\r\n 'Out of Scope', 'Negative spend', 'Input'],\r\n\r\n designationArray: [],\r\n selectedValue: null,\r\n checked: false,\r\n inputValue: null\r\n }\r\n this.loadEW_Designation_Data = this.loadEW_Designation_Data.bind(this);\r\n this.RadioButtonChecked = this.RadioButtonChecked.bind(this);\r\n this.onInputValueChange = this.onInputValueChange.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n let flag = this.state.designationList.findIndex(x => x == this.props.enablementWaveInputValue);\r\n\r\n if (flag >= 0) {\r\n this.setState({ checked: this.props.enablementWaveInputValue !== null ? true : false, selectedValue: this.props.enablementWaveInputValue }, this.loadEW_Designation_Data)\r\n } else {\r\n this.setState({ checked: this.props.enablementWaveInputValue !== null ? true : false, selectedValue: 'Input', inputValue: this.props.enablementWaveInputValue }, this.loadEW_Designation_Data)\r\n }\r\n }\r\n\r\n RadioButtonChecked(event) {\r\n // if (event.currentTarget.value == this.state.selectedValue) {\r\n // this.setState({ checked: !this.state.checked }, this.loadEW_Designation_Data)\r\n // } else {\r\n // this.setState({ checked: true, selectedValue: event.currentTarget.value }, this.loadEW_Designation_Data)\r\n // }\r\n\r\n let value = ''\r\n if (event.currentTarget.value !== 'Input') {\r\n this.props.selectedEnablementWaveDetails(event.currentTarget.value);\r\n value = event.currentTarget.value;\r\n } else {\r\n value = this.state.inputValue;\r\n }\r\n\r\n this.setState({ checked: true, selectedValue: event.currentTarget.value }, this.loadEW_Designation_Data)\r\n }\r\n\r\n onInputValueChange(event) {\r\n //value should not cross min and max input value\r\n let { value, min, max } = event.target;\r\n if(Number.isInteger(value)){\r\n //value = Math.max(Number(min), Math.min(Number(max), Number(value)));\r\n value = Number(value) > Number(max) ? Math.min(Number(max), Number(value)) : value;\r\n }else{\r\n value = value.split('.')[0]\r\n value = Number(value) > Number(max) ? Math.min(Number(max), Number(value)) : value;\r\n }\r\n this.props.selectedEnablementWaveDetails(value);\r\n this.setState({ inputValue: value }, this.loadEW_Designation_Data);\r\n }\r\n\r\n loadEW_Designation_Data() {\r\n var result = (\r\n {this.state.designationList.map((data, index) => (\r\n
)\r\n\r\n this.setState({ designationArray: result })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n ))}\r\n \r\n {data !== 'Input' ?\r\n
\r\n \r\n
\r\n :\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {data}\r\n
\r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content.enablementInsight,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n selectedEnablementWaveDetails: message => dispatch(selectedEnablementWaveDetails(message))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EnablementWavePopUp); ","import React, { Component } from 'react'\r\n\r\nimport { EnablementInsightSupplierColumns } from 'Constants'\r\nimport CustomGrid from 'UI/CustomGrid'\r\nimport { connect } from 'react-redux'\r\nimport { Toolbar, Data, Filters, Editors, Menu } from \"react-data-grid-addons\";\r\nimport { path } from 'Constants'\r\nimport { ControlTextE, SelectE, CheckboxE, ScreenE, PopupE, CustomGridE } from 'UI/CustomComponents/Controls';\r\n\r\n\r\nimport {\r\n getEnablementInsightSuppliersDetails,\r\n updateFlightPlanningSupplierDetails,\r\n selectedEnablementWaveDetails\r\n} from 'actions/spendActions'\r\n\r\nimport { formatter, getNonEmptyValue, binarySearchIndex } from \"../../../utils/Utils\";\r\nimport Button from 'UI/Button';\r\n\r\nimport TextfilterRenderer from 'UI/TextFilterRenderer';\r\nimport NumericFilterRenderer from 'UI/NumericFilterRenderer';\r\nimport AutoCompleteFilterAdv from 'UI/AutoCompleteFilterAdv';\r\nimport NumericEditor from 'UI/NumericEditor';\r\nimport EnablementWavePopUp from '../EnablementWavePopUp'\r\nimport TextEditor from 'UI/TextEditor';\r\nimport DivEditor from 'UI/DivEditor'\r\n\r\nconst { DropDownEditor } = Editors;\r\nconst dropdownValues = [\"Calculated\", \"Override\"];\r\nconst dropDownEditor = \r\n
\r\n \r\n
\r\n {this.props.content.ewPopUpHeader}
\r\n \r\n \r\n
\r\n \r\n \r\n {this.props.content.ewPopUpDesc}\r\n
\r\n \r\n
\r\n \r\n \r\n {this.props.content.ewPopUpSelectTitle}\r\n \r\n
\r\n {/* {this.state.designationArray}
\r\n {/* {this.props.search.isLoading ?\r\n Loading...
:\r\n this.state.peArray\r\n }\r\n {this.props.search.error}
*/}\r\n \r\n \r\n Designate a wave by populating a number below\r\n \r\n
*/}\r\n \r\n \r\n
\r\n \r\n (this.customGridRef = ref)}\r\n columns={this.state.columns}\r\n data={this.state.data}\r\n keyColumn=\"DATA_COLLECTIONS_SKEY\"\r\n save={this.save}\r\n validate={this.validate}\r\n export={true}\r\n exportFileName={\"Supplier Details\"}\r\n isCellEditable={this.isCellEditable}\r\n currentFilter={true} \r\n />\r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content.enablementInsight,\r\n ui: state.content.ui,\r\n currency: decodeURIComponent(state.valueStory.Currency),\r\n userData: state.valueStory,\r\n spendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n benchMarkCalculations: state.benchMarksData,\r\n allContent: state.content,\r\n language: state.language,\r\n spendDetails: state.spendDetails,\r\n user: state.default,\r\n enablementWaveInputDetails: state.spendDetails.enablementWaveInputDetails,\r\n ganntTexts: state.content.ganntChartTab\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getEnablementInsightSuppliersDetails: (data) => dispatch(getEnablementInsightSuppliersDetails(data)),\r\n updateFlightPlanningSupplierDetails: (data) => dispatch(updateFlightPlanningSupplierDetails(data)),\r\n selectedEnablementWaveDetails: message => dispatch(selectedEnablementWaveDetails(message)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EnablementSupplierDetailsPopup); ","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport GanntChart from './GanntChart';\r\nimport Select from 'react-select';\r\nimport EnablementSupplierDetailsPopup from 'components/Spend/EnablementInsight/EnablementSupplierDetailsPopup'\r\nimport VideoHelp from 'components/UI/VideoHelp';\r\nimport cloneDeep from 'lodash/cloneDeep';\r\n\r\n// Settings\r\nimport { modalStyle, modalContentStyle, changeModalBorderStyle, changeModalBorderRectStyle, drilldownModalBorderContentStyle } from 'Constants'\r\n\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nimport {\r\n getGanntChartData,\r\n getGanntChartSuppliersDetails,\r\n resetError,\r\n getResultLoading, getResultSuccess, getResultFailure\r\n} from 'actions/spendActions'\r\n\r\nimport moment from 'moment'\r\n\r\nclass GanntChartContainer extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n valuesUpdated: false,\r\n previousTaskArray: [\r\n\r\n ],\r\n taskArray: [\r\n {\r\n task: \"Ramp-Up\",\r\n type: \"0\",\r\n startTime1: \"2021-01-01\",\r\n endTime1: \"2021-02-14\",\r\n startTime2: \"2021-01-01\",\r\n endTime2: \"2021-02-14\",\r\n showStar: false\r\n }\r\n ],\r\n taskArray2: [\r\n {\r\n task: \"Ramp-Up\",\r\n type: \"0\",\r\n startTime1: \"2021-01-01\",\r\n endTime1: \"2021-02-14\",\r\n startTime2: \"2021-01-01\",\r\n endTime2: \"2021-02-14\",\r\n showStar: false\r\n }\r\n ],\r\n tasksList: ['Ramp-Up', 'Enterprise - Portal', 'Enterprise - Integration & Catalog', 'Enterprise - Integration', 'Enterprise - Portal & Catalog', 'Managed Standard Account', 'Ongoing Standard Enablement'],\r\n arrWithoutTasks: [],\r\n chartArr: [],\r\n cloneChartArr: [],\r\n legendList1: ['Set up', 'Enterprise - Portal', 'Enterprise - Integration & Catalog', 'Enterprise - Integration', 'Enterprise - Portal & Catalog', 'Managed Standard Account', 'Ongoing Standard Enablement', 'Go live'],\r\n legendList2: ['Set up', 'Ongoing Standard Enablement', 'Go live'],\r\n startYear: null,\r\n selectedEffort: 'Conservative',\r\n supplierData: null,\r\n tasksChecked: false,\r\n dropDownValues: [\r\n { value: 'default', label: 'Dynamic view (default)' },\r\n { value: 12, label: '12 month view' },\r\n { value: 24, label: '24 month view' }\r\n ],\r\n selectedValue: null\r\n }\r\n this.onDoubleClickGanntChart = this.onDoubleClickGanntChart.bind(this);\r\n this.loadData = this.loadData.bind(this);\r\n this.showModal = this.showModal.bind(this);\r\n this.hideModal = this.hideModal.bind(this);\r\n this.onSave = this.onSave.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n }\r\n\r\n loadData() {\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsID = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let userEmail = this.props.user.user.Email;\r\n this.props.getResultLoading(true);\r\n this.props.getGanntChartData(dmcId, vsID, userEmail).then((response) => {\r\n try {\r\n if (response.data.Result.length > 0) {\r\n let result = response.data.Result;\r\n let ele = result[0];\r\n let date = moment(ele.WK_START_ENT_AGGR)\r\n let year = date.year();\r\n //In below code we should always get date as 15th of feb for current year\r\n //let day = moment(date).subtract(14, \"days\").format(\"YYYY-MM-DD\");\r\n this.props.getResultSuccess();\r\n let data = [\r\n {\r\n task: \"Ramp-Up\",\r\n type: \"0\",\r\n startTime1: `${year}-01-01`,//ram-up always start at 1st of current year\r\n endTime1: moment(date).subtract(1, \"days\").format(\"YYYY-MM-DD\"),\r\n startTime2: `${year}-01-01`,\r\n endTime2: moment(date).subtract(1, \"days\").format(\"YYYY-MM-DD\"),\r\n showStar: false\r\n }\r\n ];\r\n result.forEach((element, index) => {\r\n let temp = {\r\n task: element.GANTT_CHART_WORKSTREAM_NAME,\r\n type: element.ENABLE_WAVE,\r\n startTime1: moment(element.WK_START_ENT_AGGR).format('YYYY-MM-DD'),//moment(element.WK_END_CONSR).format('YYYY-MM-DD');\r\n endTime1: moment(element.WK_END_AGGR).format('YYYY-MM-DD'),\r\n startTime2: moment(element.WK_START_ENT_CONR).format('YYYY-MM-DD'),\r\n endTime2: moment(element.WK_END_CONSR).format('YYYY-MM-DD'),\r\n showStar: false,\r\n supplierCount_Off: element.UNIQUE_SUPPLIER_WV_CNT,\r\n supplierCount_On: element.UNIQUE_SUPPIER_DETL_CNT,\r\n anIdCount_Off: element.UNIQUE_ANID_WV_CNT,\r\n anIdCount_On: element.UNIQUE_AN_ID_DETL_CNT,\r\n poSpend_Off: element.AGGR_PO_SPEND_WV_CNT,\r\n poSpend_On: element.AGGR_PO_SPEND_DETL_CNT,\r\n invSpend_Off: element.AGGR_INV_SPEND_WV_CNT,\r\n invSpend_On: element.AGGR_INV_SPEND_DETL_CNT,\r\n docCount_Off: element.DOC_PROXY_WV_CNT,\r\n docCount_On: element.DOC_PROXY_DETL_CNT,\r\n label: element.WAVE_DESCRIPTION\r\n }\r\n data.push(temp)\r\n });\r\n\r\n let isOnePresent = data.filter(el => el.type == 1)\r\n if (isOnePresent.length == 0) {\r\n this.setState({ errorMessage: 'Wave no. 1 should be present to generate Gantt chart.' })\r\n }\r\n\r\n let maxWaveNo = Math.max.apply(Math, data.map(function (o) { return o.type; }))\r\n if (maxWaveNo > 2) {\r\n let firstWaveEnd1 = null;\r\n let firstWaveEnd2 = null;\r\n let defaultArr = [{ task: \"Ramp-Up\", type: \"0\", startTime1: `${year}-01-01`, endTime1: moment(date).subtract(1, \"days\").format(\"YYYY-MM-DD\"), startTime2: `${year}-01-01`, endTime2: moment(date).subtract(1, \"days\").format(\"YYYY-MM-DD\") }];\r\n for (let i = 0; i < maxWaveNo; i++) {\r\n let typeArr = data.filter(function (el) {\r\n return el.type == i + 1;\r\n })\r\n if (typeArr.length > 0) {\r\n let startTime1 = typeArr[0].startTime1;\r\n let startTime2 = typeArr[0].startTime2;\r\n let maxEndTime1 = new Date(Math.max.apply(null, typeArr.map(function (o) { return new Date(o.endTime1); })))\r\n maxEndTime1.setDate(maxEndTime1.getDate() + 1)// adding a day as in coversion its getting removed\r\n let maxEndTime2 = new Date(Math.max.apply(null, typeArr.map(function (o) { return new Date(o.endTime2); })))\r\n maxEndTime2.setDate(maxEndTime2.getDate() + 1)\r\n let defaultTemp = {\r\n task: '', type: i + 1, label: typeArr[0].label, startTime1: startTime1, endTime1: moment(maxEndTime1).format('YYYY-MM-DD'),\r\n startTime2: startTime2, endTime2: moment(maxEndTime2).format('YYYY-MM-DD'), supplierCount_Off: typeArr[0].supplierCount_Off, supplierCount_On: typeArr[0].supplierCount_On,\r\n poSpend_Off: typeArr[0].poSpend_Off, poSpend_On: typeArr[0].poSpend_On, invSpend_Off: typeArr[0].invSpend_Off, invSpend_On: typeArr[0].invSpend_On, docCount_Off: typeArr[0].docCount_Off, docCount_On: typeArr[0].docCount_On,\r\n anIdCount_Off: typeArr[0].anIdCount_Off, anIdCount_On: typeArr[0].anIdCount_On\r\n }\r\n if (i == 0) {\r\n firstWaveEnd1 = moment(maxEndTime1).format('YYYY-MM-DD');\r\n firstWaveEnd2 = moment(maxEndTime2).format('YYYY-MM-DD');\r\n }\r\n defaultArr.push(defaultTemp)\r\n }\r\n }\r\n //adding slice(-1)[0] ongoing std block at the end\r\n // {\r\n // task: \"Ongoing Standard Enablement\",\r\n // type: \"No\",\r\n // startTime1: \"2021-05-01\",\r\n // endTime1: \"2022-01-01\",\r\n // startTime2: \"2021-04-01\",\r\n // endTime2: \"2021-12-01\",\r\n // showStar: false\r\n // }\r\n\r\n let lastElement = defaultArr.slice(-1)[0];\r\n let d1 = moment(lastElement.endTime1)\r\n let d2 = moment(lastElement.endTime2)\r\n let lastYear1;\r\n let lastYear2;\r\n let lastMonth1;\r\n let lastMonth2;\r\n lastYear1 = d1.year()\r\n if (lastYear1 == year) {\r\n lastMonth1 = d1.month() + 1;\r\n } else {\r\n lastMonth1 = 12\r\n }\r\n lastYear2 = d2.year();\r\n if (lastYear2 == year) {\r\n lastMonth2 = d2.month() + 1;\r\n } else {\r\n lastMonth2 = 12\r\n }\r\n let lastObj = { task: \"Ongoing Standard Enablement\", type: \"No\", startTime1: firstWaveEnd1, endTime1: lastElement.endTime1, startTime2: firstWaveEnd2, endTime2: lastElement.endTime2, supplierCount_Off: '', supplierCount_On: '', poSpend_Off: '', poSpend_On: '', invSpend_Off: '', invSpend_On: '', docCount_Off: '', docCount_On: '', anIdCount_Off: '', anIdCount_On: '' }\r\n defaultArr.push(lastObj);\r\n data.push(lastObj);\r\n this.state.tasksChecked ? this.setState({ chartArr: data, cloneChartArr: data, isDefault: false }) : this.setState({ chartArr: defaultArr, cloneChartArr: defaultArr, isDefault: true })\r\n this.setState({ taskArray: data, taskArray2: data, previousTaskArray: defaultArr, arrWithoutTasks: defaultArr, firstWaveEnd1: firstWaveEnd1, firstWaveEnd2: firstWaveEnd2, startYear: year, lastMonth1: lastMonth1, lastMonth2: lastMonth2 })\r\n } else {\r\n this.props.getResultLoading(false);\r\n this.setState({ errorMessage: \"There are 2 or fewer waves in this spend file and therefore the Gantt Chart will not render on this screen. Please use the Enablement Insights tab to see wave details.\", errorFlag: true })\r\n }\r\n\r\n } else {\r\n this.props.getResultLoading(false);\r\n this.setState({ errorMessage: \"There are 2 or fewer waves in this spend file and therefore the Gantt Chart will not render on this screen. Please use the Enablement Insights tab to see wave details.\", errorFlag: true })\r\n }\r\n }\r\n catch (e) {\r\n this.props.getResultFailure(\"An error has occurred\");\r\n }\r\n })\r\n .catch((response) => {\r\n this.props.getResultFailure(\"Request data not found\");\r\n this.setState({ isLoading: false })\r\n })\r\n }\r\n\r\n componentWillUnmount() {\r\n //reset the error\r\n this.props.getResultFailure(\"\");\r\n }\r\n\r\n\r\n onDoubleClickGanntChart(e) {\r\n // console.log(\"Data after double click\", e)\r\n if (e.type == 'No') {\r\n this.setState({ supplierData: null })\r\n } else {\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsID = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let userEmail = this.props.user.user.Email;\r\n let waveValue = e.type;\r\n let waveColName = 'ENABLEMENT_WAVE';\r\n let taskValue = e.task != '' ? e.task : null;\r\n let taskColName = 'GANTT_CHART_WORKSTREAM_NAME';\r\n\r\n let inputData = {\r\n DMC_ID: dmcId, VS_ID: vsID, USER_EMAIL: userEmail,\r\n FirstColumn_Name: waveColName, FirstColumn_Value: waveValue, SecondColumn_Name: taskColName, SecondColumn_Value: taskValue\r\n }\r\n\r\n this.props.getGanntChartSuppliersDetails(inputData)\r\n .then((response) => {\r\n this.setState({ supplierData: response.data.Result, inputParam: inputData }, this.showModal(\"taskSuppliers\"))\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator', isError: 'Yes' }, this.showModal(\"taskSuppliers\"))\r\n }\r\n else {\r\n this.setState({ responseMsg: 'An error has occurred', isError: 'Yes' }, this.showModal(\"taskSuppliers\"))\r\n }\r\n })\r\n }\r\n }\r\n\r\n showModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n this.refs[action].hide()\r\n if (this.state.valuesUpdated) {\r\n this.setState({ valuesUpdated: false }, this.loadData())\r\n }\r\n // this.props.close();\r\n }\r\n\r\n onSave(value) {\r\n this.setState({ valuesUpdated: value })\r\n }\r\n\r\n tasksToggled(event) {\r\n this.setState({ tasksChecked: !this.state.tasksChecked }, this.tasksDataLoad)\r\n }\r\n\r\n tasksDataLoad() {\r\n let year = this.state.startYear;\r\n //`12-31-${year}` \r\n if (this.state.tasksChecked) {\r\n if (this.state.selectedValue == 12) {\r\n let chartArray = this.state.taskArray2;\r\n let lastElement = chartArray.slice(-1).pop();\r\n lastElement.endTime1 = `${year}-12-31`;\r\n lastElement.endTime2 = `${year}-12-31`;\r\n let tempArr = chartArray.filter(function (element) {\r\n return element.endTime1.includes(year) && element.endTime2.includes(year)\r\n })\r\n this.setState({ chartArr: tempArr, cloneChartArr: this.state.taskArray2, isDefault: false })\r\n } else if (this.state.selectedValue == 24) {\r\n let chartArray = this.state.taskArray2;\r\n let lastElement = chartArray.slice(-1).pop();\r\n lastElement.endTime1 = `${Number(year) + 1}-12-31`;\r\n lastElement.endTime2 = `${Number(year) + 1}-12-31`;\r\n let tempArr = chartArray.filter(function (element) {\r\n return (element.endTime1.includes(year) && element.endTime2.includes(year) || element.endTime1.includes(year) && element.endTime2.includes(`${Number(year) + 1}`) || element.endTime1.includes(`${Number(year) + 1}`) && element.endTime2.includes(`${Number(year) + 1}`))\r\n })\r\n this.setState({ chartArr: tempArr, cloneChartArr: this.state.taskArray2, isDefault: false })\r\n } else {\r\n let date = this.state.taskArray2[0].startTime1;\r\n let year = date.substring(0, 4);\r\n this.setState({ chartArr: this.state.taskArray2, cloneChartArr: this.state.taskArray2, startYear: year, isDefault: false })\r\n }\r\n\r\n } else {\r\n if (this.state.selectedValue == 12) {\r\n let chartArray = this.state.previousTaskArray;\r\n let lastElement = chartArray.slice(-1).pop();\r\n lastElement.endTime1 = `${year}-12-31`;\r\n lastElement.endTime2 = `${year}-12-31`;\r\n let tempArr = chartArray.filter(function (element) {\r\n return element.endTime1.includes(year) && element.endTime2.includes(year)\r\n })\r\n this.setState({ chartArr: tempArr, cloneChartArr: this.state.previousTaskArray, isDefault: true })\r\n } else if (this.state.selectedValue == 24) {\r\n let chartArray = this.state.previousTaskArray;\r\n let lastElement = chartArray.slice(-1).pop();\r\n lastElement.endTime1 = `${Number(year) + 1}-12-31`;\r\n lastElement.endTime2 = `${Number(year) + 1}-12-31`;\r\n let tempArr = chartArray.filter(function (element) {\r\n return (element.endTime1.includes(year) && element.endTime2.includes(year) || element.endTime1.includes(year) && element.endTime2.includes(`${Number(year) + 1}`) || element.endTime1.includes(`${Number(year) + 1}`) && element.endTime2.includes(`${Number(year) + 1}`))\r\n })\r\n this.setState({ chartArr: tempArr, cloneChartArr: this.state.previousTaskArray, isDefault: true })\r\n } else {\r\n let date = this.state.previousTaskArray[0].startTime1;\r\n let year = date.substring(0, 4);\r\n this.setState({ chartArr: this.state.previousTaskArray, cloneChartArr: this.state.previousTaskArray, startYear: year, isDefault: true })\r\n }\r\n }\r\n }\r\n\r\n toggleEfforts(event) {\r\n if (event.target.checked) {\r\n this.setState({ selectedEffort: 'Aggressive' })\r\n } else {\r\n this.setState({ selectedEffort: 'Conservative' })\r\n }\r\n\r\n }\r\n\r\n handleChange(data) {\r\n let year = this.state.startYear;\r\n if (data.value == 12) {\r\n let chartArray = this.state.chartArr;\r\n let lastElement = chartArray.slice(-1).pop();\r\n lastElement.endTime1 = `${year}-12-31`;\r\n lastElement.endTime2 = `${year}-12-31`;\r\n let tempArr = chartArray.filter(function (element) {\r\n return element.endTime1.includes(year) && element.endTime2.includes(year)\r\n })\r\n this.setState({ chartArr: tempArr })\r\n } else if (data.value == 24) {\r\n let chartArray = this.state.cloneChartArr;\r\n let lastElement = chartArray.slice(-1).pop();\r\n lastElement.endTime1 = `${Number(year) + 1}-12-31`;\r\n lastElement.endTime2 = `${Number(year) + 1}-12-31`;\r\n let tempArr = chartArray.filter(function (element) {\r\n return (element.endTime1.includes(year) && element.endTime2.includes(year) || element.endTime1.includes(year) && element.endTime2.includes(`${Number(year) + 1}`) || element.endTime1.includes(`${Number(year) + 1}`) && element.endTime2.includes(`${Number(year) + 1}`))\r\n })\r\n this.setState({ chartArr: tempArr })\r\n } else {\r\n let temp = this.state.cloneChartArr;\r\n let lastItem = temp.slice(-1).pop();\r\n let secondLastItem = temp.slice(-2, -1).pop();\r\n lastItem.endTime1 = secondLastItem.endTime1;\r\n lastItem.endTime2 = secondLastItem.endTime2;\r\n\r\n this.setState({ chartArr: this.state.cloneChartArr })\r\n }\r\n this.setState({ selectedValue: data.value })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n {this.props.isCallfromGanntChart ?\r\n \r\n {this.props.isCallfromGanntChart ? null : (this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n
\r\n : \r\n \r\n
\r\n {this.props.input.FirstColumn_Value}
\r\n {this.props.input.SecondColumn_Value != null ? this.props.input.SecondColumn_Value : ''}
\r\n \r\n {this.props.ganntTexts.popUpDesc}\r\n
\r\n \r\n
\r\n }\r\n\r\n \r\n
\r\n {this.props.input.tableName}
\r\n {this.props.input.column1Value != null ? this.props.input.column1Value : ''} {this.props.input.column2Value != null ?( \" : \" + this.props.input.column2Value) : ''} {this.props.input.column3Value != null ?( \" : \" + this.props.input.column3Value) : ''}
\r\n \r\n {this.props.content.enablementSupplierPopupDesc}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n\t\t\t\t{this.props.tabName === this.props.content.onboardingWSTabName || this.props.tabName === this.props.content.enablementRecomTabName?\r\n\t\t\t\t this.props.showEnablementSupplierDetailsModal(this.props.tableName, this.props.columnDetails.firstColumn, this.props.parentColumnValue, (this.props.tabName === this.props.content.enablementTabName && !this.props.fromGanntChart ? this.props.secondParentColumnValue : this.props.data.content),\r\n\t\t\t\t\t(this.props.tabName === this.props.content.enablementTabName ? this.props.data.content : null) )}>\r\n\t\t\t\t\r\n\t\t\t\t{/* */}\r\n\t\t\t\t{this.props.data.content == '*' ? '' : this.props.data.content }\r\n \r\n \r\n\r\n\t\t\t\t{/* {this.props.tabName === this.props.content.onboardingWSTabName ?\r\n\t\t\t\taaaaaaaa \r\n\t\t\t\t: null } */}\r\n\r\n {this.props.tabName === this.props.content.enablementTabName && !this.props.fromGanntChart ? {formatThousands(this.props.data.data.CNT_VENDOR_NAME)} \r\n\t\t\t\t{this.props.data.data.CNT_VENDOR_PER.toFixed(2)}% \r\n\t\t\t\t\r\n\t\t\t\t{ this.props.tableName === this.props.content.networkMatch.catalogMatchHeader || this.props.tableName === this.props.content.networkMatch.integrationMatchHeader ?\r\n { this.props.data.data.CNT_UNIQ_VENDOR_AN_ID } \r\n : null\r\n }\r\n \t\t\t\t\r\n\r\n\t\t\t\t{ this.props.currencySymbol} {convertToMillion(this.props.data.data.SUM_AGGR_SPEND, true)} \t\t\t\t\t\r\n {this.props.data.data.SUM_AGGR_SPEND_PER.toFixed(2)}% \r\n \r\n \r\n {formatThousands(this.props.data.data.SUM_SAP_ARIBA_DOC_PROXY)} \r\n {this.props.data.data.SAP_ARIBA_DOC_PROXY_PER.toFixed(2)}% \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return { \r\n content: state.content.enablementInsight, \r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps) (ExpandableRow)","import React from 'react'\r\nimport ExpandableRow from './ExpandableRow'\r\n//import RecommedationRowContainer from '../RecommedationRowContainer'\r\nimport { convertToMillion, formatThousands } from 'utils/Utils'\r\nimport classNames from \"classnames\";\r\nimport { connect } from 'react-redux'\r\n\r\nclass ExpandableTableRowContainer extends React.Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = {\r\n\t\t\trows: []\r\n\t\t}\r\n\r\n\t\tthis.handleCollapseChange = this.handleCollapseChange.bind(this)\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tif(this.props.data.rows) {\r\n\t\t\tthis.setState({rows: this.props.data.rows})\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentWillReceiveProps(nextProps) {\r\n\t\tif(this.props.data.rows) {\r\n\t\t\tthis.setState({rows: nextProps.data.rows})\r\n\t\t}\r\n\t}\r\n\r\n\thandleCollapseChange(e, row, rows) {\r\n\t\trow.expand = !row.expand\r\n\r\n\t\tthis.setState({rows: rows})\r\n\t}\r\n\r\n\trender() {\r\n\t\t\treturn(\r\n\t\t\t{this.state.rows && this.state.rows.map((row, i) =>\r\n\t\t\t\t{\r\n\t\t\t\t\tvar header = this.handleCollapseChange(e, row, this.state.rows)} \r\n\t\t\t\t\t\t\t\tclassName={classNames({'collapsible': !row.expand, 'active': row.expand})} >\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t this.props.showEnablementSupplierDetailsModal(this.props.tableName, this.props.columnDetails.firstColumn, row.data[this.props.columnDetails.firstColumn], null, null)}>\r\n\t\t\t\t\t\t\t\t\t{row.content !== undefined ? row.content : null } \r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t{this.props.tabName === this.props.content.onboardingWSTabName || this.props.tabName === this.props.content.enablementRecomTabName?\r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.CNT_VENDOR_NAME !== undefined ? formatThousands(row.data.CNT_VENDOR_NAME): null} \r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.CNT_VENDOR_PER !== undefined ? row.data.CNT_VENDOR_PER.toFixed(2) + \"%\": null } \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t{ this.props.tableName === this.props.content.networkMatch.catalogMatchHeader || this.props.tableName === this.props.content.networkMatch.integrationMatchHeader ?\r\n { row.data !== undefined && row.data.CNT_UNIQ_VENDOR_AN_ID !== undefined ? formatThousands(row.data.CNT_UNIQ_VENDOR_AN_ID) : null } \r\n : null\r\n }\r\n \r\n \r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.SUM_AGGR_SPEND !==undefined ? this.props.currencySymbol + convertToMillion(row.data.SUM_AGGR_SPEND, true): null } \r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.SUM_AGGR_SPEND_PER !== undefined ? row.data.SUM_AGGR_SPEND_PER.toFixed(2)+\"%\" : null } \r\n \r\n \r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.SUM_SAP_ARIBA_DOC_PROXY !== undefined ? formatThousands(row.data.SUM_SAP_ARIBA_DOC_PROXY) : null } \r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.SAP_ARIBA_DOC_PROXY_PER !== undefined ? row.data.SAP_ARIBA_DOC_PROXY_PER.toFixed(2)+\"%\" : null } \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\tlet rows = []\r\n\t\t\t\t\tif(row.expand) {\r\n\t\t\t\t\t\trows = row.collapseChild.map(value => {\r\n\t\t\t\t\t\t\tif(value.content === row.content) {\r\n\t\t\t\t\t\t\t\treturn \r\n\t\t\t\t\t\t})\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\treturn {header}{rows} \r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t\t)}\r\n\t\t \r\n\t\t);\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return { \r\n content: state.content.enablementInsight, \r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps) (ExpandableTableRowContainer)\r\n","\r\nimport React from 'react'\r\nimport ExpandableRow from './EnablementInsight/ExpandableRow'\r\nimport { convertToMillion, formatThousands } from 'utils/Utils'\r\nimport classNames from \"classnames\";\r\n\r\nclass RecommedationRowContainer extends React.Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = {\r\n\t\t\trows: []\r\n\t\t}\r\n\r\n\t\tthis.handleCollapseChange = this.handleCollapseChange.bind(this)\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tif(this.props.data) {\r\n\t\t\tthis.setState({rows: this.props.data})\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentWillReceiveProps(nextProps) {\r\n\t\tif(this.props.data) {\r\n\t\t\tthis.setState({rows: nextProps.data})\r\n\t\t}\r\n\t}\r\n\r\n\thandleCollapseChange(e, row, rows) {\r\n\t\trow.expand = !row.expand\r\n\r\n\t\tthis.setState({rows: rows})\r\n\t}\r\n\r\n\trender() {\r\n\t\t\treturn(\r\n\t\t\t{this.state.rows && this.state.rows.map((row, i) =>\r\n\t\t\t\t{\r\n\t\t\t\t\tvar header = this.handleCollapseChange(e, row, this.state.rows)} \r\n\t\t\t\t\t\t\t\tclassName={classNames({'collapsibleWaveStream': !row.expand, 'activeWaveStream': row.expand})} style={{ paddingLeft: '20px !important' }} >\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t this.props.showEnablementSupplierDetailsModal(this.props.tableName, this.props.columnDetails.firstColumn, row.data[this.props.columnDetails.firstColumn], row.data[this.props.columnDetails.secondColumn] , null)}>\r\n\t\t\t\t\t\t\t\t\t{row.content !== undefined ? row.content : null } \r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.CNT_VENDOR_NAME !== undefined ? formatThousands(row.data.CNT_VENDOR_NAME): null} \r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.CNT_VENDOR_PER !== undefined ? row.data.CNT_VENDOR_PER.toFixed(2) + \"%\": null } \r\n\t\t\t\t\t\t\t\t\t\r\n {/* { row.data !== undefined && row.data.CNT_UNIQ_VENDOR_AN_ID !== undefined ? formatThousands(row.data.CNT_UNIQ_VENDOR_AN_ID) : null } */}\r\n \r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.SUM_AGGR_SPEND !==undefined ? this.props.currencySymbol + convertToMillion(row.data.SUM_AGGR_SPEND, true): null } \r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.SUM_AGGR_SPEND_PER !== undefined ? row.data.SUM_AGGR_SPEND_PER.toFixed(2)+\"%\" : null } \r\n \r\n \r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.SUM_SAP_ARIBA_DOC_PROXY !== undefined ? formatThousands(row.data.SUM_SAP_ARIBA_DOC_PROXY) : null } \r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.SAP_ARIBA_DOC_PROXY_PER !== undefined ? row.data.SAP_ARIBA_DOC_PROXY_PER.toFixed(2)+\"%\" : null } \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\tlet rows = []\r\n\t\t\t\t\tif(row.expand) {\r\n\t\t\t\t\t\trows = row.collapseChild.map(value => {\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\treturn {header}{rows} \r\n\t\t\t\t}\r\n\t\t\t)}\r\n\t\t \r\n\t\t);\r\n\t}\r\n}\r\n\t\r\n\r\nexport default RecommedationRowContainer\r\n","import React from 'react'\r\n//import ExpandableRow from '../ExpandableRow'\r\nimport RecommedationRowContainer from '../RecommedationRowContainer'\r\nimport { convertToMillion, formatThousands } from 'utils/Utils'\r\nimport classNames from \"classnames\";\r\n\r\nclass EnablementWaveRowContainer extends React.Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = {\r\n\t\t\trows: []\r\n\t\t}\r\n\r\n\t\tthis.handleCollapseChange = this.handleCollapseChange.bind(this)\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tif(this.props.data.rows) {\r\n\t\t\tthis.setState({rows: this.props.data.rows})\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentWillReceiveProps(nextProps) {\r\n\t\tif(this.props.data.rows) {\r\n\t\t\tthis.setState({rows: nextProps.data.rows})\r\n\t\t}\r\n\t}\r\n\r\n\thandleCollapseChange(e, row, rows) {\r\n\t\t\r\n\t\trow.expand = !row.expand\r\n\r\n\t\tthis.setState({rows: rows})\r\n\t}\r\n\r\n\trender() {\r\n\t\t\treturn(\r\n\t\t\t{this.state.rows && this.state.rows.map((row, i) =>\r\n\t\t\t\t{\r\n\t\t\t\t\tvar header = \r\n\t\t\t\t\t\t\t\t\t this.handleCollapseChange(e, row, this.state.rows)} width='25%' >\r\n\t\t\t\t\t\t\t\t\t this.props.showEnablementSupplierDetailsModal(this.props.tableName, this.props.columnDetails.firstColumn, row.data[this.props.columnDetails.firstColumn], null, null)}>\r\n\t\t\t\t\t\t\t\t\t{row.content !== undefined ? row.content : null } \r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t{ row.data !== undefined && row.data.WAVE_DESCRIPTION !== undefined ? row.data.WAVE_DESCRIPTION : null}\r\n\t\t\t\t\t\t\t\t\t![](\"/images/edit.jpg\")
this.props.handleWaveDescriptionChange(row)} width=\"15\" />\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.CNT_VENDOR_NAME !== undefined ? formatThousands(row.data.CNT_VENDOR_NAME): null} \r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.CNT_VENDOR_PER !== undefined ? row.data.CNT_VENDOR_PER.toFixed(2) + \"%\": null } \r\n\t\t\t\t\t\t\t\t\t\r\n {/* { row.data !== undefined && row.data.CNT_UNIQ_VENDOR_AN_ID !== undefined ? formatThousands(row.data.CNT_UNIQ_VENDOR_AN_ID) : null } */}\r\n \r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.SUM_AGGR_SPEND !==undefined ? this.props.currencySymbol + convertToMillion(row.data.SUM_AGGR_SPEND, true): null } \r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.SUM_AGGR_SPEND_PER !== undefined ? row.data.SUM_AGGR_SPEND_PER.toFixed(2)+\"%\" : null } \r\n \r\n \r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.SUM_SAP_ARIBA_DOC_PROXY !== undefined ? formatThousands(row.data.SUM_SAP_ARIBA_DOC_PROXY) : null } \r\n\t\t\t\t\t\t\t\t\t{row.data !== undefined && row.data.SAP_ARIBA_DOC_PROXY_PER !== undefined ? row.data.SAP_ARIBA_DOC_PROXY_PER.toFixed(2)+\"%\" : null } \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\tlet rows = []\r\n\t\t\t\t\tif(row.expand) {\r\n\t\t\t\t\t\trows = {header}{rows} \r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t\t)}\r\n\t\t\r\n\t\t);\r\n\t}\r\n}\r\n\r\nexport default EnablementWaveRowContainer\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport Button from 'UI/Button'\r\nimport { enablementInsightSuccess,\r\n enablementInsightFailure,\r\n enablementInsightLoading, \r\n\tresetError, updateWaveDescription } from 'actions/spendActions'\r\nimport moment from 'moment'\r\n\r\nclass WaveDescriptionPopup extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { \r\n waveDescription: '' \r\n }\r\n this.clearWaveDescription = this.clearWaveDescription.bind(this)\r\n \r\n }\r\n\r\n clearWaveDescription() {\r\n this.setState({waveDescription: ''})\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({ enablementWave: this.props.enablementWave, waveDescription: this.props.data.WAVE_DESCRIPTION })\r\n }\r\n\r\n addWaveDescription(){\r\n var waveDescription = document.getElementById(\"waveDesc\").value \r\n this.props.addWaveDescription(waveDescription)\r\n }\r\n\r\n onChange(e) {\r\n this.setState({ waveDescription : e.currentTarget.value })\r\n }\r\n\r\n render() {\r\n return ( \r\n \r\n {this.props.rowData.SAP_SUPPLIER_ENABLE_LOG} \r\n {this.props.rowData.INTEGRATION_MATCH_TYPE} \r\n {this.props.rowData.WORK_STREAM} \r\n {this.props.rowData.AGGRESSIVE_DURATION} \r\n {this.props.rowData.CONSERVATIVE_DURATION} \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n user: state.default,\r\n spendDetails: state.spendDetails,\r\n content: state.content.ganntChartTab,\r\n validation: state.content.validation,\r\n currencySymbols: state.content.CurrencySymbols\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n defineScopeLoading: (bool) => dispatch(defineScopeLoading(bool)),\r\n defineScopeSuccess: (bool) => dispatch(defineScopeSuccess(bool)),\r\n defineScopeFailure: (error) => dispatch(defineScopeFailure(error)),\r\n getGanntChartEnablementWavesLookup: (dmcId, vsID, userEmail) => dispatch(getGanntChartEnablementWavesLookup(dmcId, vsID, userEmail))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EnablementMappingKeysTable)","import React from 'react'\r\nimport { connect } from 'react-redux'\r\n\r\nimport {\r\n enablementInsightSuccess,\r\n enablementInsightFailure,\r\n enablementInsightLoading,\r\n resetError, updateWaveDescription\r\n} from 'actions/spendActions'\r\n\r\nimport { convertToMillion, formatThousands } from 'utils/Utils'\r\nimport { store } from 'index'\r\nimport ExpandableTableRowContainer from './ExpandableTableRowContainer';\r\nimport EnablementWaveRowContainer from './EnablementWaveRowContainer';\r\nimport WaveDescriptionPopup from './WaveDescriptionPopup';\r\nimport { PopupE } from 'UI/CustomComponents/Controls';\r\nimport EnablementMappingKeysTable from 'components/Spend/EnablementMappingKeysTable'\r\n\r\nclass ExpandableTable extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n {\r\n this.state = {\r\n industry: '',\r\n industryOption: [],\r\n supplierData: [],\r\n supplierDetails: [],\r\n currencySymbol: '',\r\n data: [],\r\n columnDetails: {},\r\n helpText: '',\r\n openWaveDesc: false,\r\n waveDescriptionData: '',\r\n showEnablementRecWarning : false,\r\n openEnablementRecWarningPopup : false,\r\n inputParam: {\r\n DMC_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.DMC_ID : 0\r\n , VS_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.VS_ID : 0,\r\n User_Email: this.props.spendDetails.currentActiveRequest !== undefined &&\r\n this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester,\r\n Wave_Description: '',\r\n Enablement_Wave: ''\r\n },\r\n }\r\n\r\n this.handleWaveDescriptionChange = this.handleWaveDescriptionChange.bind(this)\r\n this.outsideWaveDescPopupClick = this.outsideWaveDescPopupClick.bind(this)\r\n this.closeWaveDescPopUp = this.closeWaveDescPopUp.bind(this)\r\n this.addWaveDescription = this.addWaveDescription.bind(this)\r\n // this.openGanttChartEnablementStrategy =this.openGanttChartEnablementStrategy(this)\r\n // this.closeGanttChartEnablementStrategy =this.closeGanttChartEnablementStrategy(this)\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n //this.loadInitialData()\r\n window.scrollTo(0, 0);\r\n let columnDetails = this.getFirstColumnName()\r\n this.setState({\r\n currencySymbol: this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency !== undefined\r\n && this.props.spendDetails.currentActiveRequest.Currency.trim() !== ''\r\n && this.props.spendDetails.currentActiveRequest.Currency.trim() !== \"0\" ?\r\n this.props.spendDetails.currentActiveRequest.Currency.trim() : 'USD']\r\n , columnDetails: columnDetails\r\n });\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n let showWarning = false;\r\n if (this.props.tableName == this.props.content.enablementWaveDetails.enablementRecommendationHeader) {\r\n nextProps.data.rows.some(function(row , i) {\r\n if (row.content.toLowerCase().includes('candidate')) {\r\n showWarning = true;\r\n return true\r\n }\r\n });\r\n }\r\n\r\n this.setState({ data: nextProps.data , showEnablementRecWarning : showWarning})\r\n }\r\n\r\n\r\n getFirstColumnName() {\r\n var firstColumnName;\r\n var firstColumn;\r\n\r\n var secondColumnName;\r\n var secondColumn;\r\n var thirdColumn;\r\n var helpText;\r\n\r\n switch (this.props.tableName) {\r\n case 'Enablement Strategy':\r\n firstColumnName = this.props.content.enablementWaveFstColHeader;\r\n firstColumn = this.props.content.enablementWaveFstCol;\r\n helpText = this.props.content.enablementWaveHelpText;\r\n\r\n secondColumnName = this.props.content.enablementWaveSecColHeader;\r\n secondColumn = this.props.content.enablementWaveSecCol;\r\n break;\r\n\r\n case 'Enablement Recommendation':\r\n firstColumnName = this.props.content.enablementRecmdFstColHeader;\r\n firstColumn = this.props.content.enablementRecmdFstCol;\r\n helpText = this.props.content.enablementRecmdHelpText;\r\n secondColumnName = this.props.content.enablementRecmdSecColHeader;\r\n secondColumn = this.props.content.enablementRecmdSecCol;\r\n thirdColumn = this.props.content.enablementRecmdThirdCol;\r\n break; \r\n\r\n case 'Enablement Strategy by Onboarding Workstream with Enablement Recommendation':\r\n firstColumnName = this.props.content.enablementWaveFstColHeader;\r\n firstColumn = this.props.content.enablementWaveFstCol;\r\n helpText = this.props.content.enablementWaveHelpText;\r\n\r\n secondColumnName = this.props.content.enablementWaveSecColHeader;\r\n secondColumn = this.props.content.enablementWaveSecCol;\r\n thirdColumn = this.props.content.enablementWaveThirdCol;\r\n break; \r\n\r\n case 'Enablement Strategy by Onboarding Workstream with L4 Industry Name':\r\n firstColumnName = this.props.content.enablementWaveFstColHeader;\r\n firstColumn = this.props.content.enablementWaveFstCol;\r\n helpText = this.props.content.enablementWaveHelpText;\r\n\r\n secondColumnName = this.props.content.enablementWaveSecColHeader;\r\n secondColumn = this.props.content.enablementWaveSecCol;\r\n thirdColumn = this.props.content.enablementWaveL4IndustryCol; \r\n break;\r\n\r\n case 'Enablement Strategy by Onboarding Workstream with ISO Country Code':\r\n firstColumnName = this.props.content.enablementWaveFstColHeader;\r\n firstColumn = this.props.content.enablementWaveFstCol;\r\n helpText = this.props.content.enablementWaveHelpText;\r\n secondColumnName = this.props.content.enablementWaveSecColHeader;\r\n secondColumn = this.props.content.enablementWaveSecCol;\r\n thirdColumn = this.props.content.enablementWaveISOCountryCol; \r\n break; \r\n\r\n case 'Enablement Strategy by Onboarding Workstream with Details':\r\n firstColumnName = this.props.content.enablementWaveFstColHeader;\r\n firstColumn = this.props.content.enablementWaveFstCol;\r\n helpText = this.props.content.enablementWaveHelpText;\r\n\r\n secondColumnName = this.props.content.enablementWaveSecColHeader;\r\n secondColumn = this.props.content.enablementWaveSecCol;\r\n thirdColumn = this.props.content.enablementWaveWorkStreamDetailCol;\r\n break; \r\n\r\n case 'Catalog Match':\r\n firstColumnName = this.props.content.catalogMatchFstColHeader;\r\n firstColumn = this.props.content.catalogMatchFstCol;\r\n helpText = this.props.content.catalogMatchHelpText;\r\n\r\n secondColumnName = this.props.content.catalogMatchSecColHeader;\r\n secondColumn = this.props.content.catalogMatchSecCol\r\n break;\r\n\r\n\r\n case 'Integration Match':\r\n firstColumnName = this.props.content.integrationMatchFstColHeader;\r\n firstColumn = this.props.content.integrationMatchFstCol;\r\n helpText = this.props.content.integrationMatchHelpText;\r\n\r\n secondColumnName = this.props.content.integrationMatchSecColHeader;\r\n secondColumn = this.props.content.integrationMatchSecCol;\r\n break;\r\n\r\n case 'Onboarding Workstreams':\r\n firstColumn = this.props.content.enablementWaveSecCol;\r\n secondColumn = this.props.content.enablementWaveWorkStreamDetailCol;\r\n thirdColumn = 'all';\r\n break;\r\n }\r\n\r\n let columnDetails = { firstColumnName: firstColumnName, firstColumn: firstColumn, secondColumnName: secondColumnName, secondColumn: secondColumn, thirdColumn: thirdColumn, helpText: helpText }\r\n return columnDetails;\r\n }\r\n\r\n getBackgroundColor() {\r\n let bgColor;\r\n switch (this.props.tableSequence) {\r\n case \"1\":\r\n bgColor = '#00BFD3';//'#0f46a7';\r\n break;\r\n case \"2\":\r\n bgColor = '#BE008C'//'#760a85'\r\n break;\r\n case \"3\":\r\n bgColor = '#FA9100'//'#e35500'\r\n break;\r\n case \"4\":\r\n bgColor = '#93C939'//'#348026'\r\n break;\r\n case \"5\":\r\n bgColor = '#999999'//'#7f7f7f'\r\n break;\r\n case \"6\":\r\n bgColor = '#b90c0d';//'#0f46a7';\r\n break;\r\n case \"7\":\r\n bgColor = '#367dc4'//'#760a85'\r\n break;\r\n case \"8\":\r\n bgColor = '#69767c'//'#e35500'\r\n break;\r\n case \"9\":\r\n bgColor = '#de890d'//'#348026'\r\n break;\r\n case \"10\":\r\n bgColor = '#f29b1d'\r\n break;\r\n case \"11\":\r\n bgColor = '#f5b04d'\r\n break;\r\n case \"12\":\r\n bgColor = '#848f94'\r\n break;\r\n case \"13\":\r\n bgColor = '#9ea8ad'\r\n break;\r\n case \"14\":\r\n bgColor = '#bac1c4'\r\n break;\r\n case \"15\":\r\n bgColor = '#d5dadc'\r\n break;\r\n case \"16\":\r\n bgColor = '#358a4d'\r\n break;\r\n case \"17\":\r\n bgColor = '#3fa45b'\r\n break;\r\n case \"18\":\r\n bgColor = '#4cba6b'\r\n break;\r\n case \"19\":\r\n bgColor = '#dc0d0e'\r\n break;\r\n case \"20\":\r\n bgColor = '#2a6d3c'\r\n break;\r\n case \"21\":\r\n bgColor = '#358a4d'\r\n break;\r\n case \"22\":\r\n bgColor = '#3fa45b'\r\n break;\r\n case \"23\":\r\n bgColor = '#4cba6b'\r\n break;\r\n case \"24\":\r\n bgColor = '#71c989'\r\n break;\r\n case \"25\":\r\n bgColor = '#f8cc8c'\r\n break;\r\n case \"26\":\r\n bgColor = '#f0ab00'\r\n break;\r\n case \"27\":\r\n bgColor = '#a1dbb1'\r\n break;\r\n }\r\n\r\n return bgColor;\r\n }\r\n\r\n handleWaveDescriptionChange(selectedRows) {\r\n // console.log(\"control parent method..................\",selectedRows)\r\n this.setState({ openWaveDesc: true, waveDescriptionData: selectedRows.data })\r\n }\r\n\r\n closeWaveDescPopUp() {\r\n this.setState({ openWaveDesc: !this.state.openWaveDesc })\r\n }\r\n\r\n outsideWaveDescPopupClick() {\r\n this.setState({ openWaveDesc: false })\r\n }\r\n\r\n addWaveDescription(waveDesc) {\r\n var selectedWaveRecord = this.state.inputParam\r\n selectedWaveRecord.Wave_Description = waveDesc\r\n selectedWaveRecord.Enablement_Wave = this.state.waveDescriptionData.ENABLEMENT_WAVE\r\n\r\n this.props.updateWaveDescription(selectedWaveRecord)\r\n .then((response) => {\r\n if (response !== undefined && response.status === 200 && response.data.Result !== undefined) {\r\n this.props.enablementInsightSuccess(true)\r\n this.setState({ openWaveDesc: !this.state.openWaveDesc })\r\n this.props.reloadEnablementWave(true)\r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator', isError: 'Yes' })\r\n this.props.enablementInsightFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.setState({ responseMsg: 'An error has occurred', isError: 'Yes' })\r\n this.props.enablementInsightFailure(this.props.content.error)\r\n }\r\n })\r\n }\r\n\r\n openGanttChartEnablementStrategy()\r\n {\r\n this.setState({ openEnablementRecWarningPopup : true });\r\n }\r\n\r\n closeGanttChartEnablementStrategy()\r\n {\r\n this.setState({ openEnablementRecWarningPopup : false });\r\n }\r\n\r\n render() {\r\n\r\n return (\r\n \r\n {this.props.index === 0 ?\r\n {bindValues.RESOURCE_TYPE} \r\n :\r\n this.props.index !== 1 ?\r\n {bindValues.RESOURCE_TYPE} \r\n :\r\n null\r\n }\r\n {bindValues.ACCOUNT_TYPE} \r\n {this.props.index === 0 ?\r\n {''} \r\n :\r\n this.props.index !== 1 ?\r\n {''} \r\n : null\r\n }\r\n {this.props.index === 0 ?\r\n \r\n \r\n\r\n :\r\n this.props.index !== 1 ?\r\n \r\n \r\n : null\r\n }\r\n {\r\n // this.props.isAdmin ?\r\n \r\n \r\n // :\r\n // {bindValues.WAVE_1} \r\n }\r\n {\r\n // this.props.isAdmin ?\r\n \r\n \r\n //:\r\n //{bindValues.WAVE_N} \r\n }\r\n {bindValues.SUPPLIER_WAVE_1} \r\n {bindValues.SUPPLIER_WAVE_N} \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n language: state.language,\r\n ui: state.content.ui,\r\n user: state.default,\r\n spendDetails: state.spendDetails,\r\n content: state.content.spendAnalysis.enablementResourceParamaeters,\r\n }\r\n}\r\n\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getEnablementResourceParameters: (DMCId, VSId, userEmail) => dispatch(getEnablementResourceParameters(DMCId, VSId, userEmail)),\r\n getEnablementResourceParametersAdmin: (soltionInScope) => dispatch(getEnablementResourceParametersAdmin(soltionInScope)),\r\n updateEnablementResourceParameters: (records, model) => dispatch(updateEnablementResourceParameters(records, model)),\r\n pendingChanges: (changes) => dispatch(pendingChanges(changes)),\r\n resetError: () => dispatch(resetError()),\r\n isEnablementStrategyContainerPage: obj => dispatch(isEnablementStrategyContainerPage(obj))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EnablementResourceParameters)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport FaAngleRight from 'react-icons/lib/fa/angle-right'\r\nimport classNames from \"classnames\";\r\nimport Popup from \"reactjs-popup\";\r\nimport Modal from 'reboron/OutlineModal'\r\nimport Button from 'UI/Button'\r\n\r\nimport IndustryOverridePopUp from '../IndustryOverridePopUp'\r\nimport { PopupE } from 'UI/CustomComponents/Controls';\r\n\r\nimport {\r\n getYourFileSuccess,\r\n getYourFileLoading,\r\n resetError,\r\n getYourFileFailure,\r\n getYourFilesDetails,\r\n currentActiveRequest,\r\n UpdateRequestParameter,\r\n getAllEnablementParameterPriority,\r\n updateEnablementParameterPriority,\r\n pendingChanges,\r\n getEnablementDetails\r\n , redirectFromWizard\r\n} from 'actions/spendActions'\r\n\r\nimport {\r\n updateEnablementStrategyWaveData\r\n} from 'actions/kpiActions'\r\n\r\nimport { changeModalStyle, changeModalContentStyle, backdropStyle, path } from 'Constants'\r\n\r\nconst changeBackdropStyle = Object.assign({}, backdropStyle);\r\nchangeBackdropStyle.zIndex = '1050';\r\n\r\nconst alertModalStyle = Object.assign({}, changeModalStyle);\r\nalertModalStyle.zIndex = '1060';\r\nalertModalStyle.width = '33%';\r\n\r\nclass EnablementStrategyWizard extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n respnseMessage: '',\r\n isError: false,\r\n test: JSON.stringify(this.props.spendDetails.currentActiveRequest),\r\n isActive: '',\r\n selectedCategory: '',\r\n data: [],\r\n inputParam: {\r\n DMC_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.DMC_ID : 0\r\n , VS_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.VS_ID : 0,\r\n User_Email: this.props.spendDetails.currentActiveRequest !== undefined &&\r\n this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester,\r\n },\r\n apiResponse: [],\r\n editedItemPriority: [],\r\n isPopupOpen: false,\r\n pendingAutoWaveChanges: false,\r\n autoWavePriority: [],\r\n uniquePriority: [],\r\n initialData: [],\r\n agreeToRecast: false,\r\n isReadOnly: false,\r\n isWarning: false,\r\n isSucess: false,\r\n cntToSetWarning: 0,\r\n isAllowedToEdit: true,\r\n isExpand: false,\r\n count: 0\r\n }\r\n\r\n this.onLoad = this.onLoad.bind(this);\r\n this.handleSave = this.handleSave.bind(this);\r\n this.showModal = this.showModal.bind(this)\r\n this.redirect = this.redirect.bind(this)\r\n\r\n this.newVariable = 0\r\n }\r\n\r\n onLoad() {\r\n\r\n this.props.getAllEnablementParameterPriority(this.state.inputParam).then(response => {\r\n if (response.status === 200) {\r\n if (response.data.Result.length === 0) {\r\n this.setState({ responseMessage: this.props.wizard.reimport, isLoading: false, isError: true });\r\n this.props.getYourFileLoading(false)\r\n }\r\n\r\n var autoWaveData = response.data.Result.filter(d => d.FIELD_NAME === \"AUTO_WAVE_HEADER\"); // right side table data\r\n ////console.log(\"autowaveData--\",autoWaveData)\r\n // autoWaveData.map((item)=>\r\n // { \r\n // if(item.FIELD_VALUE === \"L4_INDUSTRY_GICS_ID\")\r\n // {\r\n // item.PRIORITY_NUM = 1 // set default 1 for L4_INDUSTRY\r\n // }\r\n // })\r\n\r\n\r\n var existingPriorityData = response.data.Result.filter(d => d.FIELD_NAME === \"AUTO_WAVE_HEADER\" && d.PRIORITY_NUM > 0); // left side table default data\r\n\r\n let activeCategory;\r\n let activeCategoryDesc;\r\n let existingData;\r\n //console.log(\"active state: \", this.state.isActive)\r\n if (this.state.isActive !== '') {\r\n activeCategory = this.state.isActive\r\n activeCategoryDesc = this.state.selectedCategory\r\n existingData = response.data.Result.filter(d => d.FIELD_NAME === this.state.isActive); // left side table default data \r\n }\r\n else if (existingPriorityData.length !== 0) {\r\n activeCategory = existingPriorityData[0].FIELD_VALUE\r\n activeCategoryDesc = existingPriorityData[0].FIELD_DESC\r\n existingData = response.data.Result.filter(d => d.FIELD_NAME === existingPriorityData[0].FIELD_VALUE); // left side table default data\r\n } else {\r\n activeCategory = \"L4_INDUSTRY_GICS_ID\"\r\n activeCategoryDesc = \"L4 Industry Name(L1-L4 GICS)\"\r\n existingData = response.data.Result.filter(d => d.FIELD_NAME === \"L4_INDUSTRY_GICS_ID\")\r\n }\r\n\r\n var dict = {}\r\n\r\n let isRestrict = false;\r\n let uniquePriority = this.state.uniquePriority\r\n autoWaveData.map((item) => {\r\n if ((item.FIELD_VALUE === \"L4_INDUSTRY_GICS_ID\" || item.FIELD_VALUE === \"ERP_COMMODITY_CODE1\" || item.FIELD_VALUE === \"ERP_COMMODITY_CODE2\")\r\n && item.PRIORITY_NUM > 0) {\r\n uniquePriority.push(item.PRIORITY_NUM)\r\n dict[item.FIELD_DESC] = item.PRIORITY_NUM;\r\n isRestrict = true;\r\n return;\r\n }\r\n else if (item.PRIORITY_NUM > 0) {\r\n uniquePriority.push(item.PRIORITY_NUM)\r\n dict[item.FIELD_DESC] = item.PRIORITY_NUM;\r\n }\r\n })\r\n // console.log(\"jsdgkjdhfgdshfgdsh\", existingPriorityData)\r\n this.setState({\r\n apiResponse: response.data.Result,\r\n data: existingData,\r\n initialData: existingData,\r\n isActive: !!this.state.isActive ? this.state.isActive : activeCategory,\r\n selectedCategory: !!this.state.selectedCategory ? this.state.selectedCategory : activeCategoryDesc,\r\n autoWavePriority: autoWaveData,\r\n uniquePriority: uniquePriority, dictState: dict\r\n })\r\n //console.log(\"default data-------\", existingData) \r\n this.props.EnablementStrategyrefreshPriorityTable(false);\r\n this.props.handleStrategyWizardChanges();\r\n this.setState({ isExpand: true })\r\n\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let user = this.props.user.user.Email;\r\n if(this.props.shouldCallWaveCalc)\r\n {\r\n this.props.updateEnablementStrategyWaveData(dmcId, vsId, user)\r\n .then((response) => {\r\n //this.props.EnablementStrategyrefreshResourceTable(true);\r\n this.props.UpdateKPIDataLoaded(false);\r\n });\r\n }\r\n else{\r\n this.props.EnablementStrategyrefreshResourceTable(true);\r\n }\r\n }\r\n else {\r\n this.setState({\r\n isLoading: false,\r\n isError: true,\r\n respnseMessage: 'An error has occured'\r\n })\r\n }\r\n }).catch((error) => {\r\n this.setState({\r\n isLoading: false,\r\n isError: true,\r\n respnseMessage: 'An error has occured'\r\n })\r\n })\r\n }\r\n\r\n GetEnablementDetails(inputParam) {\r\n\r\n this.props.getEnablementDetails(inputParam)\r\n .then((response) => {\r\n if (response !== undefined && response.status === 200 && response.data.Result !== undefined) {\r\n this.props.getYourFileLoading(false)\r\n var enablementWaveData;\r\n\r\n var tables = response.data.Result.map(\r\n function (table) {\r\n if (table['ENABLEMENT_WAVE'] !== undefined) {\r\n enablementWaveData = table['ENABLEMENT_WAVE']\r\n }\r\n }\r\n )\r\n\r\n // if (enablementWaveData.filter(d => d.WAVE_DESCRIPTION !== null).length !== 0) {\r\n // this.setState({\r\n // isWaveDescHaveValue: true,\r\n // responseMessage: this.props.wizard.checkWaveDesc,\r\n // isAllowedToEdit: false,\r\n // isReadOnly: true,\r\n // isError: true\r\n // })\r\n // } else {\r\n // this.setState({\r\n // isWaveDescHaveValue: false,\r\n // responseMessage: '',\r\n // isAllowedToEdit: true,\r\n // isReadOnly: false,\r\n // isError: false\r\n // })\r\n // }\r\n // console.log(\"1\")\r\n // //console.log(\"Enablement Wave Data: \", enablementWaveData ) \r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ responseMessage: 'API service is down. Please contact administrator', isError: true })\r\n }\r\n else {\r\n this.setState({ responseMessage: 'An error has occurred', isError: true })\r\n }\r\n })\r\n }\r\n\r\n // componentDidMount() {\r\n // this.setState({ isExpand: !this.state.isExpand })\r\n // this.GetEnablementDetails(this.state.inputParam)\r\n // setTimeout(() => {\r\n // this.onLoad()\r\n // }, 1000)\r\n // }\r\n\r\n componentDidUpdate(nextProps) {\r\n if ((nextProps.isWizardSaveClicked !== this.props.isWizardSaveClicked\r\n || nextProps.isRefresh != this.props.isRefresh)\r\n && this.props.isRefresh\r\n //&& !nextProps.isWizardSaveClicked\r\n ) {\r\n this.setState({ isExpand: !this.state.isExpand })\r\n this.GetEnablementDetails(this.state.inputParam)\r\n setTimeout(() => {\r\n //this.onLoad();\r\n this.handleSave();\r\n }, 1000)\r\n }\r\n\r\n }\r\n\r\n // shouldComponentUpdate(nextProps) {\r\n // // if (nextProps.isWizardSaveClicked !== this.props.isWizardSaveClicked && nextProps.isWizardSaveClicked\r\n // // && this.props.isRefresh\r\n // if ((nextProps.isWizardSaveClicked !== this.props.isWizardSaveClicked\r\n // || nextProps.isRefresh != this.props.isRefresh)\r\n // && this.props.isRefresh\r\n // && nextProps.isWizardSaveClicked\r\n // ) {\r\n // // this.props.handleStrategyWizardChanges()\r\n // setTimeout(() => {\r\n // this.handleSave();\r\n // }, 2000)\r\n // }\r\n // return true\r\n // }\r\n\r\n handleCategoryChange(e) {\r\n var value = e.target.title === \"L4_INDUSTRY_GICS_ID\" ? e.target.title : e.target.value;\r\n this.setState({\r\n isReadOnly: this.state.autoWavePriority.find(d => d.FIELD_VALUE === value && d.PRIORITY_NUM > 0) ? false : true,\r\n data: this.state.apiResponse.filter(d => d.FIELD_NAME === value),\r\n initialData: this.state.apiResponse.filter(d => d.FIELD_NAME === value),\r\n isActive: value,\r\n selectedCategory: e.target.title === \"L4_INDUSTRY_GICS_ID\" ? \"L4 Industry Name(L1-L4 GICS)\" : e.target.innerText,\r\n isError: false,\r\n //responseMessage: '',\r\n pendingMsg: this.state.pendingAutoWaveChanges ? this.props.wizard.pendingPriorityChanges : ''\r\n })\r\n }\r\n\r\n onAutoWaveChangeEvent(val, item) {\r\n this.setState({ pendingMsg: this.props.wizard.pendingPriorityChanges, isSucess: false })//, isError: false })\r\n var key = val.target.innerText\r\n var value = Number(val.target.value)\r\n let updatedRecords = this.state.editedItemPriority\r\n\r\n if (/^(\\-(\\d*))$/.test(value) || !isNaN(value) && (value <= 8) && Number.isInteger(value)) {\r\n var editingRow = item;\r\n editingRow.USER_ID = this.state.inputParam.User_Email\r\n editingRow.DMC_ID = this.state.inputParam.DMC_ID\r\n editingRow.VS_ID = this.state.inputParam.VS_ID\r\n\r\n if (val.target.id === 'PRIORITY_NUM') {\r\n //editingRow[val.target.id] = value \r\n\r\n var dict = this.state.dictState\r\n editingRow[val.target.id] = value\r\n\r\n var count = 0;\r\n var uniqueCount = 1;\r\n //User will only be able to put in a number on 1 of the first 3 priorities in the Auto Wave category\r\n\r\n this.state.autoWavePriority.map(record => {\r\n\r\n if (record.FIELD_VALUE === \"L4_INDUSTRY_GICS_ID\" && record.PRIORITY_NUM > 0) {\r\n count = count + 1;\r\n } else if (record.FIELD_VALUE === \"ERP_COMMODITY_CODE1\" && record.PRIORITY_NUM > 0) {\r\n count = count + 1;\r\n } else if (record.FIELD_VALUE === \"ERP_COMMODITY_CODE2\" && record.PRIORITY_NUM > 0) {\r\n count = count + 1;\r\n }\r\n\r\n if (record.PRIORITY_NUM > 0) {\r\n var recordCnt = this.state.autoWavePriority.filter(rec => rec.PRIORITY_NUM === record.PRIORITY_NUM)\r\n if (recordCnt.length > 1) {\r\n uniqueCount = uniqueCount + 1;\r\n }\r\n }\r\n\r\n })\r\n\r\n if (count > 1) {\r\n this.setState({ warning1Msg: this.props.wizard.allowedToSetOnlyOnePriority })\r\n } else {\r\n this.setState({ warning1Msg: '' })\r\n }\r\n\r\n if (uniqueCount > 1) {\r\n this.setState({ warning2Msg: this.props.wizard.uniquePriority })\r\n } else {\r\n this.setState({ warning2Msg: '' })\r\n }\r\n\r\n\r\n // code for unique priority value\r\n\r\n if (this.state.editedItemPriority.length === 0 ||\r\n this.state.editedItemPriority.find(a => a.FIELD_VALUE === editingRow.FIELD_VALUE) === undefined ||\r\n this.state.editedItemPriority.find(a => a.PRIORITY_NUM === value) === undefined) {\r\n editingRow.FIELD_NAME = \"AUTO_WAVE_HEADER\"\r\n editingRow.FIELD_VALUE = item.FIELD_VALUE\r\n updatedRecords.push(editingRow)\r\n this.setState({ //responseMessage: this.props.wizard.pendingPriorityChanges, \r\n editedItemPriority: updatedRecords,\r\n pendingAutoWaveChanges: updatedRecords.find(d => d.FIELD_NAME === \"AUTO_WAVE_HEADER\"),\r\n isError: false, isWarning: false\r\n })\r\n\r\n this.props.pendingChanges(true)\r\n }\r\n }\r\n } else {\r\n val.target.value = 0\r\n\r\n const index = updatedRecords.indexOf(item);\r\n if (index > -1) {\r\n updatedRecords.splice(index, 1);\r\n }\r\n this.setState({ editedItemPriority: updatedRecords })\r\n }\r\n //passing edited record to container for save\r\n //this.props.handleStrategyWizardChanges(updatedRecords)\r\n }\r\n\r\n onChangeEvent(val, item) {\r\n this.setState({ isError: false, isSucess: false, isWarning: false, pendingMsg: this.props.wizard.pendingPriorityChanges })\r\n var value = Number(val.target.value)\r\n let updatedRecords = this.state.editedItemPriority\r\n // if (val.target.value === '' ||\r\n if (/^(\\-(\\d*))$/.test(value) || !isNaN(value) && (value <= 9) && Number.isInteger(value)) {\r\n var editingRow = item;\r\n editingRow.USER_ID = this.state.inputParam.User_Email\r\n if (val.target.id === 'PRIORITY_NUM') {\r\n //editingRow[val.target.id] = value\r\n\r\n let apiData = this.state.data\r\n let updatedRecords = this.state.editedItemPriority\r\n\r\n // set new value in editingRow priority number\r\n editingRow[val.target.id] = value\r\n if (this.state.editedItemPriority.length === 0 ||\r\n this.state.editedItemPriority.find(a => a.FIELD_NAME === editingRow.FIELD_NAME && a.FIELD_VALUE === editingRow.FIELD_VALUE) === undefined) {\r\n\r\n updatedRecords.push(editingRow)\r\n\r\n var t = apiData.filter(d => d.FIELD_VALUE === item.FIELD_VALUE)\r\n if (t.FIELD_VALUE === apiData.FIELD_VALUE)\r\n apiData.PRIORITY_NUM = Number(value)\r\n\r\n this.setState({\r\n pendingMsg: this.props.wizard.pendingPriorityChanges,\r\n editedItemPriority: updatedRecords,\r\n data: apiData,\r\n pendingAutoWaveChanges: updatedRecords.find(d => d.FIELD_NAME === \"AUTO_WAVE_HEADER\"),\r\n isError: false\r\n })\r\n\r\n this.props.pendingChanges(true)\r\n }\r\n }\r\n }\r\n else {\r\n val.target.value = 0\r\n const index = updatedRecords.indexOf(item);\r\n if (index > -1) {\r\n updatedRecords.splice(index, 1);\r\n }\r\n this.setState({ editedItemPriority: updatedRecords })\r\n }\r\n\r\n //passing edited record to container for save\r\n //this.props.handleStrategyWizardChanges(updatedRecords)\r\n }\r\n\r\n handleSave() {\r\n if (this.state.editedItemPriority.length !== 0) {\r\n this.setState({ isLoading: true, responseMessage: '', pendingMsg: '', warning1Msg: '', warning2Msg: '', isError: false, isSucess: false });\r\n let updatedRecords = this.state.editedItemPriority;\r\n let isAutoWaveEdit = updatedRecords[0].FIELD_NAME === \"AUTO_WAVE_HEADER\" ? true : false;\r\n\r\n this.props.updateEnablementParameterPriority(updatedRecords).then((response) => {\r\n if (response.status === 200) {\r\n \r\n this.setState({\r\n editedItemPriority: [],\r\n data: this.state.apiResponse.filter(d => d.FIELD_NAME === isAutoWaveEdit ? updatedRecords[0].FIELD_VALUE : this.state.isActive),\r\n isActive: isAutoWaveEdit ? updatedRecords[0].FIELD_VALUE : this.state.isActive,\r\n selectedCategory: isAutoWaveEdit ? updatedRecords[0].FIELD_DESC : this.state.selectedCategory,\r\n isReadOnly: this.state.autoWavePriority.find(d => d.FIELD_VALUE === (isAutoWaveEdit ? updatedRecords[0].FIELD_VALUE : this.state.isActive) && d.PRIORITY_NUM > 0) ? false : true,\r\n isLoading: false,\r\n responseMessage: this.props.wizard.successMessage,\r\n pendingAutoWaveChanges: false,\r\n isError: false,\r\n isSucess: true\r\n }, this.onLoad());\r\n //});\r\n this.props.pendingChanges(null)\r\n }\r\n else {\r\n this.setState({ isLoading: false, responseMessage: this.props.wizard.errorMessage, isError: true, isSucess: false });\r\n }\r\n }).catch((error) => {\r\n this.setState({ isLoading: false, responseMessage: this.props.wizard.errorMessage, isError: true, isSucess: false });\r\n })\r\n }\r\n else\r\n {\r\n this.onLoad();\r\n }\r\n }\r\n\r\n togglePopUp(e) {\r\n this.setState({\r\n isPopupOpen: !this.state.isPopupOpen,\r\n data: this.state.initialData.filter(d => d.FIELD_NAME === \"L4_INDUSTRY_GICS_ID\"), selectedCategory: \"L4_INDUSTRY_GICS_ID\"\r\n })\r\n }\r\n\r\n outsidePopupClick() {\r\n this.setState({ isPopupOpen: false })\r\n }\r\n\r\n handleUserInput(filterText) {\r\n var searchData = this.state.initialData.filter(d => d.FIELD_NAME === \"L4_INDUSTRY_GICS_ID\" ? d.FIELD_DESC.toLowerCase().includes(filterText.target.value.toLowerCase())\r\n : d.FIELD_VALUE.toLowerCase().includes(filterText.target.value.toLowerCase()));\r\n if (searchData.length > 1) {\r\n this.setState({ data: searchData })\r\n }\r\n else {\r\n this.setState({ data: searchData });\r\n }\r\n };\r\n\r\n showModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n this.setState({ agreeToRecast: false })\r\n this.refs[action].hide()\r\n }\r\n\r\n continueNavigation(action) {\r\n this.refs[action].hide()\r\n this.setState({ agreeToRecast: true }, this.handleSave())\r\n }\r\n\r\n onFocusOut(e) {\r\n if (e.target.value === '') {\r\n e.target.value = 0;\r\n }\r\n }\r\n\r\n redirect() {\r\n this.props.history.push('/yourSpend');\r\n this.props.redirectFromWizard(true);\r\n }\r\n\r\n onExpandClick(e) {\r\n this.setState({ isExpand: !this.state.isExpand })\r\n }\r\n\r\n render() {\r\n var priority = this.state.autoWavePriority.map(item => {\r\n if (item.FIELD_NAME === \"AUTO_WAVE_HEADER\") {\r\n return (\r\n \r\n \r\n )\r\n }\r\n })\r\n\r\n var rowItem = this.state.data.map((item) => {\r\n return (\r\n item.FIELD_NAME !== \"AUTO_WAVE_HEADER\" ?\r\n \r\n\t\t\t\t \r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tuser: state.default,\r\n\t\tcurrency: decodeURIComponent(state.valueStory ? state.valueStory.Currency : state.companyProfileData[0].currencyCode),\r\n\t\tspendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n\t\tvalidation: state.content.validation,\r\n\t\tcontentPE: state.contentPE,\r\n\t\tcompanyData: state.companyProfileData,\r\n\t\tselectedValueStory: state.selectedValueStory,\r\n\t\tcurrencySymbols: state.content.CurrencySymbols,\r\n\t\tuserData: state.valueStory,\r\n\t\tnewValueStory: state.isNewValueStory,\r\n\t\tsearchResultData: state.searchResultData,\r\n\t\tcapIQ: state.content.spendAnalysis.detailedFile,\r\n\t\tspendDetails: state.spendDetails\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tfetchUserValueStories: (id) => dispatch(fetchUserValueStories(id)),\r\n\t\tfetchValueStoriesLoading: (bool) => dispatch(fetchValueStoriesLoading(bool)),\r\n\t\tfetchValueStoriesSuccess: (valueStories) => dispatch(fetchValueStoriesSuccess(valueStories)),\r\n\t\tfetchValueStoriesFailure: (error) => dispatch(fetchValueStoriesFailure(error)),\r\n\t\tupdateOrganization: (revenue) => dispatch(updateOrganization(revenue)),\r\n\t\taddRevenue: (revenue) => dispatch(addRevenue(revenue)),\r\n\t\tupdateCurrency: (currency) => dispatch(updateCurrency(currency)),\r\n\t\tupdateCurrencyCode: (currencyCode) => dispatch(updateCurrencyCode(currencyCode)),\r\n\t\ttoggleValueDriver: (id, bool) => dispatch(toggleValueDriver(id, bool)),\r\n\t\ttoggleSubLever: (id, bool) => dispatch(toggleSubLever(id, bool)),\r\n\t\thandleChange: (value, subLeverId, rowNumber) => dispatch(updateUserInput(value, subLeverId, rowNumber)),\r\n\t\tfetchValueStories: (id) => dispatch(fetchValueStories(id)),\r\n\t\tfetchUserSharedValueStories: (id) => dispatch(fetchUserSharedValueStories(id)),\r\n\t\tgetSPCapitalIQSuccess: message => dispatch(getSPCapitalIQSuccess(message)),\r\n\t\tgetSPCapitalIQFailure: error => dispatch(getSPCapitalIQFailure(error)),\r\n\t\tgetSPCapitalIQLoading: bool => dispatch(getSPCapitalIQLoading(bool)),\r\n\t\tgetSPCapitalIQData: (CapIQID) => dispatch(getSPCapitalIQData(CapIQID)),\r\n\t\tcapIQFetchData: (capIQData) => dispatch(capIQFetchData(capIQData)),\r\n\t\tgetCapIQDataBlank: bool => dispatch(getCapIQDataBlank(bool)),\r\n\t\tupdateBPID: (data) => dispatch(updateBPID(data)),\r\n\t\tupdateANID: (data) => dispatch(updateANID(data)),\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(MatchAndClassificationContainer)\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n defineScopeLoading,\r\n defineScopeSuccess,\r\n defineScopeFailure\r\n} from 'actions/spendActions'\r\nimport { convertToMillion, formatThousands } from 'utils/Utils'\r\n\r\nclass EnablementInsightTabTable extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n {\r\n this.state = {\r\n industry: '',\r\n industryOption: [],\r\n supplierData: [],\r\n supplierDetails: [],\r\n grandTotal: [],\r\n currencySymbol: '',\r\n firstColumnName: '',\r\n firstColumn: '',\r\n helpText: ''\r\n }\r\n this.loadInitialData = this.loadInitialData.bind(this)\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.loadInitialData()\r\n window.scrollTo(0, 0);\r\n this.setState({\r\n currencySymbol: this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency !== undefined\r\n && this.props.spendDetails.currentActiveRequest.Currency.trim() !== ''\r\n && this.props.spendDetails.currentActiveRequest.Currency.trim() !== \"0\" ?\r\n this.props.spendDetails.currentActiveRequest.Currency.trim() : 'USD']\r\n });\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n //if (nextProps.data !== this.props.data) {\r\n //Perform some operation\r\n this.setState({ supplierDetails: nextProps.data });\r\n //}\r\n }\r\n\r\n loadInitialData() {\r\n this.getFirstColumnName()\r\n }\r\n\r\n getFirstColumnName() {\r\n var firstColumnName;\r\n var firstColumn;\r\n var helpText;\r\n switch (this.props.tableName) {\r\n case 'Enablement Recommendation':\r\n firstColumnName = this.props.content.enablementRecommFstColHeader;\r\n firstColumn = this.props.content.enablementRecommFstCol;\r\n helpText = this.props.content.enablementRecommHelpText\r\n break;\r\n\r\n case 'Enablement Match':\r\n firstColumnName = this.props.content.enablementMatchFstColHeader;\r\n firstColumn = this.props.content.enablementMatchFstCol;\r\n helpText = this.props.content.enablementMatchHelpText\r\n break;\r\n\r\n case 'SAP Business Network Eligibility':\r\n firstColumnName = this.props.content.aribaNetworkEliFstColHeader;\r\n firstColumn = this.props.content.aribaNetworkEliFstCol;\r\n helpText = this.props.content.aribaNetworkEliHelpText\r\n break;\r\n\r\n case 'Segmentation by Documents':\r\n firstColumnName = this.props.content.docSegFstColHeader;\r\n firstColumn = this.props.content.docSegFstCol;\r\n helpText = this.props.content.docSegHelpText;\r\n break;\r\n\r\n case 'Segmentation by Spend':\r\n firstColumnName = this.props.content.spendSegFstColHeader;\r\n firstColumn = this.props.content.spendSegFstCol;\r\n helpText = this.props.content.spendSegHelpText\r\n break;\r\n\r\n case 'Segmentation by Buy Process':\r\n firstColumnName = this.props.content.buyProcessSegFstColHeader;\r\n firstColumn = this.props.content.buyProcessSegFstCol;\r\n helpText = this.props.content.buyProcessSegHelpText\r\n break;\r\n\r\n case 'Buyer Supplier Relationship':\r\n firstColumnName = this.props.content.buyerSuppRelationshipFstColHeader;\r\n firstColumn = this.props.content.buyerSuppRelationshipFstCol;\r\n helpText = this.props.content.buyerSuppRelationshipHelpText\r\n break;\r\n\r\n case 'Top Spend Category Segmentation':\r\n firstColumnName = this.props.content.spendCategorySegFstColHeader;\r\n firstColumn = this.props.content.spendCategorySegFstCol;\r\n helpText = this.props.content.spendCategorySegHelpText;\r\n break;\r\n\r\n case 'Top Document Category Segmentation':\r\n firstColumnName = this.props.content.docCategorySegFstColHeader;\r\n firstColumn = this.props.content.docCategorySegFstCol;\r\n helpText = this.props.content.docCategorySegHelpText\r\n break;\r\n\r\n case 'L4 Industry Categories of Spend':\r\n firstColumnName = this.props.content.l4IndustryCategoryFstColHeader;\r\n firstColumn = this.props.content.l4IndustryCategoryFstCol;\r\n helpText = this.props.content.l4IndustryCategoryHelpText\r\n break;\r\n\r\n case 'L2 Industry Categories of Spend':\r\n firstColumnName = this.props.content.l2IndustryCategoryFstColHeader;\r\n firstColumn = this.props.content.l2IndustryCategoryFstCol;\r\n helpText = this.props.content.l2IndustryCategoryHelpText\r\n break;\r\n\r\n\r\n case 'Ariba Network Supplier Country':\r\n firstColumnName = this.props.content.aribaNwSupplierCountryFstColHeader;\r\n firstColumn = this.props.content.aribaNwSupplierCountryFstCol;\r\n helpText = this.props.content.aribaNwSupplierCountryHelpText\r\n break;\r\n\r\n case 'Buyer Region':\r\n firstColumnName = this.props.content.buyerRegionFstColHeader;\r\n firstColumn = this.props.content.buyerRegionFstCol;\r\n helpText = this.props.content.buyerRegionHelpText\r\n break;\r\n\r\n case 'Business Unit':\r\n firstColumnName = this.props.content.businessUnitFstColHeader;\r\n firstColumn = this.props.content.businessUnitFstCol;\r\n helpText = this.props.content.businessUnitHelpText\r\n break;\r\n\r\n case 'ERP':\r\n firstColumnName = this.props.content.erpDetailsFstColHeader;\r\n firstColumn = this.props.content.erpDetailsFstCol;\r\n helpText = this.props.content.erpDetailsHelpText\r\n break;\r\n\r\n case 'Legal E-invoicing':\r\n firstColumnName = this.props.content.legalEInvoicingFstColHeader;\r\n firstColumn = this.props.content.legalEInvoicingFstCol;\r\n helpText = this.props.content.legalEInvoicingHelpText\r\n break;\r\n }\r\n\r\n this.setState({ firstColumnName: firstColumnName, firstColumn: firstColumn, helpText: helpText });\r\n return firstColumnName;\r\n }\r\n\r\n getBackgroundColor() {\r\n let bgColor;\r\n switch (this.props.tableSequence) {\r\n case \"1\":\r\n bgColor = '#00BFD3'//'#0f46a7';\r\n break;\r\n\r\n case \"2\":\r\n bgColor = '#BE008C'//'#760a85'\r\n break;\r\n\r\n case \"3\":\r\n bgColor = '#FA9100'//'#e35500'\r\n break;\r\n case \"4\":\r\n if (this.props.tableName === \"L4 Industry Categories\") {\r\n bgColor = '#e35500'\r\n } else {\r\n bgColor = '#93C939'//'#348026'\r\n }\r\n break;\r\n case \"5\":\r\n bgColor = '#999999'//'#7f7f7f'\r\n break;\r\n case \"6\":\r\n bgColor = '#b90c0d';//'#0f46a7';\r\n break;\r\n case \"7\":\r\n bgColor = '#367dc4'//'#760a85'\r\n break;\r\n case \"8\":\r\n bgColor = '#69767c'//'#e35500'\r\n break;\r\n case \"9\":\r\n bgColor = '#de890d'//'#348026'\r\n break;\r\n case \"10\":\r\n bgColor = '#f29b1d'\r\n break;\r\n case \"11\":\r\n bgColor = '#f5b04d'\r\n break;\r\n case \"12\":\r\n bgColor = '#848f94'\r\n break;\r\n case \"13\":\r\n bgColor = '#9ea8ad'\r\n break;\r\n case \"14\":\r\n bgColor = '#bac1c4'\r\n break;\r\n case \"15\":\r\n bgColor = '#d5dadc'\r\n break;\r\n case \"16\":\r\n bgColor = '#358a4d'\r\n break;\r\n case \"17\":\r\n bgColor = '#3fa45b'\r\n break;\r\n case \"18\":\r\n bgColor = '#4cba6b'\r\n break;\r\n case \"19\":\r\n bgColor = '#dc0d0e'\r\n break;\r\n case \"20\":\r\n bgColor = '#2a6d3c'\r\n break;\r\n case \"21\":\r\n bgColor = '#358a4d'\r\n break;\r\n case \"22\":\r\n bgColor = '#3fa45b'\r\n break;\r\n case \"23\":\r\n bgColor = '#4cba6b'\r\n break;\r\n case \"24\":\r\n bgColor = '#71c989'\r\n break;\r\n case \"25\":\r\n bgColor = '#f8cc8c'\r\n break;\r\n case \"26\":\r\n bgColor = '#f0ab00'\r\n break;\r\n case \"27\":\r\n bgColor = '#a1dbb1'\r\n break;\r\n }\r\n\r\n return bgColor;\r\n }\r\n\r\n render() {\r\n var _this = this;\r\n if (this.state.supplierDetails.length > 0) {\r\n var currencySymbol = this.state.currencySymbol\r\n var firstColumn = this.state.firstColumn\r\n var rows = this.state.supplierDetails.map(function (row) {\r\n return (\r\n \r\n this.getHelpText(e)}>\r\n this.props.showEnablementSupplierDetailsModal(this.props.tableName, this.props.firstColumn, this.props.rowData[this.props.firstColumn])}>\r\n {this.props.rowData[this.props.firstColumn]}\r\n \r\n \r\n {formatThousands(this.props.rowData.CNT_VENDOR_NAME)} \r\n {this.props.rowData.CNT_VENDOR_PER}{\"%\"} \r\n\r\n {/* {this.props.tableName === \"Enablement Recommendation\" ?\r\n {formatThousands(this.props.rowData.CNT_UNIQ_VENDOR_AN_ID)} \r\n : null} */}\r\n\r\n {this.props.currencySymbol}\r\n {convertToMillion(this.props.rowData.SUM_AGGR_SPEND, true)} \r\n {this.props.rowData.SUM_AGGR_SPEND_PER}{\"%\"} \r\n\r\n {formatThousands(this.props.rowData.SUM_SAP_ARIBA_DOC_PROXY)} \r\n {this.props.rowData.SAP_ARIBA_DOC_PROXY_PER}{\"%\"} \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n user: state.default,\r\n spendDetails: state.spendDetails,\r\n content: state.content.enablementInsight,\r\n validation: state.content.validation,\r\n currencySymbols: state.content.CurrencySymbols\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n defineScopeLoading: (bool) => dispatch(defineScopeLoading(bool)),\r\n defineScopeSuccess: (bool) => dispatch(defineScopeSuccess(bool)),\r\n defineScopeFailure: (error) => dispatch(defineScopeFailure(error))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EnablementInsightTabTable)","import React from 'react'\r\nimport{connect} from 'react-redux'\r\nimport EnablementInsightTabTable from './EnablementInsightTabTable'\r\nimport EnablementSupplierDetailsPopup from './EnablementSupplierDetailsPopup'\r\nimport ExpandableTable from './ExpandableTable'\r\nimport { path } from 'Constants'\r\n\r\n// Settings\r\nimport { changeModalBorderStyle, drilldownModalBorderContentStyle, changeModalBorderRectStyle } from 'Constants'\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nimport {\r\n enablementInsightSuccess,\r\n enablementInsightFailure,\r\n enablementInsightLoading, \r\n resetError,\r\n getEnablementDetails,\r\n getEnablementFiltersDetails\r\n} from 'actions/spendActions'\r\n\r\nclass EnablementRecommendations extends React.Component{\r\n constructor(props)\r\n {\r\n super(props);\r\n this.state={\r\n enablementTypesJson: [], \r\n grandTotal: [],\r\n isLoading: true,\r\n responseMsg: '',\r\n inputParam: {\r\n DMC_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.DMC_ID : 0\r\n , VS_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.VS_ID : 0,\r\n User_Email: this.props.spendDetails.currentActiveRequest !== undefined &&\r\n this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester,\r\n dedupStats: 'Unique',\r\n enabledCustomer: 'all',\r\n transactingCustomer: 'all',\r\n buyerRegion: 'all',\r\n businessUnit: 'all',\r\n erpSystem: 'all',\r\n l4IndustryName: 'all',\r\n erpCode: 'all',\r\n erpDesc: 'all',\r\n sicCode: 'all',\r\n sicDesc: 'all',\r\n \r\n goods: 'all',\r\n invoiceCountry: 'all',\r\n legalInvoice: 'all',\r\n aribaNwEligible: 'all',\r\n column1Name: 'SAP_ARIBA_BUY_ENABLE_MTHD_RECMD',\r\n column1Value: '',\r\n tableName: '',\r\n valuesUpdated: false,\r\n metricsType: 'Invoice Spend',\r\n directSpend: 'all'\r\n \r\n }, \r\n }\r\n this.showEnablementSupplierDetailsModal = this.showEnablementSupplierDetailsModal.bind(this)\r\n this.setVisibility = this.setVisibility.bind(this)\r\n this.outsidePopupClick = this.outsidePopupClick.bind(this)\r\n this.onSave = this.onSave.bind(this)\r\n this.reloadEnablementWave= this.reloadEnablementWave.bind(this)\r\n }\r\n\r\n componentDidMount(){ \r\n //this.convertResponseToJson()\r\n this.GetEnablementDetails(this.state.inputParam)\r\n }\r\n\r\n reloadEnablementWave(){\r\n this.GetEnablementDetails(this.state.inputParam)\r\n }\r\n\r\n showEnablementSupplierDetailsModal(tableName, columnName, columnValue, columnValue2, columnValue3) {\r\n\r\n var inputParameter = this.state.inputParam\r\n inputParameter.tableName = tableName\r\n inputParameter.column1Name = columnName\r\n inputParameter.column1Value = columnValue\r\n\r\n inputParameter.column2Value = columnValue2\r\n\r\n inputParameter.column3Value = columnValue3\r\n \r\n this.setState({\topenPopup: true, inputParam: inputParameter\t})\r\n }\r\n\r\n onSave(value) {\r\n this.setState({valuesUpdated: value})\r\n }\r\n\r\n setVisibility(isVisible) {\r\n this.handlePoupClose() \r\n }\r\n\r\n outsidePopupClick() { \r\n this.handlePoupClose()\r\n }\r\n \r\n handlePoupClose() {\r\n this.setState({ open: false, openPopup: false }, () => {\r\n if(this.state.valuesUpdated) {\r\n this.setState({valuesUpdated: false}, this.GetEnablementDetails(this.state.inputParam))\r\n }\r\n })\r\n }\r\n\r\n showAdvanceFilter(){\r\n var advanceFilterDiv = document.getElementById('advanceFilter').style; \r\n if (advanceFilterDiv.display === \"none\") {\r\n advanceFilterDiv.display = \"block\";\r\n } else {\r\n advanceFilterDiv.display = \"none\";\r\n }\r\n }\r\n\r\n GetEnablementDetails(inputParam) {\r\n\t\t\r\n\t\tthis.props.getEnablementDetails(inputParam)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tif (response !== undefined && response.status === 200 && response.data.Result !== undefined) {\r\n //\tsetTimeout(() => { this.props.defineScopeSuccess('') }, 2000)\r\n \r\n var enablementTypeData; var enablementTypeTotal; \r\n var onBoardingworkstreamData; \r\n\r\n var tables = response.data.Result.map(\r\n function (table) {\r\n if(table['SAP_ARIBA_BUY_ENABLE_MTHD_RECMD']!== undefined){\r\n enablementTypeData = table['SAP_ARIBA_BUY_ENABLE_MTHD_RECMD']\r\n enablementTypeTotal = table['GrandTotal']\r\n } \r\n if(table['RECMD_ONBOARDING_WORKSTREAM_NAME']!== undefined){\r\n onBoardingworkstreamData = table['RECMD_ONBOARDING_WORKSTREAM_NAME']\r\n } \r\n }\r\n )\r\n \r\n this.setState({enablementTypesJson: enablementTypeData, grandTotal: enablementTypeTotal,\r\n enablementTypeData: this.convertResponseToJson(onBoardingworkstreamData, 'SAP_ARIBA_BUY_ENABLE_MTHD_RECMD',enablementTypeData),\r\n isLoading: false });\r\n \r\n this.props.enablementInsightSuccess(true)\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure('API service is down. Please contact administrator.')\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n this.setState({ responseMsg: 'An error has occurred', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure(this.props.content.error)\r\n\t\t\t\t}\r\n\t\t\t})\r\n }\r\n\r\n convertResponseToJson(enablementData, keyColumn, aggregatedData)\r\n {\r\n let data = []\r\n let total = []\r\n let waveToItem = []\r\n\r\n enablementData.forEach(item => {\r\n let datum = {\r\n GANTT_CHART_WORKSTREAM_NAME: item.GANTT_CHART_WORKSTREAM_NAME, \r\n CNT_VENDOR_NAME: isNaN(item.CNT_VENDOR_NAME)? 0 : item.CNT_VENDOR_NAME,\r\n CNT_VENDOR_PER: isNaN(item.CNT_VENDOR_PER)? 0 : Number.parseFloat(item.CNT_VENDOR_PER),\r\n CNT_UNIQ_VENDOR_AN_ID: isNaN(item.CNT_UNIQ_VENDOR_AN_ID)? 0 : Number.parseFloat(item.CNT_UNIQ_VENDOR_AN_ID),\r\n SUM_AGGR_SPEND: isNaN(item.SUM_AGGR_SPEND)? 0 : item.SUM_AGGR_SPEND,\r\n SUM_AGGR_SPEND_PER: isNaN(item.SUM_AGGR_SPEND_PER)? 0 : Number.parseFloat(item.SUM_AGGR_SPEND_PER),\r\n \r\n SUM_SAP_ARIBA_DOC_PROXY: isNaN(item.SUM_SAP_ARIBA_DOC_PROXY)? 0 : item.SUM_SAP_ARIBA_DOC_PROXY,\r\n SAP_ARIBA_DOC_PROXY_PER: isNaN(item.SAP_ARIBA_DOC_PROXY_PER)? 0 : Number.parseFloat(item.SAP_ARIBA_DOC_PROXY_PER)\r\n }\r\n\r\n datum[keyColumn] = item[keyColumn]\r\n\r\n data.push(datum)\r\n\r\n let datumCopy = {...datum}\r\n let datumCopy1 = {...datum}\r\n\r\n if(item[keyColumn] in total) {\r\n waveToItem[item[keyColumn]].push(datumCopy1)\r\n \r\n let partialTotal = total[item[keyColumn]]\r\n partialTotal.CNT_VENDOR_NAME = 0\r\n partialTotal.CNT_VENDOR_PER = 0\r\n partialTotal.CNT_UNIQ_VENDOR_AN_ID = 0\r\n partialTotal.SUM_AGGR_SPEND = 0\r\n partialTotal.SUM_AGGR_SPEND_PER = 0\r\n partialTotal.SUM_AGGR_PO_SPEND = 0\r\n partialTotal.SUM_AGGR_PO_SPEND_PER = 0\r\n partialTotal.SUM_SAP_ARIBA_DOC_PROXY = 0\r\n partialTotal.SAP_ARIBA_DOC_PROXY_PER = 0\r\n\r\n } else {\r\n \r\n total[item[keyColumn]] = datumCopy\r\n waveToItem[item[keyColumn]] = [datumCopy1]\r\n }\r\n \r\n // waveToItem[item.ENABLEMENT_WAVE].push(datumCopy1)\r\n // if(!item.ENABLEMENT_WAVE in total) {\r\n // total[item.ENABLEMENT_WAVE] = {} \r\n // }\r\n\r\n })\r\n \r\n let enablementWaveDetails = {\r\n rows: []\r\n }\r\n \r\n \r\n for (const [key, value] of Object.entries(waveToItem)) {\r\n let collapseChild = []\r\n let idx = 0\r\n value.forEach((item, index) => {\r\n collapseChild.push({childContentId: index, content: item.GANTT_CHART_WORKSTREAM_NAME, catalogMatchType: key, data: item, expand: false})\r\n })\r\n\r\n enablementWaveDetails.rows.push({ \r\n \"content\" : key,\r\n \"contentId\" : idx++,\r\n \"data\": aggregatedData.filter(item=> item[keyColumn]===key )[0],\r\n expand: false,\r\n collapseChild : collapseChild\r\n });\r\n }\r\n\r\n return enablementWaveDetails\r\n }\r\n \r\n componentWillReceiveProps(nextProps, nextState){\r\n if (this.state.Test !== nextProps.filterData && 'dedupStats' in nextProps.filterData)\r\n {\r\n var inputParameter = this.state.inputParam\r\n inputParameter.dedupStats = nextProps.filterData.dedupStats\r\n inputParameter.enabledCustomer= nextProps.filterData.enabledCustomer\r\n inputParameter.transactingCustomer= nextProps.filterData.transactingCustomer\r\n inputParameter.buyerRegion= nextProps.filterData.buyerRegion\r\n inputParameter.businessUnit= nextProps.filterData.businessUnit\r\n inputParameter.erpSystem= nextProps.filterData.erpSystem\r\n inputParameter.l4IndustryName= nextProps.filterData.l4IndustryName\r\n inputParameter.erpCode= nextProps.filterData.erpCode \r\n inputParameter.erpDesc= nextProps.filterData.erpDesc \r\n inputParameter.sicCode= nextProps.filterData.sicCode \r\n inputParameter.sicDesc= nextProps.filterData.sicDesc\r\n inputParameter.goods= nextProps.filterData.goods\r\n inputParameter.invoiceCountry= nextProps.filterData.invoiceCountry\r\n inputParameter.legalInvoice= nextProps.filterData.legalInvoice\r\n inputParameter.aribaNwEligible= nextProps.filterData.aribaNwEligible\r\n inputParameter.metricsType= nextProps.filterData.metricsType\r\n inputParameter.directSpend= nextProps.filterData.directSpend\r\n\r\n this.GetEnablementDetails(inputParameter)\r\n this.setState({Test:nextProps.filterData , inputParam: Object.keys(nextProps.filterData).length !== 0 ? nextProps.filterData : this.state.inputParam})\r\n //console.log(\"if enablemtn details filetr props-\")\r\n }\r\n else{\r\n // console.log(\"else enablemtn details filetr props-\")\r\n }\r\n \r\n }\r\n\r\n render()\r\n {\r\n return(\r\n )\r\n }\r\n // ,{\r\n // id: 2,\r\n // label: \"Enriched Spend\",\r\n // component: (\r\n \r\n \r\n \r\n {element.Buyer_Name}\r\n \r\n \r\n {element.DMC_ID}\r\n \r\n \r\n {getCurrancyDetails(this.props.currencyCodes, element.Currency)[0]}\r\n \r\n \r\n {moment(element.CREATE_TIMESTAMP).format('MMM DD,YYYY')}\r\n \r\n \r\n {formatThousands(element.Number_Of_Records)}\r\n \r\n \r\n {/* */}\r\n instance.showModal(instance.modelDelete[index])} className='suggestedValueClose' />\r\n instance.deleteRequest(e)}\r\n CancelButtonAction={() => instance.hideModal(instance.modelDelete[index])}\r\n id={element.APP_CNTRL_REQUEST_DATAId}\r\n ref={instance.modelDelete[index]} instance={instance}\r\n okButtonFlag={okButtonFlag}\r\n />\r\n \r\n \r\n );\r\n }\r\n return allRows;\r\n };\r\n\r\n var currentActiveRequest;\r\n if (this.state.currentActiveRequest !== '' && this.state.currentActiveRequest !== null) {\r\n currentActiveRequest = this.state.currentActiveRequest\r\n }\r\n\r\n return (\r\n \r\n \r\n this.props.showSupplierDrilldownModal(this.props.rowData.DATA_COLLECTIONS_SKEY, this.props.rowData.CAPIQ_ID, this.props.rowData.PARENT_CAPIQ_ID)}>{this.props.rowData.SUPPLIER_NAME}\r\n {\" : \"}\r\n this.props.showSupplierIndustriesModal(this.props.rowData, this.props.rowData.INDUSTRY_DESC, this.props.rowData.INDUSTRY_LEVEL)}>{(this.props.rowData.INDUSTRY_DESC !== null && this.props.rowData.INDUSTRY_DESC !== undefined) ? this.props.rowData.INDUSTRY_DESC : null}\r\n {(this.props.rowData.INDUSTRY_LEVEL !== null && this.props.rowData.INDUSTRY_LEVEL !== undefined) ? \" (L\" + this.props.rowData.INDUSTRY_LEVEL + \")\" : null}\r\n \r\n \r\n {this.props.currencySymbol}{convertToMillion(this.props.rowData.INVOICE_SPEND, true)} \r\n {formatThousands(Math.round(this.props.rowData.INVOICE_COUNT))} \r\n {formatThousands(Math.round(this.props.rowData.PO_COUNT))} \r\n \r\n )\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n // language: state.language,\r\n // ui: state.content.ui,\r\n user: state.default,\r\n spendDetails: state.spendDetails,\r\n content: state.content.spendAnalysis.defineScope,\r\n validation: state.content.validation,\r\n currencySymbols: state.content.CurrencySymbols\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n defineScopeLoading: (bool) => dispatch(defineScopeLoading(bool)),\r\n defineScopeSuccess: (bool) => dispatch(defineScopeSuccess(bool)),\r\n defineScopeFailure: (error) => dispatch(defineScopeFailure(error))\r\n //,getSupplierScopeDetailsgetSupplierScopeDetails: (formValues) => dispatch(getSupplierScopeDetails(formValues))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SupplierScopeDetails)","import React, { Component } from 'react'\r\nimport * as d3 from 'd3'\r\nimport { convertToMillion, formatThousands, handleSingleDoubleClickSameElement } from 'utils/Utils'\r\nimport { uid } from 'react-uid'\r\n\r\n\r\n\r\nclass TreeMap extends Component {\r\n _isMounted = false;\r\n constructor(props) {\r\n super(props)\r\n this.state = {}\r\n // this.data = this.data.bind(this)\r\n this.onClickRect = this.onClickRect.bind(this)\r\n\r\n }\r\n\r\n componentWillMount = props => {\r\n this.clickTimeout = null\r\n }\r\n \r\n componentDidMount() {\r\n this._isMounted = true;\r\n this.chart(this.props)\r\n }\r\n\r\n componentWillReceiveProps(nextProps ) {\r\n if (nextProps.data !== this.props.data && this._isMounted ) {\r\n //Perform some operation\r\n this.chart(nextProps);\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this._isMounted = false;\r\n }\r\n\r\n treemap = data => {\r\n var sortBy = this.props.sortBy\r\n return d3\r\n .treemap()\r\n .tile(d3.treemapSquarify)\r\n .size([this.width(), this.height()])\r\n .padding(1)\r\n .round(true)(\r\n d3\r\n .hierarchy(data)\r\n .sum(d => this.getMetricsTypeDetails(d))\r\n .sort((a, b) => {\r\n d3.ascending(parseFloat(a.data[sortBy]), parseFloat(b.data[sortBy]))\r\n ||\r\n d3.ascending(a.data[sortBy], b.data[sortBy]);\r\n }\r\n )\r\n //.sort((a, b) => b.value - a.value)\r\n )\r\n }\r\n\r\n tile = () => {\r\n return 20\r\n }\r\n width = () => {\r\n return 1060\r\n }\r\n height = () => {\r\n return 500\r\n }\r\n format = (value, withDecimal = false) => {\r\n //return d3.format(value, ',d')\r\n //console.log(this.props.currencySymbols + (value) + \" M\")\r\n \r\n if(this.props.selectedMetrics === \"Invoice Count\" || this.props.selectedMetrics===\"PO Count\"){\r\n return formatThousands(value)+''\r\n }\r\n\r\n if (!withDecimal) {\r\n return this.props.currencySymbols + convertToMillion(value)\r\n }\r\n else {\r\n return this.props.currencySymbols + convertToMillion(value, true)\r\n }\r\n }\r\n\r\n onClickRect(param) {\r\n this.props.onClick(param);\r\n //console.log('onClickRect-->', param)\r\n }\r\n\r\n getPercentageValue(invoiceSpend, totalInvoiceSpend, decimalcount) {\r\n return Math.round((invoiceSpend * 100) / totalInvoiceSpend, decimalcount)\r\n }\r\n\r\n getMetricsTypeDetails(data)\r\n {\r\n \r\n var metricsData = \"\" \r\n switch(this.props.selectedMetrics){\r\n case(\"Invoice Spend\"):\r\n metricsData = data.invoiceSpend;\r\n // selectedMetricsTotal = data.\r\n break;\r\n\r\n case(\"Invoice Count\"):\r\n metricsData = data.invoiceCount\r\n break;\r\n\r\n case(\"PO Spend\"):\r\n metricsData = data.poSpend\r\n break;\r\n\r\n case(\"PO Count\"):\r\n metricsData = data.poCount\r\n break;\r\n }\r\n return metricsData;\r\n }\r\n\r\n \r\n getSelectedMetricsTotalValue(data)\r\n {\r\n var selectedMetricsTotal =\"\"\r\n switch(this.props.selectedMetrics){\r\n case(\"Invoice Spend\"):\r\n selectedMetricsTotal = data.invoice_spend;\r\n // selectedMetricsTotal = data.\r\n break;\r\n\r\n case(\"Invoice Count\"):\r\n selectedMetricsTotal = data.invoice_count\r\n break;\r\n\r\n case(\"PO Spend\"):\r\n selectedMetricsTotal = data.po_spend\r\n break;\r\n\r\n case(\"PO Count\"):\r\n selectedMetricsTotal = data.po_count\r\n break;\r\n }\r\n return selectedMetricsTotal;\r\n }\r\n\r\n chart = (props) => {\r\n var instance = this\r\n d3.select(\"#treeMap\").selectAll(\"svg\").remove();\r\n const root = instance.treemap(props.data)\r\n var color = d3.scaleOrdinal(d3.schemeCategory10)\r\n\r\n // Define the div for the tooltip\r\n d3.select('#tooltipdiv').remove();\r\n var div = d3.select(\"body\").on(\"click\", () => {\r\n div.transition()\r\n .duration(100)\r\n .style(\"opacity\", 0);\r\n }).append(\"div\").attr(\"id\", 'tooltipdiv')\r\n .attr(\"class\", \"tooltip\")\r\n .style(\"opacity\", 0);\r\n\r\n const svg = d3\r\n .select('#treeMap')\r\n .append('svg')\r\n .attr('viewBox', [0, 0, instance.width(), instance.height()])\r\n .style('font', 'sans-serif')\r\n\r\n\r\n const leaf = svg\r\n .selectAll('g')\r\n .data(root.leaves())\r\n .join('g')\r\n .attr('transform', d => `translate(${d.x0},${d.y0})`)\r\n\r\n leaf.on('mouseover', (param, index) => {\r\n leaf.style('opacity', '0.5');\r\n leaf._groups[0][index].setAttribute('style', { 'opacity': 1 });\r\n })\r\n\r\n leaf.on('mouseout', (param, index) => {\r\n leaf.style('opacity', '1');\r\n })\r\n\r\n /*if (props.enableOnClick) {\r\n leaf.on('click', param => {\r\n if (param.data.clickable) {\r\n instance.onClickRect(param)\r\n }\r\n div.transition()\r\n .duration(100)\r\n .style(\"opacity\", 0);\r\n })\r\n .style('cursor', 'pointer')\r\n }*/\r\n\r\n leaf.on('click', param => handleSingleDoubleClickSameElement(() => {\r\n if (props.enableOnClick && param.data.clickable) {\r\n instance.onClickRect(param)\r\n }\r\n div.transition()\r\n .duration(100)\r\n .style(\"opacity\", 0);\r\n }, () => {\r\n props.onDoubleClick(param);\r\n }, instance))\r\n .style('cursor', 'pointer')\r\n\r\n // leaf.append(\"title\").text(\r\n // d =>\r\n // `${d\r\n // .ancestors()[0].data.name\r\n // //.reverse()\r\n // //.map(d => d.data.name)\r\n // //.join('/')\r\n // }\\n${instance.format(d.value)}`\r\n // ).attr(\"fill\", \"pink\").attr(\"class\", \"tip\") \r\n\r\n leaf\r\n .append('rect')\r\n .attr('id', d => (d.leafUid = uid('leaf')).id)\r\n .attr('fill', d => {\r\n return d.children ? null : color(d.data.name + instance.getMetricsTypeDetails(d.data))\r\n //while (d.depth > 1) d = d.parent\r\n })\r\n .attr('fill-opacity', 0.8)\r\n .attr('width', d => (d.x1 - d.x0))\r\n .attr('height', d => (d.y1 - d.y0))\r\n .on(\"mouseover\", function (d) {\r\n //d3.select('#tooltipdiv').remove();\r\n div.transition()\r\n .duration(200)\r\n .style(\"opacity\", 1).style(\"cursor\", 'pointer').style(\"display\", 'block');\r\n // div.html(d.data.name + \"
\" + instance.format(instance.getMetricsTypeDetails(d.data), true).concat(\" (\",\r\n // instance.getPercentageValue(d.data.invoiceSpend < 0 ? 0 : d.value, props.totalInvoicSpend)).concat(\"%)\"))\r\n div.html(d.data.name + \"
\" + instance.format(instance.getMetricsTypeDetails(d.data), true).concat(\" (\",\r\n instance.getPercentageValue(instance.getMetricsTypeDetails(d.data) < 0 ? 0 : instance.getMetricsTypeDetails(d.data), instance.getSelectedMetricsTotalValue(props.totalValues))).concat(\"%)\"))\r\n .style(\"left\", (d3.event.pageX) + \"px\")\r\n .style(\"top\", (d3.event.pageY - 28) + \"px\")\r\n .style(\"z-index\", 1);\r\n })\r\n .on(\"mouseout\", function (d) {\r\n div.transition()\r\n .duration(100)\r\n .style(\"opacity\", 0);\r\n });\r\n\r\n\r\n leaf\r\n .append('clipPath')\r\n .attr('id', d => (d.clipUid = uid('clip')).id)\r\n .append('use')\r\n .attr('xlink:href', d => d.leafUid.href).attr(\"fill\", \"pink\")\r\n\r\n leaf\r\n .append('text')\r\n .style('font-size', function (d) {\r\n let width = d.x1 - d.x0;\r\n let height = d.y1 - d.y0;\r\n if (width < 100 || height < 100) return \"0.8rem\"\r\n else return \"1.5rem\"\r\n })\r\n .attr('clip-path', d => d.clipUid)\r\n\r\n .selectAll('tspan')\r\n .data(d =>\r\n d.data.name.split(\" \").concat(instance.format(instance.getMetricsTypeDetails(d.data)).\r\n concat(\" (\",\r\n instance.getPercentageValue(instance.getMetricsTypeDetails(d.data) < 0 ? 0 : instance.getMetricsTypeDetails(d.data), instance.getSelectedMetricsTotalValue(props.totalValues))).concat(\"%)\"))\r\n )\r\n .join('tspan')\r\n .attr('x', 3)\r\n .attr(\r\n 'y',\r\n (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`\r\n )\r\n .attr('fill-opacity', (d, i, nodes) =>\r\n i === nodes.length - 1 ? 0.7 : null\r\n ).text(d => d).style('cursor','pointer')\r\n\r\n var p = d3.selectAll(\"tspan\");\r\n p.style(\"fill\", \"white\");\r\n\r\n var txt = d3.selectAll(\"text\")\r\n .on(\"mouseover\", function (d) {\r\n div.transition()\r\n .duration(200)\r\n .style(\"opacity\", 1);\r\n if (d.data !== undefined && d.data.name !== undefined) {\r\n div.html(d.data.name + \"
\" + instance.format(instance.getMetricsTypeDetails(d.data), true).concat(\" (\",\r\n //instance.getPercentageValue(d.value, props.totalInvoicSpend)).concat(\"%)\"))\r\n instance.getPercentageValue(instance.getMetricsTypeDetails(d.data) < 0 ? 0 :\r\n instance.getMetricsTypeDetails(d.data), instance.getSelectedMetricsTotalValue(props.totalValues))).concat(\"%)\"))\r\n .style(\"left\", (d3.event.pageX) + \"px\")\r\n .style(\"top\", (d3.event.pageY - 28) + \"px\");\r\n }\r\n\r\n })\r\n .on(\"mouseout\", function (d) {\r\n div.transition()\r\n .duration(100)\r\n .style(\"opacity\", 0);\r\n })\r\n //console.log(svg.node())\r\n\r\n return svg.node()\r\n }\r\n\r\n render() {\r\n return \r\n }\r\n}\r\n\r\nexport default TreeMap\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport PopupButton from 'UI/PopupButton'\r\nimport Select from 'react-select'\r\nimport * as d3 from 'd3'\r\nimport StackedBarChart from 'components/UI/StackedBarChart'\r\nimport SupplierScopeDetails from './SupplierScopeDetails'\r\nimport TreeMap from './TreemapD3'\r\nimport ZoomModal from 'components/UI/ZoomModal'\r\nimport _ from 'lodash';\r\nimport Modal from 'reboron/OutlineModal'\r\nimport {\r\n\tdefineScopeSuccess,\r\n\tdefineScopeLoading,\r\n\tresetError,\r\n\tdefineScopeFailure,\r\n\tcurrentActiveRequest,\r\n\tgetIndustrySupplierDetails,\r\n\tgetTopDetails,\r\n\tgetSupplierCountryCodes,\r\n\tgetSummaryScopeSolution,\r\n\tgetSupplierScopeDetails,\r\n\tstoreSupplierSKEY,\r\n\tstoreIndustryGICS_ID,\r\n\ttrackSupplierDrillDownChanges,\r\n\ttrackSupplierDrillDownSave,\r\n\ttrackIndustryDrillScopeChanges\r\n\t//getDefineScopesDetails\r\n} from 'actions/spendActions'\r\nimport { convertToMillion, formatThousands } from 'utils/Utils'\r\nimport { object } from 'prop-types';\r\nimport {\r\n\tsuggestedValueModalStyle,\r\n\tsuggestedValueContentStyle,\r\n\tpath, backdropStyle\r\n} from 'Constants'\r\nimport { modalStyle, modalContentStyle, changeModalStyle, changeModalContentStyle } from 'Constants'\r\nimport SupplierDrillDownPopup from '../SupplierDrillDownPopup'\r\nimport SupplierIndustriesPopup from '../SupplierIndustriesPopup'\r\nimport Button from 'UI/Button'\r\nimport VideoHelp from 'components/UI/VideoHelp'\r\nimport { MultiSelect } from 'primereact/multiselect';\r\n\r\nconst changeBackdropStyle = Object.assign({}, backdropStyle);\r\nchangeBackdropStyle.zIndex = '1050';\r\n\r\nconst alertModalStyle = Object.assign({}, changeModalStyle);\r\nalertModalStyle.zIndex = '1060';\r\n\r\n//@withStyles(styles)\r\nclass IndustryBreakdownContainer extends Component {\r\n\t_isMounted = false;\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t\tthis.state = {\r\n\t\t\tRequestIds: [],\r\n\t\t\tselectedScopes: '',\r\n\t\t\tfileDetails: [],\r\n\t\t\tscopes: [],\r\n\t\t\tcurrentActiveRequest: '',\r\n\t\t\tallCountries: [],\r\n\t\t\tallBuyerRegion: [],\r\n\t\t\tallBusinessUnit: [],\r\n\t\t\ttopCount: [],\r\n\t\t\tsummaryScopeData: [],\r\n\t\t\tsupplierData: [],\r\n\t\t\tindustrySupplierDetailsAllData: '',\r\n\t\t\tindustrySupplierDetailsFilterData: '',\r\n\t\t\tisFilterChanges: false,\r\n\t\t\tindustryLevelList: [\r\n\t\t\t\t{ label: '2', value: 'L2_INDUSTRY_NAME' },\r\n\t\t\t\t{ label: '3', value: 'L3_INDUSTRY_NAME' },\r\n\t\t\t\t{ label: '4', value: 'L4_INDUSTRY_NAME' },\r\n\t\t\t\t{ label: '5', value: 'L5_INDUSTRY_NAME' },\r\n\t\t\t\t{ label: '6', value: 'L6_INDUSTRY_NAME' },\r\n\t\t\t\t{ label: '7', value: 'L7_INDUSTRY_NAME' }\r\n\t\t\t],\r\n\t\t\tdefineScopeFilters: {\r\n\t\t\t\tcountry: ['all'],\r\n\t\t\t\tindustryLevel: \"L3_INDUSTRY_NAME\",\r\n\t\t\t\tindustryName: '',\r\n\t\t\t\tsolution: ['No Filter'],\r\n\t\t\t\toutSolution: ['No Filter'],\r\n\t\t\t\tsolutionConfirmation: 'all',\r\n\t\t\t\tbuyerRegion: ['all'],\r\n\t\t\t\tbusinessUnit: ['all'],\r\n\t\t\t\tgoods: 'all',\r\n\t\t\t\tdirectSpend: 'all',\r\n\t\t\t\tmetricsType: \"Invoice Spend\",\r\n\t\t\t\taribaNetwork: \"all\",\r\n\t\t\t\tsapAribaBuyProcess: \"all\",\r\n\t\t\t\ttopRecords: 20,\r\n\t\t\t\tGICS_ID: ''\r\n\t\t\t},\r\n\r\n\t\t\tindustryLeveldrpdwn: \"L3_INDUSTRY_NAME\",\r\n\t\t\tdefineScope: {\r\n\t\t\t\tDMC_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.DMC_ID : 0\r\n\t\t\t\t, VS_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.VS_ID : 0,\r\n\t\t\t\tUser_Email: '',\r\n\t\t\t\tSolution: ['No Filter'],\r\n\t\t\t\tCountry: ['all'],\r\n\t\t\t\tSolutionConfirmation: 'all',\r\n\t\t\t\tGICS_ID: 'all',\r\n\t\t\t\tBuyer_Region: ['all'],\r\n\t\t\t\tBusiness_Unit: ['all'],\r\n\t\t\t\tGoods: 'all',\r\n\t\t\t\tDirectSpend: 'all',\r\n\t\t\t\tMetricsType: \"Invoice Spend\",\r\n\t\t\t\tAribaNetwork: \"all\",\r\n\t\t\t},\r\n\t\t\tallSolutions: [\r\n\t\t\t\t{ label: \"No Filter\", value: \"No Filter\" },\r\n\t\t\t\t{ label: \"Sourcing\", value: \"Sourcing\" },\r\n\t\t\t\t{ label: \"Commerce Automation\", value: \"Commerce Automation\" },\r\n\t\t\t\t{ label: \"Discount/SCF\", value: \"Discount/SCF\" },\r\n\t\t\t\t{ label: \"Concur\", value: \"Concur\" },\r\n\t\t\t\t{ label: \"Fieldglass\", value: \"Fieldglass\" },\r\n\t\t\t\t{ label: \"Supply Chain Collaboration\", value: \"Supply Chain Collaboration\" },\r\n\t\t\t\t{ label: \"Buying and Invoicing\", value: \"Buying and Invoicing\" },\r\n\t\t\t\t{ label: \"Contract Invoicing\", value: \"Contract Invoicing\" },\r\n\t\t\t\t{ label: \"Spot Buy\", value: \"Spot Buy\" },\r\n\t\t\t\t{ label: \"No solutions\", value: \"No solutions\" },\r\n\t\t\t\t{ label: \"Any solutions\", value: \"Any solutions\" }\r\n\t\t\t],\r\n\t\t\tallSolutionsOut: [\r\n\t\t\t\t{ label: \"No Filter\", value: \"No Filter\" },\r\n\t\t\t\t{ label: \"Sourcing\", value: \"Out Sourcing\" },\r\n\t\t\t\t{ label: \"Commerce Automation\", value: \"Out Commerce Automation\" },\r\n\t\t\t\t{ label: \"Discount/SCF\", value: \"Out Discount/SCF\" },\r\n\t\t\t\t{ label: \"Concur\", value: \"Out Concur\" },\r\n\t\t\t\t{ label: \"Fieldglass\", value: \"Out Fieldglass\" },\r\n\t\t\t\t{ label: \"Supply Chain Collaboration\", value: \"Out Supply Chain Collaboration\" },\r\n\t\t\t\t{ label: \"Buying and Invoicing\", value: \"Out Buying and Invoicing\" },\r\n\t\t\t\t{ label: \"Contract Invoicing\", value: \"Out Contract Invoicing\" },\r\n\t\t\t\t{ label: \"Spot Buy\", value: \"Out Spot Buy\" },\r\n\t\t\t],\r\n\t\t\toptionSolutionConfirmation: [\r\n\t\t\t\t{ label: \"Not Confirmed\", value: \"No\" },\r\n\t\t\t\t{ label: \"Confirmed\", value: \"Yes\" },\r\n\t\t\t\t{ label: \"All\", value: \"all\" }\r\n\t\t\t],\r\n\t\t\tdirectSpendOptions: [\r\n\t\t\t\t{ label: \"All\", value: \"all\" },\r\n\t\t\t\t{ label: \"Yes\", value: \"Yes\" },\r\n\t\t\t\t{ label: \"No\", value: \"No\" }\r\n\t\t\t],\r\n\t\t\tgoodsOptions: [\r\n\t\t\t\t{ label: \"All\", value: \"all\" },\r\n\t\t\t\t{ label: \"Goods\", value: \"Goods\" },\r\n\t\t\t\t{ label: \"Services\", value: \"Services\" },\r\n\t\t\t\t{ label: \"Both\", value: \"Both\" },\r\n\t\t\t\t{ label: \"Unclassified\", value: \"Unclassified\" },\r\n\t\t\t],\r\n\t\t\tmetricsOptions: [\r\n\t\t\t\t{ label: \"Invoice Spend\", value: \"Invoice Spend\" },\r\n\t\t\t\t{ label: \"Invoice Count\", value: \"Invoice Count\" },\r\n\t\t\t\t{ label: \"PO Spend\", value: \"PO Spend\" },\r\n\t\t\t\t{ label: \"PO Count\", value: \"PO Count\" },\r\n\t\t\t],\r\n\t\t\taribaNetworkOptions: [\r\n\t\t\t\t{ label: \"All\", value: \"all\" },\r\n\t\t\t\t{ label: \"Matched\", value: \"Matched\" },\r\n\t\t\t\t{ label: \"Matched & Transacting\", value: \"Matched & Transacting\" },\r\n\t\t\t\t{ label: \"Not Matched\", value: \"Not Matched\" }\r\n\t\t\t],\r\n\t\t\tsapAribaBuyProcessOptions: [\r\n\t\t\t\t{ label: \"All\", value: \"all\" },\r\n\t\t\t\t{ label: \"Consultancy/SOW Services: Active Mgmt, otherwise Invoice Against Contract\", value: \"Consultancy/SOW Services: Active Mgmt, otherwise Invoice Against Contract\" },\r\n { label: \"Direct/MRO: Plan Driven PO\", value: \"Direct/MRO: Plan Driven PO\" },\r\n { label: \"Invoice Against Contract\", value: \"Invoice Against Contract\" },\r\n { label: \"Non-PO Invoice\", value: \"Non-PO Invoice\" },\r\n { label: \"Other Services: Active Mgmt, otherwise Invoice Against Contract\", value: \"Other Services: Active Mgmt, otherwise Invoice Against Contract\" },\r\n { label: \"Requisition: Non-Catalog or Tactical Sourcing\", value: \"Requisition: Non-Catalog or Tactical Sourcing\" },\r\n { label: \"Requisition: External Talent\", value: \"Requisition: External Talent\" },\r\n { label: \"Requisition: Catalog, Spot-Buy or Release Contract\", value: \"Requisition: Catalog, Spot-Buy or Release Contract\" },\r\n { label: \"Travel and Expense\", value: \"Travel and Expense\" }\r\n\t\t\t],\r\n\t\t\tbreadCrumbsArray: [],\r\n\t\t\taggregatedAmount: {\r\n\t\t\t\tinvoice_spend: 0,\r\n\t\t\t\tinvoice_count: 0,\r\n\t\t\t\tpo_spend: 0,\r\n\t\t\t\tpo_count: 0,\r\n\t\t\t\tunique_supplier: 0\r\n\t\t\t},\r\n\t\t\tcurrencySymbol: '',\r\n\t\t\topen: false,\r\n\t\t\topenIndustryPopup: false,\r\n\t\t\tclickedIndustryDetails: [],\r\n\t\t\tshowFlag: false,\r\n\t\t\tsolutionFilter: 'No Filter',\r\n\t\t\toutSolutionFilter: 'No Filter',\r\n\t\t\tcountryFilter: 'all',\r\n\t\t\tbusinessUnitFilter: 'all',\r\n\t\t\tbuyerRegionFilter: 'all',\r\n\t\t\tlevelDisabled: false,\r\n\t\t\tisDataExists: true\r\n\t\t}\r\n\t\tthis.handlelangChange = this.handlelangChange.bind(this)\r\n\t\tthis.filterAndGroupData = this.filterAndGroupData.bind(this)\r\n\t\tthis.onClick_TreeMap = this.onClick_TreeMap.bind(this)\r\n\t\tthis.onDoubleClickTreeMap = this.onDoubleClickTreeMap.bind(this)\r\n\t\tthis.handleIndustryLevelChange = this.handleIndustryLevelChange.bind(this)\r\n\t\tthis.handleTopCountChange = this.handleTopCountChange.bind(this)\r\n\t\tthis.removeIndustryFilter = this.removeIndustryFilter.bind(this)\r\n\t\tthis.isClickableTile = this.isClickableTile.bind(this);\r\n\t\tthis.getRankColumnName = this.getRankColumnName.bind(this)\r\n\t\tthis.showSupplierDrilldownModal = this.showSupplierDrilldownModal.bind(this)\r\n\t\tthis.setVisibility = this.setVisibility.bind(this)\r\n\t\tthis.outsidePopupClick = this.outsidePopupClick.bind(this)\r\n\t\tthis.showAlertModal = this.showAlertModal.bind(this)\r\n\t\tthis.hideAlertModal = this.hideAlertModal.bind(this)\r\n\t\tthis.continueNavigation = this.continueNavigation.bind(this)\r\n\t\tthis.showSupplierIndustriesModal = this.showSupplierIndustriesModal.bind(this)\r\n\t\tthis.setFilter = this.setFilter.bind(this)\r\n\t\tthis.toggleShow = this.toggleShow.bind(this)\r\n\t\tthis.triggerAllMethod = this.triggerAllMethod.bind(this)\r\n\t\tthis.clickedOutside = this.clickedOutside.bind(this)\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tthis._isMounted = true;\r\n\t\tthis.loadData()\r\n\t\twindow.scrollTo(0, 0);\r\n\t}\r\n\tcomponentWillUnmount() {\r\n\t\tthis._isMounted = false;\r\n\t\tthis.props.resetError();\r\n\t}\r\n\tgetMessage(keyToFindMessage) {\r\n\t\treturn this.props.content[keyToFindMessage];\r\n\t}\r\n\r\n\ttoggleShow() {\r\n\t\tthis.setState({ showFlag: !this.state.showFlag })\r\n\t}\r\n\r\n\tloadData() {\r\n\t\tthis.props.defineScopeLoading(true)\r\n\r\n\t\tthis.bindTopValues();\r\n\t\tthis.bindContryList();\r\n\r\n\t\tthis.getIndustrySupplierDetails();\r\n\t\tthis.getSummaryScopeSolution();\r\n\t\tthis.getSupplierScopeDetails();\r\n\t\tif (this._isMounted) {\r\n\t\t\tthis.setState({\r\n\t\t\t\tcurrencySymbol: this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency !== undefined \r\n\t\t\t\t\t&& this.props.spendDetails.currentActiveRequest.Currency.trim() !== '' \r\n\t\t\t\t\t&& this.props.spendDetails.currentActiveRequest.Currency.trim() !== \"0\" ?\r\n\t\t\t\t\tthis.props.spendDetails.currentActiveRequest.Currency.trim() : 'USD']\r\n\t\t\t})\r\n\t\t}\r\n\r\n\t}\r\n\r\n\tgetIndustrySupplierDetails(isTopRequest) {\r\n\t\tvar defineScope_obj = this.state.defineScope;\r\n\t\tdefineScope_obj.User_Email = this.props.spendDetails !== undefined &&\r\n\t\t\tthis.props.spendDetails.currentActiveRequest !== undefined ? (\r\n\t\t\t\tthis.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ?\r\n\t\t\t\t\tthis.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester) : '';\r\n\t\tdefineScope_obj.Country = this.state.countryFilter;\r\n\t\tdefineScope_obj.Solution = this.state.solutionFilter;\r\n\t\tdefineScope_obj.outSolution = this.state.outSolutionFilter;\r\n\t\tdefineScope_obj.SolutionConfirmation = this.state.defineScopeFilters.solutionConfirmation === '' ? defineScope_obj.SolutionConfirmation : this.state.defineScopeFilters.solutionConfirmation;\r\n\t\tdefineScope_obj.DirectSpend = this.state.defineScopeFilters.directSpend === '' ? defineScope_obj.DirectSpend : this.state.defineScopeFilters.directSpend;\r\n\t\tdefineScope_obj.Goods = this.state.defineScopeFilters.goods === '' ? defineScope_obj.Goods : this.state.defineScopeFilters.goods;\r\n\t\tdefineScope_obj.Business_Unit = this.state.businessUnitFilter;\r\n\t\tdefineScope_obj.Buyer_Region = this.state.buyerRegionFilter;\r\n\t\tdefineScope_obj.MetricsType = this.state.defineScopeFilters.metricsType === '' ? defineScope_obj.MetricsType : this.state.defineScopeFilters.metricsType;\r\n\t\tdefineScope_obj.AribaNetwork = this.state.defineScopeFilters.aribaNetwork === '' ? defineScope_obj.AribaNetwork : this.state.defineScopeFilters.aribaNetwork;\r\n\t\tdefineScope_obj.SAPAribaBuyProcess = this.state.defineScopeFilters.sapAribaBuyProcess === '' ? defineScope_obj.SAPAribaBuyProcess : this.state.defineScopeFilters.sapAribaBuyProcess;\r\n\r\n\t\tthis.props.getIndustrySupplierDetails(defineScope_obj)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tif (response.status === 200 && this._isMounted) {\r\n\t\t\t\t\tthis.setState({ industrySupplierDetailsAllData: response.data.Result },\r\n\t\t\t\t\t\t() => {\r\n\t\t\t\t\t\t\tthis.filterAndGroupData(isTopRequest)\r\n\t\t\t\t\t\t\t//this.props.defineScopeSuccess('')\r\n\t\t\t\t\t\t})\r\n\t\t\t\t\t//this.filterAndGroupData();\r\n\r\n\t\t\t\t}\r\n\r\n\t\t\t})\r\n\t\t\t.catch((exception) => {\r\n\t\t\t\tthis.props.defineScopeFailure(this.getMessage('noData'))\r\n\t\t\t})\r\n\t}\r\n\r\n\tbindTopValues() {\r\n\t\tvar topValuesArray = this.props.content.topValues.toString().split(',')\r\n\t\tvar listToBindTopValues = []\r\n\t\tfor (let index = 0; index < topValuesArray.length; index++) {\r\n\t\t\tconst element = topValuesArray[index]\r\n\t\t\tlistToBindTopValues.push({ label: element, value: element })\r\n\t\t}\r\n\r\n\t\tthis.setState({ topCount: listToBindTopValues })\r\n\t}\r\n\r\n\thandleIndustryLevelChange(value) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.industryLevel = value.value;\r\n\r\n\t\tif (defineScopeFilters.industryName !== \"\") {\r\n\t\t\t//pass GICS_ID to barchart and supplier grid to fecth data accordingly\r\n\t\t\tvar industryData = this.state.industrySupplierDetailsAllData.\r\n\t\t\t\tfilter((item) => item[defineScopeFilters.industryLevel] === defineScopeFilters.industryName);\r\n\t\t\tif (industryData !== undefined && industryData.length > 0) {\r\n\t\t\t\tdefineScopeFilters.GICS_ID = defineScopeFilters.industryLevel === \"L2_INDUSTRY_NAME\" ? 'all'\r\n\t\t\t\t\t: defineScopeFilters.industryLevel === \"L3_INDUSTRY_NAME\" ? industryData[0].L2_INDUSTRY_ID\r\n\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L4_INDUSTRY_NAME\" ? industryData[0].L3_INDUSTRY_ID\r\n\t\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L5_INDUSTRY_NAME\" ? industryData[0].L4_INDUSTRY_ID\r\n\t\t\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L6_INDUSTRY_NAME\" ? industryData[0].L5_INDUSTRY_ID : industryData[0].L6_INDUSTRY_ID\r\n\r\n\t\t\t\tdefineScopeFilters.industryName = defineScopeFilters.industryLevel === \"L2_INDUSTRY_NAME\" ? industryData[0].L2_INDUSTRY_NAME\r\n\t\t\t\t\t: defineScopeFilters.industryLevel === \"L3_INDUSTRY_NAME\" ? industryData[0].L3_INDUSTRY_NAME\r\n\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L4_INDUSTRY_NAME\" ? industryData[0].L4_INDUSTRY_NAME\r\n\t\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L5_INDUSTRY_NAME\" ? industryData[0].L5_INDUSTRY_NAME\r\n\t\t\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L6_INDUSTRY_NAME\" ? industryData[0].L6_INDUSTRY_NAME : industryData[0].L7_INDUSTRY_NAME\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tdefineScopeFilters.GICS_ID = 'all'\r\n\t\t\t\tdefineScopeFilters.industryName = ''\r\n\t\t\t}\r\n\t\t}\r\n\t\tvar breadCrumbsArray = this.state.breadCrumbsArray\r\n\t\tvar clickedIndustryDetails = this.state.clickedIndustryDetails\r\n\t\tif (value.label === \"2\") {\r\n\t\t\tdefineScopeFilters.industryName = \"\";\r\n\t\t\tbreadCrumbsArray = [];\r\n\t\t\tclickedIndustryDetails = []\r\n\t\t}\r\n\t\telse {\r\n\r\n\t\t}\r\n\t\t//this.state.breadCrumbsArray\r\n\r\n\t\tthis.setState({\r\n\t\t\tbreadCrumbsArray: breadCrumbsArray,\r\n\t\t\tclickedIndustryDetails: clickedIndustryDetails,\r\n\t\t\tdefineScopeFilters: defineScopeFilters,\r\n\t\t\tindustryLeveldrpdwn: value.value,\r\n\t\t\tisFilterChanges: true\r\n\t\t})//, () => this.triggerAllMethod(true, false))\r\n\t}\r\n\r\n\thandleTopCountChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.topRecords = data.value\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters }, () => this.filterAndGroupData(true))\r\n\t}\r\n\r\n\tremoveIndustryFilter(item, index, refreshPagefromPopUP) {\r\n\t\tvar breadCrumbsArray = this.state.breadCrumbsArray\r\n\t\t//var index = breadCrumbsArray.findIndex(industry => industry === item)\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\r\n\t\t//pass GICS_ID to barchart and supplier grid to fecth data accordingly\r\n\t\tvar industryData = this.state.industrySupplierDetailsAllData !== null ? this.state.industrySupplierDetailsAllData.filter((item) => item[defineScopeFilters.industryLevel] === defineScopeFilters.industryName): undefined;\r\n\r\n\t\tif (industryData !== undefined && industryData.length > 0) {\r\n\t\t\tdefineScopeFilters.GICS_ID = defineScopeFilters.industryLevel === \"L2_INDUSTRY_NAME\" ? 'all'\r\n\t\t\t\t: defineScopeFilters.industryLevel === \"L3_INDUSTRY_NAME\" ? industryData[0].L2_INDUSTRY_ID\r\n\t\t\t\t\t: defineScopeFilters.industryLevel === \"L4_INDUSTRY_NAME\" ? industryData[0].L3_INDUSTRY_ID\r\n\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L5_INDUSTRY_NAME\" ? industryData[0].L4_INDUSTRY_ID\r\n\t\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L6_INDUSTRY_NAME\" ? industryData[0].L5_INDUSTRY_ID : industryData[0].L6_INDUSTRY_ID\r\n\t\t} else {\r\n\t\t\tdefineScopeFilters.GICS_ID = 'all'\r\n\t\t}\r\n\t\tvar breadCrumbsArray_new = []\r\n\t\tvar col = 'L3_INDUSTRY_NAME'\r\n\t\tvar previousLevelColName = this.state.industryLevelList.findIndex((item) => item.value === this.state.industryLeveldrpdwn);\r\n\t\tcol = previousLevelColName >= 1 ? this.state.industryLevelList[previousLevelColName - 1].value : this.state.industryLevelList[previousLevelColName].value\r\n\t\t// defineScopeFilters.industryLevel = col\r\n\t\tif (index > 0) {\r\n\t\t\tbreadCrumbsArray_new = breadCrumbsArray.filter((a, ind) =>\r\n\r\n\t\t\t\tind !== index\r\n\t\t\t);\r\n\r\n\t\t\tdefineScopeFilters.industryName = breadCrumbsArray_new[breadCrumbsArray_new.length - 1].industryName\r\n\t\t\tdefineScopeFilters.industryLevel = breadCrumbsArray_new[breadCrumbsArray_new.length - 1].industryLevel\r\n\t\t\t// var previousLevelColName = this.state.industryLevelList.findIndex((item) => item.value === this.state.industryLeveldrpdwn);\r\n\t\t\t// col = this.state.industryLevelList[previousLevelColName - 1].value\r\n\t\t}\r\n\t\telse {\r\n\t\t\tdefineScopeFilters.industryName = ''\r\n\t\t\tdefineScopeFilters.GICS_ID = 'all'\r\n\t\t}\r\n\r\n\t\tlet levelFlag = breadCrumbsArray_new.length > 0 ? true : false;\r\n\t\tif (refreshPagefromPopUP === true) {\r\n\t\t\tthis.setState({ breadCrumbsArray: breadCrumbsArray_new, defineScopeFilters: defineScopeFilters, industryLeveldrpdwn: col, levelDisabled: levelFlag })\r\n\t\t\tObject.assign(this.state, { breadCrumbsArray: breadCrumbsArray_new })\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.state.clickedIndustryDetails.splice(this.state.clickedIndustryDetails.length - 1, 1)\r\n\t\t\tvar finalBreadcrumbs = this.state.clickedIndustryDetails\r\n\t\t\tthis.setState({\r\n\t\t\t\tbreadCrumbsArray: breadCrumbsArray_new, defineScopeFilters: defineScopeFilters, industryLeveldrpdwn: col,\r\n\t\t\t\tclickedIndustryDetails: finalBreadcrumbs, levelDisabled: levelFlag\r\n\t\t\t},\r\n\t\t\t\t() => this.triggerAllMethod(true, false))\r\n\t\t\tObject.assign(this.state, { breadCrumbsArray: breadCrumbsArray_new, clickedIndustryDetails: finalBreadcrumbs })\r\n\t\t}\r\n\t}\r\n\r\n\r\n\tbindContryList() {\r\n\t\tvar defineScope = this.state.defineScope\r\n\t\tthis.props.getSupplierCountryCodes(defineScope).then((response) => {\r\n\t\t\tvar allCountries = [{ label: \"All countries\", value: \"all\" }];\r\n\t\t\tlet allBusinessUnit = [{ label: \"All Business Units\", value: \"all\" }];\r\n\t\t\tlet allBuyerRegion = [{ label: \"All Buyer Regions\", value: \"all\" }];\r\n\t\t\tif (response.status === 200 && response.data.Result !== null) {\r\n\t\t\t\tif (response.data.Result.Table !== null) {\r\n\t\t\t\t\tresponse.data.Result.Table.forEach(itemCN => {\r\n\t\t\t\t\t\tlet value = Object.values(itemCN)\r\n\t\t\t\t\t\tallCountries.push({ label: value[0], value: value[0] });\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif (response.data.Result.Table2 !== null) {\r\n\t\t\t\t\tresponse.data.Result.Table2.forEach(itemBU => {\r\n\t\t\t\t\t\tlet value = Object.values(itemBU)\r\n\t\t\t\t\t\tallBusinessUnit.push({ label: value[0], value: value[0] });\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif (response.data.Result.Table1 !== null) {\r\n\t\t\t\t\tresponse.data.Result.Table1.forEach(itemBR => {\r\n\t\t\t\t\t\tlet value = Object.values(itemBR)\r\n\t\t\t\t\t\tallBuyerRegion.push({ label: value[0], value: value[0] });\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\r\n\t\t\t}\r\n\t\t\tthis.setState({ allCountries: allCountries, allBusinessUnit: allBusinessUnit, allBuyerRegion: allBuyerRegion });\r\n\r\n\r\n\t\t}).catch((exception) => {\r\n\t\t\t//console.log(exception);\r\n\t\t})\r\n\t}\r\n\r\n\thandleCountryChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.country = data.value.length > 0 ? data.value : ['all'];\r\n\t\tif (data.value.length > 1 && data.value[0] == 'all') {\r\n\t\t\tdata.value.shift()\r\n\t\t\tdefineScopeFilters.country = data.value\r\n\t\t}\r\n\t\tif (data.value.length > 1 && data.value.includes('all')) {\r\n\t\t\tdefineScopeFilters.country = [];\r\n\t\t\tdefineScopeFilters.country = ['all'];\r\n\t\t}\r\n\t\tlet str = defineScopeFilters.country.toString()\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, countryFilter: str, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleSolutionChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.solution = data.value.length > 0 ? data.value : ['No Filter'];\r\n\t\tif (data.value.length > 1 && data.value[0] == 'No Filter') {\r\n\t\t\tdata.value.shift()\r\n\t\t\tdefineScopeFilters.solution = data.value\r\n\t\t}\r\n\t\tif (data.value.length > 1 && data.value.includes('No Filter')) {\r\n\t\t\tdefineScopeFilters.solution = [];\r\n\t\t\tdefineScopeFilters.solution = ['No Filter'];\r\n\t\t}\r\n\t\tif (data.value.includes('No solutions') && data.value.includes('Any solutions')) {\r\n\t\t\tdefineScopeFilters.solution = []\r\n\t\t\tdefineScopeFilters.solution = [data.value[1]]\r\n\t\t} else if (data.value.includes('No solutions')) {\r\n\t\t\tdefineScopeFilters.solution = []\r\n\t\t\tdefineScopeFilters.solution = ['No solutions']\r\n\t\t}\r\n\t\telse if (data.value.includes('Any solutions')) {\r\n\t\t\tdefineScopeFilters.solution = []\r\n\t\t\tdefineScopeFilters.solution = ['Any solutions']\r\n\t\t}\r\n\t\tlet str = defineScopeFilters.solution.toString()\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, solutionFilter: str, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleOutSolutionChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.outSolution = data.value.length > 0 ? data.value : ['No Filter'];\r\n\t\tif (data.value.length > 1 && data.value[0] == 'No Filter') {\r\n\t\t\tdata.value.shift()\r\n\t\t\tdefineScopeFilters.outSolution = data.value\r\n\t\t}\r\n\t\tif (data.value.length > 1 && data.value.includes('No Filter')) {\r\n\t\t\tdefineScopeFilters.outSolution = [];\r\n\t\t\tdefineScopeFilters.outSolution = ['No Filter'];\r\n\t\t}\r\n\t\tif (data.value.includes('No solutions') && data.value.includes('Any solutions')) {\r\n\t\t\tdefineScopeFilters.outSolution = []\r\n\t\t\tdefineScopeFilters.outSolution = [data.value[1]]\r\n\t\t} else if (data.value.includes('No solutions')) {\r\n\t\t\tdefineScopeFilters.outSolution = []\r\n\t\t\tdefineScopeFilters.outSolution = ['No solutions']\r\n\t\t}\r\n\t\telse if (data.value.includes('Any solutions')) {\r\n\t\t\tdefineScopeFilters.outSolution = []\r\n\t\t\tdefineScopeFilters.outSolution = ['Any solutions']\r\n\t\t}\r\n\t\tlet str = defineScopeFilters.outSolution.toString()\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, outSolutionFilter: str, isFilterChanges:true })\r\n\t}\r\n\r\n\tclickedOutside() {\r\n\t\tthis.triggerAllMethod(true, true)\r\n\t\tthis.setState({isFilterChanges:false})\r\n\t}\r\n\r\n\r\n\tclickedResetFilter() {\r\n\t\tvar reset_defineScopeFilters = this.state.defineScopeFilters;\r\n\t\treset_defineScopeFilters.country = ['all'];\r\n\t\treset_defineScopeFilters.industryLevel = \"L3_INDUSTRY_NAME\";\r\n\t\treset_defineScopeFilters.industryName = '';\r\n\t\treset_defineScopeFilters.solution = ['No Filter'];\r\n\t\treset_defineScopeFilters.outSolution = ['No Filter'];\r\n\t\treset_defineScopeFilters.solutionConfirmation = 'all';\r\n\t\treset_defineScopeFilters.buyerRegion = ['all'];\r\n\t\treset_defineScopeFilters.businessUnit = ['all'];\r\n\t\treset_defineScopeFilters.goods = 'all';\r\n\t\treset_defineScopeFilters.directSpend = 'all';\r\n\t\treset_defineScopeFilters.metricsType = \"Invoice Spend\";\r\n\t\treset_defineScopeFilters.aribaNetwork = \"all\";\r\n\t\treset_defineScopeFilters.sapAribaBuyProcess = \"all\";\r\n\t\treset_defineScopeFilters.topRecords = 20;\r\n\t\treset_defineScopeFilters.GICS_ID = ''\r\n\t\tthis.removeIndustryFilter('all', 0, false)\r\n\t\tthis.setState({\r\n\t\t\tdefineScopeFilters: reset_defineScopeFilters, industryLeveldrpdwn: \"L3_INDUSTRY_NAME\",\r\n\t\t\tsolutionFilter: 'No Filter', outSolutionFilter: 'No Filter', countryFilter: 'all', businessUnitFilter: 'all', buyerRegionFilter: 'all'\r\n\t\t}, () => this.clickedOutside());\r\n\t\t//this.clickedOutside();\r\n\t}\r\n\r\n\thandleSolutionConfirmationChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.solutionConfirmation = data.value\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleBusinessChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.businessUnit = data.value.length > 0 ? data.value : ['all'];\r\n\t\tif (data.value.length > 1 && data.value[0] == 'all') {\r\n\t\t\tdata.value.shift()\r\n\t\t\tdefineScopeFilters.businessUnit = data.value\r\n\t\t}\r\n\t\tif (data.value.length > 1 && data.value.includes('all')) {\r\n\t\t\tdefineScopeFilters.businessUnit = [];\r\n\t\t\tdefineScopeFilters.businessUnit = ['all'];\r\n\t\t}\r\n\t\tlet str = defineScopeFilters.businessUnit.toString();\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, businessUnitFilter: str, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleBuyerChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.buyerRegion = data.value.length > 0 ? data.value : ['all'];\r\n\t\tif (data.value.length > 1 && data.value[0] == 'all') {\r\n\t\t\tdata.value.shift()\r\n\t\t\tdefineScopeFilters.buyerRegion = data.value\r\n\t\t}\r\n\t\tif (data.value.length > 1 && data.value.includes('all')) {\r\n\t\t\tdefineScopeFilters.buyerRegion = [];\r\n\t\t\tdefineScopeFilters.buyerRegion = ['all'];\r\n\t\t}\r\n\t\tlet str = defineScopeFilters.buyerRegion.toString();\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, buyerRegionFilter: str, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleDirectSpendChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.directSpend = data.value == \"\" ? \"all\" : data.value;\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleGoodsChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.goods = data.value\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleMetricsChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.metricsType = data.value\r\n\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleAribaNetworkChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.aribaNetwork = data.value\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleSAPAribaBuyProcessChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.sapAribaBuyProcess = data.value\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, isFilterChanges:true })\r\n\t}\r\n\r\n\tfilterAndGroupData(isTopRequest) {\r\n\t\tvar _instance = this;\r\n\t\tif (this.state.industrySupplierDetailsAllData !== null && this.state.industrySupplierDetailsAllData !== undefined && this._isMounted) {\r\n\t\t\tvar allData = this.state.industrySupplierDetailsAllData;\r\n\t\t\tvar treeFormatData = [];\r\n\t\t\tvar allotherInvoiceSpend = 0\r\n\t\t\tvar topRecords = [];\r\n\t\t\tvar industryLeveldrpdwn = this.state.industryLeveldrpdwn\r\n\t\t\tvar defineScopeFilters = this.state.defineScopeFilters;\r\n\t\t\tvar breadCrumbs = this.state.breadCrumbsArray;\r\n\t\t\tObject.keys(defineScopeFilters).map((filter) => {\r\n\t\t\t\tswitch (filter) {\r\n\r\n\t\t\t\t\tcase \"industryLevel\": {\r\n\t\t\t\t\t\tvar removeNullEntries = allData.filter(item => item[defineScopeFilters[filter]] !== null)\r\n\t\t\t\t\t\tvar groups = _.groupBy(removeNullEntries, defineScopeFilters[filter]);\r\n\r\n\t\t\t\t\t\tif (defineScopeFilters.industryName === \"\") {\r\n\r\n\t\t\t\t\t\t\tObject.keys(groups).map((element) => {\r\n\t\t\t\t\t\t\t\tvar isclick = false\r\n\t\t\t\t\t\t\t\tvar child_INVOICE_SPEND = 0;\r\n\t\t\t\t\t\t\t\tvar child_INVOICE_COUNT = 0;\r\n\t\t\t\t\t\t\t\tvar child_PO_SPEND = 0;\r\n\t\t\t\t\t\t\t\tvar child_PO_COUNT = 0;\r\n\t\t\t\t\t\t\t\tvar child_UNIQUE_SUPPLIER = 0;\r\n\t\t\t\t\t\t\t\tvar rank = 0\r\n\t\t\t\t\t\t\t\tfor (let index = 0; index < groups[element].length; index++) {\r\n\t\t\t\t\t\t\t\t\tisclick = this.isClickableTile(\"L2_INDUSTRY_NAME\", groups[element][index])\r\n\t\t\t\t\t\t\t\t\tconst childElement = groups[element][index];\r\n\t\t\t\t\t\t\t\t\tchild_INVOICE_SPEND = child_INVOICE_SPEND + childElement.INVOICE_SPEND;\r\n\t\t\t\t\t\t\t\t\tchild_INVOICE_COUNT = child_INVOICE_COUNT + childElement.INVOICE_COUNT;\r\n\t\t\t\t\t\t\t\t\tchild_PO_SPEND = child_PO_SPEND + childElement.PO_SPEND;\r\n\t\t\t\t\t\t\t\t\tchild_PO_COUNT = child_PO_COUNT + childElement.PO_COUNT;\r\n\t\t\t\t\t\t\t\t\tchild_UNIQUE_SUPPLIER = child_UNIQUE_SUPPLIER + childElement.UNIQUE_SUPPLIERS;\r\n\t\t\t\t\t\t\t\t\trank = childElement[_instance.getRankColumnName(defineScopeFilters[filter])]\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\tif (treeFormatData.findIndex((ele) => ele.name === element) < 0) {\r\n\t\t\t\t\t\t\t\t\ttreeFormatData.push({\r\n\t\t\t\t\t\t\t\t\t\tname: element, value: child_INVOICE_SPEND, clickable: isclick,\r\n\t\t\t\t\t\t\t\t\t\tinvoiceSpend: (child_INVOICE_SPEND), invoiceCount: (child_INVOICE_COUNT),\r\n\t\t\t\t\t\t\t\t\t\tpoSpend: (child_PO_SPEND), poCount: (child_PO_COUNT),\r\n\t\t\t\t\t\t\t\t\t\tuniqueSupplier: (child_UNIQUE_SUPPLIER),\r\n\t\t\t\t\t\t\t\t\t\trank: rank\r\n\t\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\t\tvar existingEntry = treeFormatData.filter((ele) => ele.name === element);\r\n\t\t\t\t\t\t\t\t\tvar updatedEntry = [{\r\n\t\t\t\t\t\t\t\t\t\tname: element,\r\n\t\t\t\t\t\t\t\t\t\tvalue: existingEntry[0].value + (child_INVOICE_SPEND),\r\n\t\t\t\t\t\t\t\t\t\tclickable: isclick,\r\n\t\t\t\t\t\t\t\t\t\tinvoiceSpend: existingEntry[0].invoiceSpend + (child_INVOICE_SPEND),\r\n\t\t\t\t\t\t\t\t\t\tinvoiceCount: existingEntry[0].invoiceCount + (child_INVOICE_COUNT),\r\n\t\t\t\t\t\t\t\t\t\tpoSpend: existingEntry[0].poSpend + (child_PO_SPEND),\r\n\t\t\t\t\t\t\t\t\t\tpoCount: existingEntry[0].poCount + (child_PO_COUNT),\r\n\t\t\t\t\t\t\t\t\t\tuniqueSupplier: existingEntry[0].uniqueSupplier + (child_UNIQUE_SUPPLIER),\r\n\t\t\t\t\t\t\t\t\t\trank: rank\r\n\t\t\t\t\t\t\t\t\t}]\r\n\t\t\t\t\t\t\t\t\tvar index = treeFormatData.findIndex((ele) => ele.name === element)\r\n\t\t\t\t\t\t\t\t\ttreeFormatData[index] = updatedEntry;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\ttreeFormatData = groups;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\tcase \"industryName\":\r\n\t\t\t\t\t\tvar col = ''\r\n\t\t\t\t\t\tvar nextLevelColName = this.state.industryLevelList.findIndex((item) => item.value === this.state.industryLeveldrpdwn);\r\n\t\t\t\t\t\tif (!isTopRequest) {\r\n\t\t\t\t\t\t\tcol = this.state.industryLevelList[nextLevelColName + 1]\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\tcol = this.state.industryLevelList[nextLevelColName]\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tif (defineScopeFilters[filter] !== \"\" && col !== undefined) {\r\n\t\t\t\t\t\t\tvar groups = treeFormatData[defineScopeFilters[filter]];\r\n\t\t\t\t\t\t\tif (groups === undefined) {\r\n\t\t\t\t\t\t\t\tgroups = []\r\n\t\t\t\t\t\t\t\tObject.values(treeFormatData).map((ele) => {\r\n\r\n\t\t\t\t\t\t\t\t\tfor (let index = 0; index < ele.length; index++) {\r\n\t\t\t\t\t\t\t\t\t\tconst element = ele[index];\r\n\t\t\t\t\t\t\t\t\t\tif (element[breadCrumbs[breadCrumbs.length - 1].industryLevel] ===\r\n\t\t\t\t\t\t\t\t\t\t\tbreadCrumbs[breadCrumbs.length - 1].industryName) {\r\n\t\t\t\t\t\t\t\t\t\t\tgroups.push(element)\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\tif (groups !== undefined) {\r\n\t\t\t\t\t\t\t\ttreeFormatData = [];\r\n\t\t\t\t\t\t\t\tindustryLeveldrpdwn = col.value\r\n\t\t\t\t\t\t\t\tthis.setState({ industryLeveldrpdwn: industryLeveldrpdwn })\r\n\t\t\t\t\t\t\t\tObject.keys(groups).map((element) => {\r\n\t\t\t\t\t\t\t\t\tif (groups[element][col.value] !== null && groups[element][col.value] !== undefined) {\r\n\t\t\t\t\t\t\t\t\t\tvar _rank = groups[element][_instance.getRankColumnName(col.value)]\r\n\t\t\t\t\t\t\t\t\t\tif (treeFormatData.findIndex((ele) => ele.name === groups[element][col.value]) < 0) {\r\n\t\t\t\t\t\t\t\t\t\t\ttreeFormatData.push({\r\n\t\t\t\t\t\t\t\t\t\t\t\tname: groups[element][col.value],\r\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: (groups[element].INVOICE_SPEND),\r\n\t\t\t\t\t\t\t\t\t\t\t\tclickable: _instance.isClickableTile(col.value, groups[element]),\r\n\t\t\t\t\t\t\t\t\t\t\t\tinvoiceSpend: (groups[element].INVOICE_SPEND), invoiceCount: (groups[element].INVOICE_COUNT),\r\n\t\t\t\t\t\t\t\t\t\t\t\tpoSpend: (groups[element].PO_SPEND), poCount: (groups[element].PO_COUNT),\r\n\t\t\t\t\t\t\t\t\t\t\t\tuniqueSupplier: (groups[element].UNIQUE_SUPPLIERS),\r\n\t\t\t\t\t\t\t\t\t\t\t\trank: _rank\r\n\t\t\t\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\t\t\t\tvar existingEntry = treeFormatData.filter((ele) => ele.name === groups[element][col.value]);\r\n\t\t\t\t\t\t\t\t\t\t\tvar updatedEntry = {\r\n\t\t\t\t\t\t\t\t\t\t\t\tname: groups[element][col.value],\r\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: Number(existingEntry[0].value) + Number(groups[element].INVOICE_SPEND),\r\n\t\t\t\t\t\t\t\t\t\t\t\tclickable: _instance.isClickableTile(col.value, groups[element]),\r\n\t\t\t\t\t\t\t\t\t\t\t\tinvoiceSpend: existingEntry[0].invoiceSpend + ((groups[element].INVOICE_SPEND)),\r\n\t\t\t\t\t\t\t\t\t\t\t\tinvoiceCount: existingEntry[0].invoiceCount + (groups[element].INVOICE_COUNT),\r\n\t\t\t\t\t\t\t\t\t\t\t\tpoSpend: existingEntry[0].poSpend + ((groups[element].PO_SPEND)),\r\n\t\t\t\t\t\t\t\t\t\t\t\tpoCount: existingEntry[0].poCount + ((groups[element].PO_COUNT)),\r\n\t\t\t\t\t\t\t\t\t\t\t\tuniqueSupplier: existingEntry[0].uniqueSupplier + ((groups[element].UNIQUE_SUPPLIERS)),\r\n\t\t\t\t\t\t\t\t\t\t\t\trank: _rank\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\tvar index = treeFormatData.findIndex((ele) => ele.name === groups[element][col.value])\r\n\t\t\t\t\t\t\t\t\t\t\ttreeFormatData[index] = updatedEntry;\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\tcase \"topRecords\":\r\n\t\t\t\t\t\tvar sortByColumn = this.state.defineScopeFilters.metricsType === 'Invoice Spend' ? 'invoiceSpend' :\r\n\t\t\t\t\t\t\tthis.state.defineScopeFilters.metricsType === 'Invoice Count' ? 'invoiceCount' :\r\n\t\t\t\t\t\t\t\tthis.state.defineScopeFilters.metricsType === 'PO Spend' ? 'poSpend' : 'poCount';\r\n\t\t\t\t\t\tvar sortedByInvoice = _.map(_.orderBy(treeFormatData, sortByColumn, ['desc']));\r\n\t\t\t\t\t\tif (sortedByInvoice.length > defineScopeFilters[filter]) {\r\n\t\t\t\t\t\t\ttopRecords = _.take(sortedByInvoice, defineScopeFilters[filter]);\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\ttopRecords = sortedByInvoice\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tvar invoiceSpend = 0;\r\n\t\t\t\t\t\tvar invoiceCount = 0;\r\n\t\t\t\t\t\tvar poSpend = 0;\r\n\t\t\t\t\t\tvar poCount = 0;\r\n\t\t\t\t\t\tvar uniqueSupplier = 0;\r\n\t\t\t\t\t\tsortedByInvoice.slice(defineScopeFilters[filter]).map((item) => {\r\n\t\t\t\t\t\t\tallotherInvoiceSpend = parseFloat(allotherInvoiceSpend) + parseFloat(item.value);\r\n\t\t\t\t\t\t\tinvoiceSpend = parseFloat(invoiceSpend) + parseFloat(item.invoiceSpend);\r\n\t\t\t\t\t\t\tinvoiceCount = parseFloat(invoiceCount) + parseFloat(item.invoiceCount);\r\n\t\t\t\t\t\t\tpoSpend = parseFloat(poSpend) + parseFloat(item.poSpend);\r\n\t\t\t\t\t\t\tpoCount = parseFloat(poCount) + parseFloat(item.poCount);\r\n\t\t\t\t\t\t\tuniqueSupplier = parseFloat(uniqueSupplier) + parseFloat(item.uniqueSupplier)\r\n\r\n\t\t\t\t\t\t})\r\n\r\n\t\t\t\t\t\tif (allotherInvoiceSpend != 0) {\r\n\t\t\t\t\t\t\tallotherInvoiceSpend = allotherInvoiceSpend < 0 ? (allotherInvoiceSpend * -1) : allotherInvoiceSpend;\r\n\t\t\t\t\t\t\ttopRecords.push({\r\n\t\t\t\t\t\t\t\tname: \"All other suppliers\",\r\n\t\t\t\t\t\t\t\tvalue: (allotherInvoiceSpend),\r\n\t\t\t\t\t\t\t\tclickable: true,\r\n\t\t\t\t\t\t\t\tinvoiceSpend: (invoiceSpend), invoiceCount: (invoiceCount),\r\n\t\t\t\t\t\t\t\tpoSpend: (poSpend),\r\n\t\t\t\t\t\t\t\tpoCount: (poCount),\r\n\t\t\t\t\t\t\t\tuniqueSupplier: (uniqueSupplier),\r\n\t\t\t\t\t\t\t\trank: (Number(defineScopeFilters[filter]) + 1)\r\n\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t}\r\n\r\n\t\t\t})\r\n\t\t\tif (topRecords.length > 0) {\r\n\t\t\t\tvar industrySupplierDetailsFilterData = { name: industryLeveldrpdwn, children: topRecords }\r\n\t\t\t\tthis.setState({ industrySupplierDetailsFilterData: industrySupplierDetailsFilterData });\r\n\t\t\t\tthis.calculateAggreateSpend(topRecords);\r\n\t\t\t\t//console.log(topRecords)\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis.setState({ industrySupplierDetailsFilterData: '' })\r\n\t\t\t\tthis.calculateAggreateSpend();\r\n\t\t\t}\r\n\t\t}\r\n\t\telse if (this._isMounted) {\r\n\t\t\tthis.setState({ industrySupplierDetailsFilterData: '' })\r\n\t\t\tthis.calculateAggreateSpend();\r\n\t\t}\r\n\t}\r\n\tgetRankColumnName(levelId) {\r\n\r\n\t\tvar columeName = \"\"\r\n\t\tswitch (levelId) {\r\n\t\t\tcase (\"L2_INDUSTRY_NAME\"):\r\n\t\t\t\tcolumeName = \"L2_RANK\"\r\n\t\t\t\tbreak;\r\n\t\t\tcase (\"L3_INDUSTRY_NAME\"):\r\n\t\t\t\tcolumeName = \"L3_RANK\"\r\n\t\t\t\tbreak;\r\n\t\t\tcase (\"L4_INDUSTRY_NAME\"):\r\n\t\t\t\tcolumeName = \"L4_RANK\"\r\n\t\t\t\tbreak;\r\n\t\t\tcase (\"L5_INDUSTRY_NAME\"):\r\n\t\t\t\tcolumeName = \"L5_RANK\"\r\n\t\t\t\tbreak;\r\n\t\t\tcase (\"L6_INDUSTRY_NAME\"):\r\n\t\t\t\tcolumeName = \"L6_RANK\"\r\n\t\t\t\tbreak;\r\n\t\t\tcase (\"L7_INDUSTRY_NAME\"):\r\n\t\t\t\tcolumeName = \"L7_RANK\"\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t\treturn columeName;\r\n\t}\r\n\r\n\r\n\tcalculateAggreateSpend(topRecords) {\r\n\t\tvar spendData = topRecords;\r\n\t\tvar calAggregatedAmount = {\r\n\t\t\tinvoice_spend: 0,\r\n\t\t\tinvoice_count: 0,\r\n\t\t\tpo_spend: 0,\r\n\t\t\tpo_count: 0,\r\n\t\t\tunique_supplier: 0\r\n\t\t}\r\n\r\n\t\tif (spendData !== undefined && this._isMounted) {\r\n\r\n\t\t\tObject.keys(spendData).map((element) => {\r\n\t\t\t\tif (element !== undefined) {\r\n\t\t\t\t\tcalAggregatedAmount.invoice_spend = parseFloat(calAggregatedAmount.invoice_spend) + parseFloat(spendData[element].invoiceSpend);\r\n\t\t\t\t\tcalAggregatedAmount.invoice_count = parseFloat(calAggregatedAmount.invoice_count) + parseFloat(spendData[element].invoiceCount);\r\n\t\t\t\t\tcalAggregatedAmount.po_spend = parseFloat(calAggregatedAmount.po_spend) + parseFloat(spendData[element].poSpend);\r\n\t\t\t\t\tcalAggregatedAmount.po_count = parseFloat(calAggregatedAmount.po_count) + parseFloat(spendData[element].poCount);\r\n\t\t\t\t\tcalAggregatedAmount.unique_supplier = parseFloat(calAggregatedAmount.unique_supplier) + parseFloat(spendData[element].uniqueSupplier);\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t\t\tcalAggregatedAmount.invoice_count = Math.round(calAggregatedAmount.invoice_count);\r\n\t\t\tcalAggregatedAmount.po_count = Math.round(calAggregatedAmount.po_count);\r\n\t\t}\r\n\t\telse {\r\n\t\t\tcalAggregatedAmount.invoice_spend = 0;\r\n\t\t\tcalAggregatedAmount.invoice_count = 0;\r\n\t\t\tcalAggregatedAmount.po_spend = 0;\r\n\t\t\tcalAggregatedAmount.po_count = 0;\r\n\t\t\tcalAggregatedAmount.unique_supplier = 0;\r\n\t\t}\r\n\r\n\t\tthis.setState({ aggregatedAmount: calAggregatedAmount }, this.checkDataExists);\r\n\r\n\t}\r\n\r\n\tcheckDataExists(){\r\n\t\tvar isDataExists = true;\r\n\t\tswitch(this.state.defineScopeFilters.metricsType){\r\n\t\t\tcase \"Invoice Spend\" :\r\n\t\t\t\t\tisDataExists = this.state.aggregatedAmount.invoice_spend == 0 ? false : true;\r\n\t\t\tbreak;\r\n\t\t\tcase \"Invoice Count\" :\r\n\t\t\t\t\tisDataExists = this.state.aggregatedAmount.invoice_count == 0 ? false : true;\r\n\t\t\tbreak;\r\n\t\t\tcase \"PO Spend\" :\r\n\t\t\t\t\tisDataExists = this.state.aggregatedAmount.po_spend == 0 ? false : true;\r\n\t\t\tbreak;\r\n\t\t\tcase \"PO Count\" :\r\n\t\t\t\t\tisDataExists = this.state.aggregatedAmount.po_count == 0 ? false : true;\r\n\t\t\tbreak;\r\n\t\t\tdefault:\r\n\t\t\t\t\tisDataExists = true;\r\n\t\t}\r\n\t\tthis.setState({ isDataExists : isDataExists})\r\n\t}\r\n\r\n\tonClick_TreeMap(param) {\r\n\t\tvar clickedIndustryDetails = this.state.clickedIndustryDetails\r\n\t\tclickedIndustryDetails.push(param)\r\n\t\tthis.setState({ clickedIndustryDetails: clickedIndustryDetails })\r\n\t\tif (param.data.name !== \"All other suppliers\" && this._isMounted) {\r\n\t\t\tthis.props.defineScopeLoading(true)\r\n\t\t\tlet data = {}\r\n\t\t\tlet defineScopeFilters = this.setFilter(param);\r\n\t\t\tdata = {\r\n\t\t\t\tINVOICE_COUNT: param.data.invoiceCount,\r\n\t\t\t\tINVOICE_SPEND: param.data.invoiceSpend,\r\n\t\t\t\tPO_COUNT: param.data.poCount,\r\n\t\t\t\tPO_SPEND: param.data.poSpend,\r\n\t\t\t\tUNIQUE_SUPPLIERS: param.data.uniqueSupplier,\r\n\t\t\t}\r\n\r\n\t\t\tdata[defineScopeFilters.industryLevel] = defineScopeFilters.industryName //industry name\r\n\r\n\t\t\tlet indSplits = defineScopeFilters.industryLevel.split('_');\r\n\t\t\tdata['INDUSTRY_LEVEL'] = indSplits[0].substr(1);\r\n\t\t\tlet industryId = indSplits[0] + '_' + indSplits[1] + '_' + 'ID';\r\n\t\t\tdata[industryId] = defineScopeFilters.GICS_ID;\r\n\r\n\t\t\tvar breadCrumbsArray_new = this.state.breadCrumbsArray\r\n\t\t\tbreadCrumbsArray_new.push({ industryName: param.data.name, industryLevel: param.parent.data.name, data: data, level: data.INDUSTRY_LEVEL })\r\n\t\t\tthis.setState({\r\n\t\t\t\tdefineScopeFilters: defineScopeFilters, breadCrumbsArray: breadCrumbsArray_new, levelDisabled: true\r\n\t\t\t}, () => {\r\n\t\t\t\tthis.getSummaryScopeSolution();\r\n\t\t\t\tthis.getSupplierScopeDetails();\r\n\t\t\t\tthis.filterAndGroupData(false);\r\n\t\t\t})\r\n\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.refs.modal.show()\r\n\t\t}\r\n\t}\r\n\r\n\tonDoubleClickTreeMap(param) {\r\n\t\tif (param.data.name !== \"All other suppliers\" && this._isMounted) {\r\n\t\t\tlet data = {}\r\n\t\t\tlet defineScopeFilters = this.setFilter(param);\r\n\t\t\tdata = {\r\n\t\t\t\tINVOICE_COUNT: param.data.invoiceCount,\r\n\t\t\t\tINVOICE_SPEND: param.data.invoiceSpend,\r\n\t\t\t\tPO_COUNT: param.data.poCount,\r\n\t\t\t\tPO_SPEND: param.data.poSpend,\r\n\t\t\t\tUNIQUE_SUPPLIERS: param.data.uniqueSupplier,\r\n\t\t\t}\r\n\r\n\t\t\tdata[defineScopeFilters.industryLevel] = defineScopeFilters.industryName //industry name\r\n\r\n\t\t\tlet indSplits = defineScopeFilters.industryLevel.split('_');\r\n\t\t\tdata['INDUSTRY_LEVEL'] = indSplits[0].substr(1);\r\n\t\t\tlet industryId = indSplits[0] + '_' + indSplits[1] + '_' + 'ID';\r\n\t\t\tdata[industryId] = defineScopeFilters.GICS_ID;\r\n\r\n\t\t\t// var breadCrumbsArray_new = this.state.breadCrumbsArray\r\n\t\t\t// breadCrumbsArray_new.push({ industryName: param.data.name, industryLevel: param.parent.data.name, data: data, level: data.INDUSTRY_LEVEL })\r\n\t\t\t// this.setState({\r\n\t\t\t// \tdefineScopeFilters: defineScopeFilters, breadCrumbsArray: breadCrumbsArray_new, levelDisabled: true\r\n\t\t\t// }, () => {\r\n\t\t\t// \tthis.getSummaryScopeSolution();\r\n\t\t\t// \tthis.getSupplierScopeDetails();\r\n\t\t\t// \tthis.filterAndGroupData(false);})\r\n\r\n\t\t\t//params[defineScopeFilters.industryName] = defineScopeFilters.GICS_ID;\r\n\t\t\tthis.showSupplierIndustriesModal(data, defineScopeFilters.industryName, data.INDUSTRY_LEVEL)\r\n\t\t\t//this.setState({openIndustryPopup: true})\r\n\t\t} else {\r\n\t\t\tthis.refs.modal.show()\r\n\t\t}\r\n\t}\r\n\r\n\tsetFilter(param) {\r\n\t\tvar defineScopeFilters = Object.assign({}, this.state.defineScopeFilters);\r\n\t\tdefineScopeFilters.industryName = param.data.name\r\n\t\tdefineScopeFilters.industryLevel = param.parent.data.name\r\n\r\n\t\t//pass GICS_ID to barchart and supplier grid to fecth data accordingly\r\n\t\tvar industryData = this.state.industrySupplierDetailsAllData.filter((item) => item[param.parent.data.name] === param.data.name);\r\n\r\n\t\tdefineScopeFilters.GICS_ID = defineScopeFilters.industryLevel === \"L2_INDUSTRY_NAME\" ? industryData[0].L2_INDUSTRY_ID\r\n\t\t\t: defineScopeFilters.industryLevel === \"L3_INDUSTRY_NAME\" ? industryData[0].L3_INDUSTRY_ID\r\n\t\t\t\t: defineScopeFilters.industryLevel === \"L4_INDUSTRY_NAME\" ? industryData[0].L4_INDUSTRY_ID\r\n\t\t\t\t\t: defineScopeFilters.industryLevel === \"L5_INDUSTRY_NAME\" ? industryData[0].L5_INDUSTRY_ID\r\n\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L6_INDUSTRY_NAME\" ? industryData[0].L6_INDUSTRY_ID : industryData[0].L7_INDUSTRY_ID\r\n\r\n\t\treturn defineScopeFilters;\r\n\t}\r\n\r\n\thandlelangChange(value) {\r\n\t\tthis.setState({ selectedRequestId: value.label })\r\n\t}\r\n\r\n\thandleScopeCheckChanged(scope) {\r\n\t\tvar id = scope.target.id;\r\n\t\tif (this.state.selectedScopes.indexOf(id) === -1) {\r\n\t\t\tthis.setState(state => ({\r\n\t\t\t\tselectedScopes: [...state.selectedScopes, id]\r\n\t\t\t}));\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.setState({\r\n\t\t\t\tselectedScopes: this.state.selectedScopes.filter((item) => item !== id)\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n\r\n\ttriggerAllMethod = (isTopRequest, callHana) => {\r\n\t\tif (this._isMounted) {\r\n\r\n\t\t\tif (callHana) {\r\n\t\t\t\tthis.getIndustrySupplierDetails(isTopRequest);\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis.filterAndGroupData(isTopRequest)\r\n\t\t\t}\r\n\t\t\tthis.getSummaryScopeSolution();\r\n\t\t\tthis.getSupplierScopeDetails();\r\n\t\t}\r\n\t};\r\n\r\n\r\n\tgetSummaryScopeSolution() {\r\n\t\tvar defineScope_obj = this.state.defineScope;\r\n\t\tdefineScope_obj.User_Email = this.props.spendDetails !== undefined &&\r\n\t\t\tthis.props.spendDetails.currentActiveRequest !== undefined ? (\r\n\t\t\t\tthis.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ?\r\n\t\t\t\t\tthis.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester) : '';\r\n\r\n\t\tdefineScope_obj.Country = this.state.countryFilter;\r\n\t\tdefineScope_obj.Solution = this.state.solutionFilter;\r\n\t\tdefineScope_obj.outSolution = this.state.outSolutionFilter;\r\n\t\tdefineScope_obj.SolutionConfirmation = this.state.defineScopeFilters.solutionConfirmation === '' ? defineScope_obj.SolutionConfirmation : this.state.defineScopeFilters.solutionConfirmation;\r\n\t\tdefineScope_obj.GICS_ID = this.state.defineScopeFilters.GICS_ID === '' ? defineScope_obj.GICS_ID : this.state.defineScopeFilters.GICS_ID;\r\n\t\tdefineScope_obj.DirectSpend = this.state.defineScopeFilters.directSpend === '' ? defineScope_obj.DirectSpend : this.state.defineScopeFilters.directSpend;\r\n\t\tdefineScope_obj.Goods = this.state.defineScopeFilters.goods === '' ? defineScope_obj.Goods : this.state.defineScopeFilters.goods;\r\n\t\tdefineScope_obj.Business_Unit = this.state.businessUnitFilter;\r\n\t\tdefineScope_obj.Buyer_Region = this.state.buyerRegionFilter;\r\n\t\tdefineScope_obj.MetricsType = this.state.defineScopeFilters.metricsType === '' ? defineScope_obj.MetricsType : this.state.defineScopeFilters.metricsType;\r\n\t\tdefineScope_obj.AribaNetwork = this.state.defineScopeFilters.aribaNetwork === '' ? defineScope_obj.AribaNetwork : this.state.defineScopeFilters.aribaNetwork;\r\n\t\tdefineScope_obj.SAPAribaBuyProcess = this.state.defineScopeFilters.sapAribaBuyProcess === '' ? defineScope_obj.SAPAribaBuyProcess : this.state.defineScopeFilters.sapAribaBuyProcess;\r\n\r\n\t\tthis.props.getSummaryScopeSolution(defineScope_obj)\r\n\t\t\t.then((response) => {\r\n\t\t\t\t//this.props.defineScopeSuccess('')\r\n\t\t\t\t//var isValidData = false;\r\n\t\t\t\tif (response.data.Result != undefined && this._isMounted) {\r\n\t\t\t\t\t// for (var i = 0; i < response.data.Result.length; i++) {\r\n\t\t\t\t\t// \tif (response.data.Result[i]['IN_SCOPE_SPEND'] === null && response.data.Result[i]['OUT_SCOPE_SPEND'] === null) {\r\n\t\t\t\t\t// \t\tisValidData = false;\r\n\t\t\t\t\t// \t} else {\r\n\t\t\t\t\t// \t\tisValidData = true;\r\n\t\t\t\t\t// \t}\r\n\t\t\t\t\t// }\r\n\r\n\t\t\t\t\tlet data = response.data.Result;\r\n\r\n\t\t\t\t\tvar array = [];\r\n\t\t\t\t\tdata.forEach((element) => {\r\n\t\t\t\t\t\tif (element.IN_SCOPE_SPEND == null && element.OUT_SCOPE_SPEND == null) {\r\n\t\t\t\t\t\t\tarray = [];\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\tvar obj = {};\r\n\t\t\t\t\t\t\tobj.IN_SCOPE_SPEND = element.IN_SCOPE_SPEND;\r\n\t\t\t\t\t\t\tobj.OUT_SCOPE_SPEND = element.OUT_SCOPE_SPEND;\r\n\t\t\t\t\t\t\tobj.SOLUTION_TYPE = element.SOLUTION_TYPE;\r\n\t\t\t\t\t\t\tobj[\"InScopeValue\"] = element.IN_SCOPE_SPEND;\r\n\t\t\t\t\t\t\tobj[\"OutScopeValue\"] = element.OUT_SCOPE_SPEND;\r\n\t\t\t\t\t\t\tarray.push(obj);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t});\r\n\r\n\t\t\t\t\tthis.setState({ summaryScopeData: array });// (isValidData === false ? null : response.data.Result) });\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\tthis.props.defineScopeFailure('API service is down. Please contact administrator.')\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.props.defineScopeFailure(this.props.content.error)\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t}\r\n\r\n\r\n\tgetSupplierScopeDetails() {\r\n\t\tvar defineScope_obj = this.state.defineScope;\r\n\t\tdefineScope_obj.User_Email = this.props.spendDetails !== undefined &&\r\n\t\t\tthis.props.spendDetails.currentActiveRequest !== undefined ? (\r\n\t\t\t\tthis.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ?\r\n\t\t\t\t\tthis.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester) : '';\r\n\r\n\t\t// \tthis.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ?\r\n\t\t// this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester;\r\n\t\tdefineScope_obj.Country = this.state.countryFilter;\r\n\t\tdefineScope_obj.Solution = this.state.solutionFilter;\r\n\t\tdefineScope_obj.outSolution = this.state.outSolutionFilter;\r\n\t\tdefineScope_obj.SolutionConfirmation = this.state.defineScopeFilters.solutionConfirmation === '' ? defineScope_obj.SolutionConfirmation : this.state.defineScopeFilters.solutionConfirmation;\r\n\t\tdefineScope_obj.GICS_ID = this.state.defineScopeFilters.GICS_ID === '' ? defineScope_obj.GICS_ID : this.state.defineScopeFilters.GICS_ID;\r\n\t\tdefineScope_obj.DirectSpend = this.state.defineScopeFilters.directSpend === '' ? defineScope_obj.DirectSpend : this.state.defineScopeFilters.directSpend;\r\n\t\tdefineScope_obj.Goods = this.state.defineScopeFilters.goods === '' ? defineScope_obj.Goods : this.state.defineScopeFilters.goods;\r\n\t\tdefineScope_obj.Business_Unit = this.state.businessUnitFilter;\r\n\t\tdefineScope_obj.Buyer_Region = this.state.buyerRegionFilter;\r\n\t\tdefineScope_obj.MetricsType = this.state.defineScopeFilters.metricsType === '' ? defineScope_obj.MetricsType : this.state.defineScopeFilters.metricsType;\r\n\t\tdefineScope_obj.AribaNetwork = this.state.defineScopeFilters.aribaNetwork === '' ? defineScope_obj.AribaNetwork : this.state.defineScopeFilters.aribaNetwork;\r\n\t\tdefineScope_obj.SAPAribaBuyProcess = this.state.defineScopeFilters.sapAribaBuyProcess === '' ? defineScope_obj.SAPAribaBuyProcess : this.state.defineScopeFilters.sapAribaBuyProcess;\r\n\r\n\t\tthis.props.getSupplierScopeDetails(defineScope_obj)\r\n\t\t\t.then((response) => {\r\n\r\n\t\t\t\tif (response !== undefined && response.status === 200 && response.data.Result !== undefined) {\r\n\t\t\t\t\tsetTimeout(() => { this.props.defineScopeSuccess('') }, 2000)\r\n\r\n\t\t\t\t\tthis.setState({ supplierData: response.data.Result });\r\n\t\t\t\t}\r\n\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\tthis.props.defineScopeFailure('API service is down. Please contact administrator.')\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.props.defineScopeFailure(this.props.content.error)\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t}\r\n\r\n\tisClickableTile(colvalue, data) {\r\n\t\tif (colvalue === \"L2_INDUSTRY_NAME\") {\r\n\t\t\treturn data[\"L3_INDUSTRY_NAME\"] !== null ? true : false\r\n\t\t}\r\n\t\tif (colvalue === \"L3_INDUSTRY_NAME\") {\r\n\t\t\treturn data[\"L4_INDUSTRY_NAME\"] !== null ? true : false\r\n\t\t}\r\n\t\tif (colvalue === \"L4_INDUSTRY_NAME\") {\r\n\t\t\treturn data[\"L5_INDUSTRY_NAME\"] !== null ? true : false\r\n\t\t}\r\n\t\tif (colvalue === \"L5_INDUSTRY_NAME\") {\r\n\t\t\treturn data[\"L6_INDUSTRY_NAME\"] !== null ? true : false\r\n\t\t}\r\n\t\tif (colvalue === \"L6_INDUSTRY_NAME\") {\r\n\t\t\treturn data[\"L7_INDUSTRY_NAME\"] !== null ? true : false\r\n\t\t}\r\n\t\tif (colvalue !== \"L7_INDUSTRY_NAME\") {\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\r\n\t}\r\n\tshowModal() {\r\n\t\tthis.refs.modal.show()\r\n\t}\r\n\r\n\thideModal() {\r\n\t\tthis.refs.modal.hide()\r\n\t}\r\n\r\n\tshowAlertModal(action) {\r\n\t\tthis.refs[action].show()\r\n\t}\r\n\r\n\thideAlertModal(action) {\r\n\t\tthis.refs[action].hide()\r\n\t\t//this.setState({ open: true })\r\n\t}\r\n\r\n\tcontinueNavigation(action) {\r\n\t\tthis.refs[action].hide()\r\n\t\tthis.props.trackSupplierDrillDownChanges(false)\r\n\t\tthis.props.trackIndustryDrillScopeChanges(false)\r\n\t\tif (this.props.spendDetails.supplierDrilldownSavedChanges === true) {\r\n\t\t\tthis.props.trackSupplierDrillDownSave(false)\r\n\t\t\tthis.setState({ open: false, openIndustryPopup: false })\r\n\t\t\tthis._isMounted = true;\r\n\t\t\tthis.loadData()\r\n\t\t\twindow.scrollTo(0, 0);\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.setState({ open: false, openIndustryPopup: false })\r\n\t\t}\r\n\t}\r\n\r\n\tshowSupplierDrilldownModal(SKEY, capIQId, parentCapIQId) {\r\n\t\tvar supplierDetails = { SKEY: SKEY, capIQId: capIQId, parentCapIQId: parentCapIQId }\r\n\t\tthis.props.storeSupplierSKEY(supplierDetails)\r\n\t\tthis.setState({\r\n\t\t\topen: true\r\n\t\t})\r\n\t}\r\n\r\n\tshowSupplierIndustriesModal(data, industry, level) {\r\n\t\tlet key = 'L' + level + '_' + 'INDUSTRY_ID'\r\n\t\tlet SKEY = data[key]\r\n\t\tdata['name'] = industry;\r\n\t\tvar industryGICS_Details = { SKEY: SKEY, industry: industry, level: level, industryData: { params: data, filters: this.state.defineScopeFilters } }\r\n\t\tthis.props.storeIndustryGICS_ID(industryGICS_Details)\r\n\r\n\t\t//var supplierDetails = { SKEY: SKEY, capIQId: capIQId, parentCapIQId: parentCapIQId, industryData: data }\r\n\t\t//this.props.storeSupplierSKEY(supplierDetails)\r\n\t\tthis.setState({\r\n\t\t\topenIndustryPopup: true\r\n\t\t})\r\n\t}\r\n\r\n\tsetVisibility(isVisible) {\r\n\t\tif (this.props.supplierDrilldownPendingChanges !== undefined && this.props.supplierDrilldownPendingChanges !== null\r\n\t\t\t&& this.props.supplierDrilldownPendingChanges === true) {\r\n\t\t\tthis.showAlertModal(\"alert\")\r\n\t\t} else if (this.props.industryDrillScopePendingChanges !== undefined && this.props.industryDrillScopePendingChanges !== null\r\n\t\t\t&& this.props.industryDrillScopePendingChanges === true) {\r\n\t\t\tthis.showAlertModal(\"alert\")\r\n\t\t}\r\n\t\telse {\r\n\t\t\tif (this.props.spendDetails.supplierDrilldownSavedChanges === true) {\r\n\t\t\t\tthis.props.trackSupplierDrillDownSave(false)\r\n\t\t\t\tthis.setState({ open: false, openIndustryPopup: false })\r\n\t\t\t\tthis._isMounted = true;\r\n\t\t\t\tif (this.state.breadCrumbsArray.length > 0) {\r\n\t\t\t\t\tthis.removeIndustryFilter(this.state.clickedIndustryDetails[this.state.breadCrumbsArray.length - 1].data.name, this.state.breadCrumbsArray.length - 1, true)\r\n\t\t\t\t\tthis.onClick_TreeMap(this.state.clickedIndustryDetails[this.state.breadCrumbsArray.length])\r\n\t\t\t\t\tthis.state.clickedIndustryDetails.splice(this.state.clickedIndustryDetails.length - 1, 1)\r\n\t\t\t\t\tvar finalBreadcrumbs = this.state.clickedIndustryDetails\r\n\t\t\t\t\tthis.setState({ clickedIndustryDetails: finalBreadcrumbs })\r\n\t\t\t\t\tObject.assign(this.state, { clickedIndustryDetails: finalBreadcrumbs })\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.loadData()\r\n\t\t\t\t}\r\n\t\t\t\twindow.scrollTo(0, 0);\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis.setState({ open: false, openIndustryPopup: false })\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\toutsidePopupClick() {\r\n\t\tthis.props.trackSupplierDrillDownChanges(false)\r\n\t\tthis.props.trackIndustryDrillScopeChanges(false)\r\n\t\tthis.setState({ open: false, openIndustryPopup: false })\r\n\t}\r\n\r\n\thideToolTip() {\r\n\t\td3.select('#tooltipdiv').remove();\r\n\t}\r\n\r\n\trender() {\r\n\t\tvar enableOnClick = this.state.industryLeveldrpdwn !== \"L7_INDUSTRY_NAME\"\r\n\t\tvar breadCrumbsArray = this.state.breadCrumbsArray;\r\n\t\tvar index = -1;\r\n\t\treturn (\r\n\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\n\r\n\r\nconst mapStateToProps = state => {\r\n\treturn {\r\n\t\t// language: state.language,\r\n\t\t// ui: state.content.ui,\r\n\t\tuser: state.default,\r\n\t\tcontent: state.content.spendAnalysis.defineScope,\r\n\t\tvalidation: state.content.validation,\r\n\t\tspendDetails: state.spendDetails,\r\n\t\tcurrencySymbols: state.content.CurrencySymbols,\r\n\t\tsupplierDrilldownPendingChanges: state.spendDetails.supplierDrilldownPendingChanges,\r\n\t\ttabMessage: state.content.spendAnalysis.detailedFile.toggleTabMessage,\r\n\t\tindustryDrillScopePendingChanges: state.spendDetails.industryDrillScopePendingChanges,\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n\treturn {\r\n\t\tdefineScopeSuccess: message => dispatch(defineScopeSuccess(message)),\r\n\t\tdefineScopeFailure: error => dispatch(defineScopeFailure(error)),\r\n\t\tdefineScopeLoading: bool => dispatch(defineScopeLoading(bool)),\r\n\t\tresetError: error => dispatch(resetError(error)),\r\n\t\tgetTopDetails: () => dispatch(getTopDetails()),\r\n\t\tgetIndustrySupplierDetails: (data) => dispatch(getIndustrySupplierDetails(data)),\r\n\t\tgetSupplierCountryCodes: (defineScope) => dispatch(getSupplierCountryCodes(defineScope)),\r\n\t\tgetSummaryScopeSolution: (formValues) => dispatch(getSummaryScopeSolution(formValues)),\r\n\t\tgetSupplierScopeDetails: (formValues) => dispatch(getSupplierScopeDetails(formValues)),\r\n\t\tstoreSupplierSKEY: (SKEY) => dispatch(storeSupplierSKEY(SKEY)),\r\n\t\ttrackSupplierDrillDownChanges: changes => dispatch(trackSupplierDrillDownChanges(changes)),\r\n\t\ttrackSupplierDrillDownSave: message => dispatch(trackSupplierDrillDownSave(message)),\r\n\t\ttrackIndustryDrillScopeChanges: bool => dispatch(trackIndustryDrillScopeChanges(bool)),\r\n\t\tstoreIndustryGICS_ID: (GICS_ID) => dispatch(storeIndustryGICS_ID(GICS_ID))\r\n\t}\r\n}\r\n\r\nexport default connect(\r\n\tmapStateToProps,\r\n\tmapDispatchToProps\r\n)(IndustryBreakdownContainer)\r\n","//\r\n//\r\n//\r\n//\r\n// <- This code is no longer used ->\r\n//\r\n//\r\n//\r\n//\r\nimport React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport SearchField from \"react-search-field\";\r\nimport { GoSearch } from \"react-icons/lib/go\";\r\nimport { searchResult, searchText, searchData } from '../../actions/searchActions'\r\nimport {\r\n fetchCrmResults,\r\n crmSearchLoading,\r\n crmSearchSuccess,\r\n crmSearchFailure,\r\n fetchCapIqSearchResults,\r\n capIqSearchSuccess,\r\n capIqSearchFailure\r\n}\r\n from 'actions/searchActions'\r\n\r\nfunction compare(a, b) {\r\n // Use toUpperCase() to ignore character casing\r\n const companyA = a.item.SAP_TOP_VIEW_NAME.toUpperCase();\r\n const companyB = b.item.SAP_TOP_VIEW_NAME.toUpperCase();\r\n\r\n let comparison = 0;\r\n if (companyA > companyB) {\r\n comparison = 1;\r\n } else if (companyA < companyB) {\r\n comparison = -1;\r\n }\r\n return comparison;\r\n}\r\n\r\nclass SearchBar extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n value: '',\r\n searchResult: []\r\n };\r\n\r\n this.onSuggestionSelected = this.onSuggestionSelected.bind(this)\r\n this.onChange = this.onChange.bind(this)\r\n this.callSearchResults = this.callSearchResults.bind(this);\r\n }\r\n\r\n onChange = (e) => {\r\n this.props.crmSearchFailure('')\r\n this.setState({\r\n value: e.target.value\r\n });\r\n };\r\n\r\n callSearchResults(searchText) {\r\n //First call the crm procedure for search data\r\n this.props.fetchCrmResults(searchText)\r\n .then((result) => {\r\n this.props.crmSearchSuccess(result)\r\n if (result.data.Result.length != 0) {\r\n let obj = result.data.Result;\r\n this.props.searchData(obj);\r\n //this.props.history.push(`/searchContainer`)\r\n\r\n //This code filters the output with unique Global ultimate Id (i.e. SAP_TOP_VIEW)\r\n const uniqueObj = [];\r\n const map = new Map();\r\n for (const item of obj) {\r\n if (!map.has(item.SAP_TOP_VIEW)) {\r\n map.set(item.SAP_TOP_VIEW, true); // set any value to Map\r\n uniqueObj.push({ item });\r\n }\r\n }\r\n this.props.searchText(this.state.value)\r\n let sortedArr = uniqueObj.sort(compare);\r\n this.props.searchResult(sortedArr)\r\n this.setState({ searchResult: sortedArr }, this.props.history.push(`/searchContainer`))\r\n } else {\r\n\r\n }\r\n }).catch((error) => {\r\n if (error.response.status == 400) {\r\n this.props.fetchCapIqSearchResults(searchText, 1)\r\n .then((result) => {\r\n this.props.capIqSearchSuccess(result)\r\n this.props.searchText(this.state.value)\r\n this.props.searchResult(result.data.Result)\r\n this.setState({ searchResult: result.data.Result }, this.props.history.push(`/searchContainer`))\r\n }).catch((error) => {\r\n this.props.capIqSearchFailure(error.response.data.Message)\r\n })\r\n } else {\r\n this.props.crmSearchFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n\r\n onSuggestionSelected(event) {\r\n event.preventDefault()\r\n if (this.state.value != null && this.state.value != '' && this.state.value != undefined) {\r\n this.props.searchText(this.state.value)\r\n this.callSearchResults(this.state.value)\r\n } else {\r\n this.props.crmSearchFailure(this.props.content.search.required)\r\n }\r\n //this.props.history.push(`/searchContainer`)\r\n }\r\n\r\n render() {\r\n if ((this.props.search.isLoading)\r\n ) {\r\n return \r\n
\r\n {this.props.ganntTexts.title}{
\r\n {this.props.ganntTexts.tabDesc}
\r\n {this.state.errorMessage}
\r\n {this.state.errorFlag ? :\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n user: state.default,\r\n content: state.content.spendAnalysis.defineScope,\r\n spendDetails: state.spendDetails,\r\n ganntTexts: state.content.ganntChartTab,\r\n currencySymbols: state.content.CurrencySymbols,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getResultSuccess: message => dispatch(getResultSuccess(message)),\r\n getResultFailure: error => dispatch(getResultFailure(error)),\r\n getResultLoading: bool => dispatch(getResultLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n getGanntChartData: (DMC_ID, VS_ID, User_ID) => dispatch(getGanntChartData(DMC_ID, VS_ID, User_ID)),\r\n getGanntChartSuppliersDetails: (data) => dispatch(getGanntChartSuppliersDetails(data))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(GanntChartContainer)\r\n\r\n\r\n","import React from 'react'\r\nimport { store } from 'index'\r\nimport { convertToMillion, formatThousands } from 'utils/Utils'\r\nimport { connect } from 'react-redux'\r\n\r\nclass ExpandableRow extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n {\r\n this.state = {\r\n \r\n }\r\n this.onLoad = this.onLoad.bind(this)\r\n this.handleCollapseChange = this.handleCollapseChange.bind(this)\r\n }\r\n } \r\n\r\n onLoad() {\r\n\t\tconst state = store.getState(), \r\n enablementWaveData = this.props.tabData // state.content.enablementInsight.enablementWaveDetails\r\n\r\n const target = enablementWaveData[0] \r\n \r\n\t\tvar collapsibleElement = document.getElementsByClassName(\"collapsible\");\r\n\r\n let childCount, item, childTarget, content\r\n target.rows.map((data, index) => {\r\n\t\t\tif (data[0].collapseChild !== undefined) {\r\n\t\t\t\tchildCount = data[0].collapseChild.length\r\n\t\t\t\titem = data[0].content\r\n\t\t\t\tlet eleIndex, cntIndex\r\n\t\t\t\tfor (eleIndex = 0; eleIndex < collapsibleElement.length; eleIndex++) {\r\n\t\t\t\t\tvar childItem = collapsibleElement[eleIndex].firstChild.innerText;\r\n\t\t\t\t\tif (childItem.toLowerCase() === item.toLowerCase()) {\r\n\t\t\t\t\t\tfor (cntIndex = 0; cntIndex < childCount; cntIndex++) {\r\n\t\t\t\t\t\t\tif (cntIndex === 0) { content = collapsibleElement[eleIndex].nextSibling; }\r\n\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\tcontent = childTarget.nextSibling;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\tif (content && content.style !== undefined) {\r\n\t\t\t\t\t\t\t\tcontent.style.visibility = 'collapse';\r\n\t\t\t\t\t\t\t\t//content.style.backgroundColor = '#e2e0e040';\r\n\t\t\t\t\t\t\t\tchildTarget = content\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t})\r\n }\r\n \r\n handleCollapseChange(e) {\r\n\t\tif (e.target.className === 'tableContent') {\r\n\t\t\te.currentTarget.classList.toggle(\"active\");\r\n\t\t\tvar target = e.currentTarget;\r\n\t\t\tif (this.props.content[0].collapseChild !== undefined) {\r\n\t\t\t\tthis.props.content[0].collapseChild.map(() => {\r\n\t\t\t\t\tvar content = target.nextSibling;\r\n\t\t\t\t\tif (content && content.style) {\r\n\t\t\t\t\t\tif (content.style.visibility === 'collapse' || content.style.visibility === '') {\r\n\t\t\t\t\t\t\tcontent.style.visibility = 'visible';\r\n\t\t\t\t\t\t\tcontent.style.backgroundColor = '#e2e0e040';\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\tcontent.style.visibility = 'collapse';\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\ttarget = target.nextSibling;\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n { if (option.value === this.state.selectedValue) return (option.label) }\r\n )}\r\n onChange={value => this.handleChange(value)}\r\n />\r\n
\r\n \r\n
}\r\n \r\n this.onDoubleClickGanntChart(e)}\r\n xAxisVal={this.state.selectedValue}\r\n currency={this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency !== undefined && this.props.spendDetails.currentActiveRequest.Currency.trim() !== '' && this.props.spendDetails.currentActiveRequest.Currency.trim() !== \"0\" ? this.props.spendDetails.currentActiveRequest.Currency.trim() : 'USD']}\r\n />\r\n
\r\n {this.props.ganntTexts.note}
\r\n \r\n {/*
\r\n */}\r\n
\r\n \r\n {this.state.isDefault ? this.state.legendList2.map((val, index) => {\r\n return ( )\r\n }) : this.state.legendList1.map((val, index) => {\r\n return ( )\r\n })}\r\n
\r\n {val}
{val}
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n {this.state.supplierData !== undefined && this.state.supplierData !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n this.props.handleWaveDescriptionChange(row)} width=\"15\" />\r\n\t\t\t\t\t\t\t\t\t\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n ui: state.content.ui,\r\n user: state.default,\r\n supplierComments: state.content.spendAnalysis.supplierDrilldown.supplierComments,\r\n spendDetails: state.spendDetails,\r\n content: state.content.enablementInsight.enablementWaveDetails\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n enablementInsightSuccess: message => dispatch(enablementInsightSuccess(message)),\r\n enablementInsightFailure: error => dispatch(enablementInsightFailure(error)),\r\n enablementInsightLoading: bool => dispatch(enablementInsightLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n updateWaveDescription: (data) => dispatch(updateWaveDescription(data))\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(WaveDescriptionPopup)","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n defineScopeLoading,\r\n defineScopeSuccess,\r\n defineScopeFailure,\r\n getGanntChartEnablementWavesLookup\r\n} from 'actions/spendActions'\r\nimport { convertToMillion, formatThousands } from 'utils/Utils'\r\n\r\nclass EnablementMappingKeysTable extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n {\r\n this.state = {\r\n //keeping this data as reference from AV-732 attached excel\r\n tableData: [\r\n { key: 'Enterprise - Supplier Dedicated Specialist', 'Gantt_Chart_Name': 'Enterprise - Integration', 'Aggressive': 8, 'Conservative': 12 },\r\n { key: 'Enterprise - Integration Ready Candidate', 'Gantt_Chart_Name': 'Enterprise - Integration', 'Aggressive': 8, 'Conservative': 12 },\r\n { key: 'Enterprise - Integration Ready & Catalog Candidate', 'Gantt_Chart_Name': 'Enterprise - Integration & Catalog', 'Aggressive': 8, 'Conservative': 12 },\r\n { key: 'Enterprise - Portal', 'Gantt_Chart_Name': 'Enterprise - Portal', 'Aggressive': 6, 'Conservative': 8 },\r\n { key: 'Enterprise Integration Candidate', 'Gantt_Chart_Name': 'Enterprise - Portal', 'Aggressive': 6, 'Conservative': 8 },\r\n { key: 'Enterprise - Integration & Catalog Candidate', 'Gantt_Chart_Name': 'Enterprise - Portal & Catalog', 'Aggressive': 6, 'Conservative': 12 },\r\n { key: 'Enterprise - Portal & Catalog Candidate', 'Gantt_Chart_Name': 'Enterprise - Portal & Catalog', 'Aggressive': 6, 'Conservative': 12 },\r\n { key: 'Managed Standard - Interactive Email', 'Gantt_Chart_Name': 'Managed Standard', 'Aggressive': 6, 'Conservative': 8 },\r\n { key: 'On Going Standard - Interactive Email', 'Gantt_Chart_Name': 'On Going Standard Account', 'Aggressive': 'NA', 'Conservative': 'NA' },\r\n { key: 'Already Transacting', 'Gantt_Chart_Name': 'NA', 'Aggressive': 8, 'Conservative': 12 },\r\n { key: 'Out of Scope - Category Not Eligible', 'Gantt_Chart_Name': 'NA', 'Aggressive': 8, 'Conservative': 12 },\r\n { key: 'Relationship Exists', 'Gantt_Chart_Name': 'NA', 'Aggressive': 8, 'Conservative': 12 },\r\n { key: 'Set up', 'Gantt_Chart_Name': 'NA', 'Aggressive': 6, 'Conservative': 6 }\r\n\r\n ],\r\n tableData2: [],\r\n helpText: [\r\n { key: 'Enterprise - Supplier Dedicated Specialist', txt : 'Suppliers utilizing this enablement type have high transaction volumes with the buyer and typically utilize a catalog-based buy process. With sufficient transaction volumes to maximize efficiency and compliance, the supplier’s systems are integrated with the Ariba Network to exchange procurement documents including purchase orders, advanced ship notices, order confirmations and invoices. They are always Enterprise enabled on the Ariba Network, typically use catalogs and have extensive experience integrating with other buyers.'},\r\n { key: 'Enterprise - Integration Ready Candidate', txt : 'Suppliers utilizing this enablement type have high transaction volumes with the buyer. To maximize efficiency and compliance, their systems are integrated with the Ariba Network to exchange procurement documents including purchase orders, advanced ship notices, order confirmations and invoices. Suppliers have extensive experience integrating with other buyers.'},\r\n { key: 'Enterprise - Integration Ready & Catalog Candidate', txt : 'Suppliers utilizing this enablement type have high transaction volumes with the buyer and utilize a catalog-based buy process. To maximize efficiency and compliance, the supplier’s systems are integrated with the Ariba Network to exchange procurement documents including purchase orders, advanced ship notices, order confirmations and invoices. Suppliers have extensive experience integrating with other buyers.'},\r\n { key: 'Enterprise - Portal', txt : 'Suppliers utilizing this enablement type typically have under 500 documents annually with the buyer and receive and deliver their procurement documents through their SAP Ariba Network online user interface.'},\r\n { key: 'Enterprise - Integration Candidate', txt : 'Suppliers utilizing this enablement type have high transaction volumes with the buyer. To maximize efficiency and compliance, their systems are integrated with the Ariba Network to exchange procurement documents including purchase orders, advanced ship notices, order confirmations and invoices.'},\r\n { key: 'Enterprise - Integration & Catalog Candidate', txt : 'Suppliers utilizing this enablement type have high transaction volumes with the buyer and utilize a catalog-based buy process. To maximize efficiency and compliance, the supplier’s systems are integrated with the Ariba Network to exchange procurement documents including purchase orders, advanced ship notices, order confirmations and invoices.'},\r\n { key: 'Enterprise - Portal & Catalog Candidate', txt : 'Suppliers utilizing this enablement type utilize a catalog-based buy process. The supplier typically has under 500 documents annually with the buyer and receives and delivers their procurement documents through the SAP Ariba Network online user interface..' },\r\n { key: 'Managed Standard - Interactive Email', txt : 'Suppliers utilizing this enablement type typically have <75 documents but can have up to 200 documents annually with the buyer. The supplier sends and receives procurement documents via interactive email and through the SAP Ariba Network online user interface. Enablement of these supplier is managed.'},\r\n { key: 'On Going Standard - Interactive Email', txt : 'Suppliers utilizing this method have low spend and document volume and transactions are sent and received through channels outside of the Ariba Network (fax, email, mail, etc.) initially. These suppliers should be targeted for Standard Enablement once contact information is available.'}\r\n ]\r\n }\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n }\r\n\r\n loadData() {\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsID = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let userEmail = this.props.user.user.Email;\r\n\r\n let inputData = {\r\n DMC_ID: dmcId, VS_ID: vsID, USER_EMAIL: userEmail\r\n }\r\n\r\n this.props.getGanntChartEnablementWavesLookup(dmcId, vsID, userEmail)\r\n .then((response) => {\r\n let data = response.data.Result; \r\n //help text are added to hana db\r\n // let helpTxt = this.state.helpText;\r\n // for(let i = 0; i < helpTxt.length; i++){\r\n // for(let j = 0; j < data.length; j++){\r\n // if(data[j].SAP_SUPPLIER_ENABLE_LOG == helpTxt[i].key){\r\n // data[j].helpTxt = helpTxt[i].txt;\r\n // }\r\n // }\r\n // }\r\n\r\n if (this.props.isPopup) {\r\n data = [];\r\n response.data.Result.forEach(function (v, index) {\r\n delete v.AGGRESSIVE_DURATION;\r\n delete v.CONSERVATIVE_DURATION;\r\n if(v.SAP_SUPPLIER_ENABLE_LOG == '0 spend and 0 document' || v.SAP_SUPPLIER_ENABLE_LOG == 'Setup')\r\n {}\r\n else data.push(v);\r\n });\r\n } \r\n\r\n this.setState({ tableData2: data })\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator', isError: 'Yes' })\r\n }\r\n else {\r\n this.setState({ responseMsg: 'An error has occurred', isError: 'Yes' })\r\n }\r\n })\r\n }\r\n\r\n getBackgroundColor() {\r\n let bgColor = '#808080';\r\n\r\n return bgColor;\r\n }\r\n\r\n render() {\r\n var _this = this;\r\n var rows = this.state.tableData2.map(function (row) {\r\n return (\r\n \r\n
\r\n\r\n \r\n {this.props.content.waveDescriptionHeader}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n {this.props.content.enablementWaveLabel}{\": \"}
\r\n {this.props.data.ENABLEMENT_WAVE}
\r\n \r\n
\r\n \r\n {this.props.content.waveDescriptionText}{\": \"}
\r\n \r\n this.onChange(e)}\r\n id=\"waveDesc\"\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {/*
\r\n
\r\n )\r\n }\r\n}\r\n\r\nclass Rows extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n {\r\n }\r\n\r\n }\r\n\r\n render() {\r\n return (\r\n | {this.props.isPopup ? \"Enablement Recommendation to Onboarding Workstream Mapping Key\" : \"Mapping Key - Groupings and Durations\"} | ||||
|---|---|---|---|---|
| {this.props.content.ewCol1Name} | \r\n{this.props.content.integrationMatchType} | \r\n{this.props.content.ewCol2Name} | \r\n {!this.props.isPopup?\r\n{this.props.content.ewCol3Name} | \r\n :null}\r\n {!this.props.isPopup?\r\n{this.props.content.ewCol4Name} | \r\n :null}\r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n user: state.default,\r\n spendDetails: state.spendDetails,\r\n content: state.content.enablementInsight,\r\n validation: state.content.validation,\r\n currencySymbols: state.content.CurrencySymbols\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n enablementInsightSuccess: message => dispatch(enablementInsightSuccess(message)),\r\n enablementInsightFailure: error => dispatch(enablementInsightFailure(error)),\r\n enablementInsightLoading: bool => dispatch(enablementInsightLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n updateWaveDescription: (data) => dispatch(updateWaveDescription(data))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ExpandableTable)","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport EnablementSupplierDetailsPopup from './EnablementSupplierDetailsPopup'\r\nimport ExpandableTable from './ExpandableTable'\r\nimport EnablementMappingKeysTable from 'components/Spend/EnablementMappingKeysTable'\r\nimport { path } from 'Constants'\r\n\r\n// Settings\r\nimport { changeModalBorderStyle, drilldownModalBorderContentStyle, changeModalBorderRectStyle } from 'Constants'\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nimport {\r\n enablementInsightSuccess,\r\n enablementInsightFailure,\r\n enablementInsightLoading,\r\n resetError,\r\n getEnablementDetailsForGanntChart,\r\n getEnablementFiltersDetails\r\n} from 'actions/spendActions'\r\n\r\nclass EnablementWavesTable extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n enablementWaveData: [],\r\n enablementWaveTotal: [],\r\n enablementWaveJson: [],\r\n enablementTypesJson: [],\r\n enablementTypes: [],\r\n grandTotal: [],\r\n isLoading: true,\r\n responseMsg: '',\r\n inputParam: {\r\n DMC_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.DMC_ID : 0\r\n , VS_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.VS_ID : 0,\r\n User_Email: this.props.spendDetails.currentActiveRequest !== undefined &&\r\n this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester,\r\n dedupStats: 'Unique',\r\n enabledCustomer: 'all',\r\n transactingCustomer: 'all',\r\n buyerRegion: 'all',\r\n businessUnit: 'all',\r\n erpSystem: 'all',\r\n l4IndustryName: 'all',\r\n erpCode: 'all',\r\n erpDesc: 'all',\r\n sicCode: 'all',\r\n sicDesc: 'all',\r\n\r\n goods: 'all',\r\n invoiceCountry: 'all',\r\n legalInvoice: 'all',\r\n aribaNwEligible: 'all',\r\n column1Name: 'SAP_ARIBA_BUY_ENABLE_MTHD_RECMD',\r\n column1Value: '',\r\n tableName: '',\r\n valuesUpdated: false,\r\n metricsType: 'Invoice Spend',\r\n directSpend: 'all'\r\n\r\n },\r\n }\r\n this.showEnablementSupplierDetailsModal = this.showEnablementSupplierDetailsModal.bind(this)\r\n this.setVisibility = this.setVisibility.bind(this)\r\n this.outsidePopupClick = this.outsidePopupClick.bind(this)\r\n this.onSave = this.onSave.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n //this.convertResponseToJson()\r\n this.GetEnablementDetails(this.state.inputParam)\r\n }\r\n\r\n showEnablementSupplierDetailsModal(tableName, columnName, columnValue, columnName2, columnValue2) {\r\n\r\n var inputParameter = this.state.inputParam\r\n inputParameter.tableName = tableName\r\n inputParameter.column1Name = columnName\r\n inputParameter.column1Value = columnValue\r\n\r\n inputParameter.column2Name = columnName2\r\n inputParameter.column2Value = columnValue2\r\n\r\n this.setState({ openPopup: true, inputParam: inputParameter })\r\n }\r\n\r\n onSave(value) {\r\n this.setState({ valuesUpdated: value })\r\n }\r\n\r\n setVisibility(isVisible) {\r\n this.handlePoupClose()\r\n }\r\n\r\n outsidePopupClick() {\r\n this.handlePoupClose()\r\n }\r\n\r\n handlePoupClose() {\r\n this.setState({ open: false, openPopup: false }, () => {\r\n if (this.state.valuesUpdated) {\r\n this.setState({ valuesUpdated: false }, this.GetEnablementDetails(this.state.inputParam))\r\n }\r\n })\r\n }\r\n\r\n showAdvanceFilter() {\r\n var advanceFilterDiv = document.getElementById('advanceFilter').style;\r\n if (advanceFilterDiv.display === \"none\") {\r\n advanceFilterDiv.display = \"block\";\r\n } else {\r\n advanceFilterDiv.display = \"none\";\r\n }\r\n }\r\n\r\n GetEnablementDetails(inputParam) {\r\n\r\n this.props.getEnablementDetailsForGanntChart(inputParam)\r\n .then((response) => {\r\n if (response !== undefined && response.status === 200 && response.data.Result !== undefined) {\r\n //\tsetTimeout(() => { this.props.defineScopeSuccess('') }, 2000)\r\n var enablementWaveData; var enablementWaveTotal;\r\n var enablementTypeData; var enablementTypeTotal;\r\n var enablementWaveANIDsData; var headerLevelGrandTotal;\r\n\r\n var tables = response.data.Result.map(\r\n function (table) {\r\n if (table['ENABLEMENT_WAVE'] !== undefined) {\r\n\r\n enablementWaveData = table['ENABLEMENT_WAVE']\r\n enablementWaveTotal = table['GrandTotal']\r\n }\r\n\r\n if (table['SAP_ARIBA_BUY_ENABLE_MTHD_RECMD'] !== undefined) {\r\n enablementTypeData = table['SAP_ARIBA_BUY_ENABLE_MTHD_RECMD']\r\n enablementTypeTotal = table['GrandTotal']\r\n }\r\n\r\n if (table['ENABLEMENT_WAVE_ANIDs'] !== undefined) {\r\n enablementWaveANIDsData = table['ENABLEMENT_WAVE_ANIDs']\r\n headerLevelGrandTotal = table['GrandTotal']\r\n }\r\n }\r\n )\r\n\r\n const enablementWaveDataTemp = this.convertResponseToJson(enablementWaveData, enablementWaveANIDsData)\r\n // const enablementWaveTotalTemp = this.convertResponseToJson(enablementWaveTotal)\r\n //const enablementTypeDataTemp = this.convertResponseToJson(enablementTypeData)\r\n // const enablementTypeTotalTemp = this.convertResponseToJson(enablementTypeTotal)\r\n\r\n this.setState({\r\n enablementWaveJson: enablementWaveDataTemp, enablementWaveTotal: headerLevelGrandTotal,\r\n enablementTypesJson: enablementTypeData, grandTotal: enablementTypeTotal, isLoading: false\r\n });\r\n\r\n this.props.enablementInsightSuccess(true)\r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator', isError: 'Yes' })\r\n this.props.enablementInsightFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.setState({ responseMsg: 'An error has occurred', isError: 'Yes' })\r\n this.props.enablementInsightFailure(this.props.content.error)\r\n }\r\n })\r\n }\r\n\r\n convertResponseToJson(enablementData, aggregatedData) {\r\n let data = []\r\n let total = []\r\n let waveToItem = []\r\n //const enablementWaveData = this.state.enablementWaveData\r\n enablementData.forEach(item => {\r\n let datum = {\r\n ENABLEMENT_WAVE: item.ENABLEMENT_WAVE,\r\n GANTT_CHART_WORKSTREAM_NAME: item.GANTT_CHART_WORKSTREAM_NAME,\r\n CNT_VENDOR_NAME: isNaN(item.CNT_VENDOR_NAME) ? 0 : item.CNT_VENDOR_NAME,\r\n CNT_VENDOR_PER: isNaN(item.CNT_VENDOR_PER) ? 0 : Number.parseFloat(item.CNT_VENDOR_PER),\r\n CNT_UNIQ_VENDOR_AN_ID: isNaN(item.CNT_UNIQ_VENDOR_AN_ID) ? 0 : Number.parseFloat(item.CNT_UNIQ_VENDOR_AN_ID),\r\n SUM_AGGR_SPEND: isNaN(item.SUM_AGGR_SPEND) ? 0 : item.SUM_AGGR_SPEND,\r\n SUM_AGGR_SPEND_PER: isNaN(item.SUM_AGGR_SPEND_PER) ? 0 : Number.parseFloat(item.SUM_AGGR_SPEND_PER),\r\n\r\n SUM_SAP_ARIBA_DOC_PROXY: isNaN(item.SUM_SAP_ARIBA_DOC_PROXY) ? 0 : item.SUM_SAP_ARIBA_DOC_PROXY,\r\n SAP_ARIBA_DOC_PROXY_PER: isNaN(item.SAP_ARIBA_DOC_PROXY_PER) ? 0 : Number.parseFloat(item.SAP_ARIBA_DOC_PROXY_PER)\r\n }\r\n\r\n data.push(datum)\r\n\r\n let datumCopy = { ...datum }\r\n let datumCopy1 = { ...datum }\r\n\r\n if (item.ENABLEMENT_WAVE in total) {\r\n waveToItem[item.ENABLEMENT_WAVE].push(datumCopy1)\r\n\r\n let partialTotal = total[item.ENABLEMENT_WAVE]\r\n partialTotal.CNT_VENDOR_NAME = 0\r\n partialTotal.CNT_VENDOR_PER = 0\r\n partialTotal.CNT_UNIQ_VENDOR_AN_ID = 0\r\n partialTotal.SUM_AGGR_SPEND = 0\r\n partialTotal.SUM_AGGR_SPEND_PER = 0\r\n\r\n partialTotal.SUM_AGGR_PO_SPEND = 0\r\n partialTotal.SUM_AGGR_PO_SPEND_PER = 0\r\n\r\n partialTotal.SUM_SAP_ARIBA_DOC_PROXY = 0\r\n partialTotal.SAP_ARIBA_DOC_PROXY_PER = 0\r\n\r\n } else {\r\n\r\n total[item.ENABLEMENT_WAVE] = datumCopy\r\n waveToItem[item.ENABLEMENT_WAVE] = [datumCopy1]\r\n }\r\n })\r\n\r\n let enablementWaveDetails = {\r\n rows: []\r\n }\r\n\r\n\r\n for (const [key, value] of Object.entries(waveToItem)) {\r\n let collapseChild = []\r\n let idx = 0\r\n value.forEach((item, index) => {\r\n collapseChild.push({ childContentId: index, content: item.GANTT_CHART_WORKSTREAM_NAME, enablementWave: key, data: item, expand: false })\r\n })\r\n\r\n enablementWaveDetails.rows.push({\r\n \"content\": key,\r\n \"contentId\": idx++,\r\n \"data\": aggregatedData.filter(item => item.ENABLEMENT_WAVE === key)[0],\r\n expand: false,\r\n collapseChild: collapseChild\r\n });\r\n }\r\n\r\n /*waveToItem.map(function(item, index) { \r\n enablementWaveDetails.rows.push({ \r\n \"content\" : item.ENABLEMENT_WAVE,\r\n \"contentId\" : index,\r\n \"data\": item,\r\n collapseChild : {\r\n \"childContentId\": index\r\n }\r\n \r\n \r\n });\r\n })*/\r\n\r\n return enablementWaveDetails\r\n //this.setState({ enablementWaveJson: enablementWaveDetails})\r\n //console.log(\"jsonData\", enablementWaveDetails)\r\n }\r\n\r\n componentWillReceiveProps(nextProps, nextState) {\r\n if (this.state.Test !== nextProps.filterData && 'dedupStats' in nextProps.filterData) {\r\n var inputParameter = this.state.inputParam\r\n inputParameter.dedupStats = nextProps.filterData.dedupStats\r\n inputParameter.enabledCustomer = nextProps.filterData.enabledCustomer\r\n inputParameter.transactingCustomer = nextProps.filterData.transactingCustomer\r\n inputParameter.buyerRegion = nextProps.filterData.buyerRegion\r\n inputParameter.businessUnit = nextProps.filterData.businessUnit\r\n inputParameter.erpSystem = nextProps.filterData.erpSystem\r\n inputParameter.l4IndustryName = nextProps.filterData.l4IndustryName\r\n inputParameter.erpCode = nextProps.filterData.erpCode\r\n inputParameter.erpDesc = nextProps.filterData.erpDesc\r\n inputParameter.sicCode = nextProps.filterData.sicCode\r\n inputParameter.sicDesc = nextProps.filterData.sicDesc\r\n inputParameter.goods = nextProps.filterData.goods\r\n inputParameter.invoiceCountry = nextProps.filterData.invoiceCountry\r\n inputParameter.legalInvoice = nextProps.filterData.legalInvoice\r\n inputParameter.aribaNwEligible = nextProps.filterData.aribaNwEligible\r\n inputParameter.metricsType = nextProps.filterData.metricsType\r\n inputParameter.directSpend = nextProps.filterData.directSpend\r\n\r\n this.GetEnablementDetails(inputParameter)\r\n this.setState({ Test: nextProps.filterData, inputParam: Object.keys(nextProps.filterData).length !== 0 ? nextProps.filterData : this.state.inputParam })\r\n //console.log(\"if enablemtn details filetr props-\")\r\n }\r\n else {\r\n // console.log(\"else enablemtn details filetr props-\")\r\n }\r\n\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.state.showEnablementRecWarning && this.props.tableName == this.props.content.enablementWaveDetails.enablementRecommendationHeader ?\r\n \r\n {/*
\r\n
\r\n\r\n \r\n When \"Candidate\" Enablement Recommendations are present the system assigns the Onboarding Workstream using the following matrix. Users executing supplier enablement should manually assign the proper Onboarding Workstream for each supplier in collaboration with the buyer.\r\n
\r\n : null }\r\n | \r\n {this.props.tableName} | \r\n||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {this.props.content.onboardingWorkstreamDetails.firstColumnName} | \r\n :{this.state.columnDetails.firstColumnName} | \r\n }\r\n {\r\n this.props.tabName === this.props.content.onboardingWSTabName ?\r\n{this.props.content.onboardingWorkstreamDetails.waveDescription} | :\r\n this.props.tabName === this.props.content.enablementRecomTabName ?\r\n{this.props.content.enablementRecommSecColHeader} | :\r\n this.props.tabName === this.props.content.enablementRecomTabName ?\r\n{this.props.content.enablementRecommSecColHeader} | :\r\n this.props.tabName === this.props.content.enablementTabName && !this.props.fromGanntChart ?\r\n{this.props.content.waveDescription} | \r\n : null}\r\n\r\n{this.props.content.supplierColumn} | \r\n{this.props.content.supplierPerColumn} | \r\n \r\n \r\n { this.props.tableName === this.props.content.networkMatch.catalogMatchHeader || this.props.tableName === this.props.content.networkMatch.integrationMatchHeader ?\r\n{this.props.content.uniqueANIDsColumn} | \r\n : null\r\n }\r\n \r\n\r\n {this.props.metricsType === \"Invoice & PO\" || this.props.fromGanntChart ?\r\n{this.props.content.invoicePoSpendColumn} | \r\n : this.props.metricsType === \"Invoice Only\" ?\r\n{this.props.content.spendColumn} | \r\n : this.props.metricsType === \"PO Only\" ?{this.props.content.poSpendColumn} | \r\n :{this.props.content.spendProxyColumn} | \r\n }\r\n\r\n {this.props.metricsType === \"Invoice & PO\" || this.props.fromGanntChart ?\r\n{this.props.content.invoicePoSpendPerColumn} | \r\n : this.props.metricsType === \"Invoice Only\" ?\r\n{this.props.content.spendPerColumn} | \r\n : this.props.metricsType === \"PO Only\" ?{this.props.content.poSpendPerColumn} | \r\n :{this.props.content.spendProxyPerColumn} | \r\n }\r\n\r\n {this.props.metricsType === \"Invoice & PO\" && (this.props.tabName === this.props.content.onboardingWSTabName || this.props.tabName === this.props.content.enablementRecomTabName || this.props.tabName === this.props.content.enablementTabName || this.props.tableName === this.props.content.networkMatch.integrationMatchHeader || this.props.tableName === this.props.content.networkMatch.catalogMatchHeader) ?\r\n{this.props.content.onboardingWorkstreamDetails.invoicePoDocumentColumn} | \r\n :this.props.metricsType === \"Invoice Only\" && (this.props.tabName === this.props.content.onboardingWSTabName || this.props.tabName === this.props.content.enablementRecomTabName || this.props.tabName === this.props.content.enablementTabName || this.props.tableName === this.props.content.networkMatch.integrationMatchHeader || this.props.tableName === this.props.content.networkMatch.catalogMatchHeader) ?\r\n{this.props.content.onboardingWorkstreamDetails.invoiceDocumentColumn} | \r\n : this.props.metricsType === \"Invoice & PO\" || this.props.fromGanntChart ?\r\n{this.props.content.invoiceDocumentColumn} | \r\n : this.props.metricsType === \"PO Only\" ?\r\n{this.props.content.poDocumentColumn} | \r\n : this.props.metricsType === \"Spend & Document Proxies\" && (this.props.tabName === this.props.content.onboardingWSTabName || this.props.tabName === this.props.content.enablementRecomTabName || this.props.tabName === this.props.content.enablementTabName || this.props.tableName === this.props.content.networkMatch.integrationMatchHeader || this.props.tableName === this.props.content.networkMatch.catalogMatchHeader) ?\r\n{this.props.content.onboardingWorkstreamDetails.documentColumn} | \r\n :{this.props.content.documentColumn} | \r\n }\r\n\r\n {this.props.metricsType === \"Invoice & PO\" && (this.props.tabName === this.props.content.onboardingWSTabName || this.props.tabName === this.props.content.enablementRecomTabName || this.props.tabName === this.props.content.enablementTabName || this.props.tableName === this.props.content.networkMatch.integrationMatchHeader || this.props.tableName === this.props.content.networkMatch.catalogMatchHeader) ?\r\n{this.props.content.onboardingWorkstreamDetails.invoicePoDocumentPerColumn} | \r\n :this.props.metricsType === \"Invoice Only\" && (this.props.tabName === this.props.content.onboardingWSTabName || this.props.tabName === this.props.content.enablementRecomTabName || this.props.tabName === this.props.content.enablementTabName || this.props.tableName === this.props.content.networkMatch.integrationMatchHeader || this.props.tableName === this.props.content.networkMatch.catalogMatchHeader) ?\r\n{this.props.content.onboardingWorkstreamDetails.invoiceDocumentPerColumn} | \r\n :this.props.metricsType === \"Spend & Document Proxies\" && (this.props.tabName === this.props.content.onboardingWSTabName || this.props.tabName === this.props.content.enablementRecomTabName || this.props.tabName === this.props.content.enablementTabName || this.props.tableName === this.props.content.networkMatch.integrationMatchHeader || this.props.tableName === this.props.content.networkMatch.catalogMatchHeader) ?\r\n{this.props.content.onboardingWorkstreamDetails.documentPerColumn} | \r\n :this.props.metricsType === \"Invoice Only\" || this.props.fromGanntChart ?\r\n{this.props.content.invoiceDocumentPerColumn} | \r\n : this.props.metricsType === \"PO Only\" ?\r\n{this.props.content.poDocumentPerColumn} | \r\n :{this.props.content.documentPerColumn} | \r\n }\r\n\r\n
| {this.props.content.grandTotal} | \r\n {\r\n (this.props.tabName === this.props.content.enablementTabName && !this.props.fromGanntChart)\r\n || this.props.tabName === this.props.content.onboardingWSTabName\r\n || this.props.tabName === this.props.content.enablementRecomTabName\r\n ?: null\r\n }\r\n | {this.props.grandTotal && this.props.grandTotal[0] !== undefined ? formatThousands(this.props.grandTotal[0].TOTAL_VENDOR_CNT) : null} | \r\n{this.props.grandTotal && this.props.grandTotal[0] !== undefined ? this.props.grandTotal[0].VENDOR_PER + \"%\" : null} | \r\n\r\n { this.props.tableName === this.props.content.networkMatch.catalogMatchHeader || this.props.tableName === this.props.content.networkMatch.integrationMatchHeader ?\r\n{this.props.grandTotal && this.props.grandTotal[0] !== undefined ? formatThousands(this.props.grandTotal[0].TOTAL_UNIQUE_VENDOR_AN_ID) : null} | \r\n : null\r\n }\r\n \r\n\r\n\r\n{this.props.grandTotal && this.props.grandTotal[0] !== undefined ? this.state.currencySymbol + convertToMillion(this.props.grandTotal[0].TOTAL_AGGR_SPEND, true) : null} | \r\n{this.props.grandTotal && this.props.grandTotal[0] !== undefined ? this.props.grandTotal[0].AGGR_SPEND_PER + \"%\" : null} | \r\n\r\n\r\n{this.props.grandTotal && this.props.grandTotal[0] !== undefined ? formatThousands(this.props.grandTotal[0].TOTAL_DOC_PROXY) : null} | \r\n{this.props.grandTotal && this.props.grandTotal[0] !== undefined ? this.props.grandTotal[0].DOC_PROXY_PER + \"%\" : null} | \r\n\r\n
\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n X
\r\n \r\n \r\n
\r\n \r\n\r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n content: state.content.enablementInsight,\r\n //content: state.content.subLeverCalculations,\r\n ui: state.content.ui,\r\n currency: decodeURIComponent(state.valueStory.Currency),\r\n userData: state.valueStory,\r\n spendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n benchMarkCalculations: state.benchMarksData,\r\n allContent: state.content,\r\n language: state.language,\r\n spendDetails: state.spendDetails,\r\n user: state.default,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n enablementInsightSuccess: message => dispatch(enablementInsightSuccess(message)),\r\n enablementInsightFailure: error => dispatch(enablementInsightFailure(error)),\r\n enablementInsightLoading: bool => dispatch(enablementInsightLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n getEnablementDetailsForGanntChart: (data) => dispatch(getEnablementDetailsForGanntChart(data)),\r\n getEnablementFiltersDetails: (data) => dispatch(getEnablementFiltersDetails(data))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EnablementWavesTable)\r\n\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n getKPISetUpLoadData,\r\n getKPIDashBoardLoadData,\r\n updateKPISetUpTabData,\r\n updateKPIDashBoardTabData,\r\n trackKpiBenchMarkFilters\r\n} from 'actions/kpiActions'\r\nimport {\r\n resetError,\r\n defineScopeLoading, \r\n pendingChanges, \r\n} from 'actions/spendActions'\r\nimport Select from 'react-select'\r\nimport { round, roundFix, formatThousands, addCurrencyMask, convertToNumber, convertToMillion, onChangeRemoveMask } from 'utils/Utils'\r\nimport reactSelectCjsDev from 'react-select/dist/react-select.cjs.dev';\r\nimport { path, routes, modalStyle, modalContentStyle, changeModalBorderStyle, changeModalBorderRectStyle, drilldownModalBorderContentStyle,kpiRowCustomOrder, kpiFormatRowWithThousandMillion } from 'Constants'\r\nimport Modal from 'reboron/OutlineModal'\r\nimport classNames from \"classnames\";\r\nimport Button from 'UI/ButtonWithoutLoader'\r\nimport Popup from \"reactjs-popup\";\r\nimport MaskedInput from 'react-text-mask'\r\nimport createNumberMask from 'text-mask-addons/dist/createNumberMask'\r\nimport DateEditor from 'UI/DateEditor'\r\nimport CalendarDatePicker from 'UI/CalendarDatePicker'\r\n\r\nimport DatePicker from 'react-datepicker';\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport moment from 'moment'\r\n\r\nclass KPIContainer extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n headers: ['KPI', 'Total', 'Eligible for Onboarding', 'Benchmark (%) Recommended', 'Benchmark (%) Adjusted', '', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'],\r\n headers2: ['KPI', 'Total', 'Eligible for Onboarding', 'Benchmark (%) Recommended', 'Benchmark (%) Adjusted', '', 'Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8', 'Q9', 'Q10', 'Q11', 'Q12'],\r\n //quaterly data may be added revisit logic \r\n colGroupYearly: [{ key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 2, value: 'Year1' }, { key: 2, value: 'Year2' }, { key: 2, value: 'Year3' }],\r\n //below data is dummy data used for poc\r\n rowData: [\r\n { kpi: 'PO Count via Business Network', spend: '', efo: 1000000, BR1: 86.08, BR2: 0, BA1: 86.08, BA2: 0, HR: 'hr', H11: 25, H12: 0, H13: 0, H14: 0, H21: 25, H22: 0, H23: 0, H24: 0, H31: 20, H32: 0, H33: 0, H34: 0, H41: 20, H42: 0, H43: 0, H44: 0, H51: 5, H52: 0, H53: 0, H54: 0, H61: 5, H62: 0, H63: 0, H64: 0, HQ11: 12.50, HQ12: 0, HQ13: 0, HQ14: 0, HQ21: 12.50, HQ22: 0, HQ23: 0, HQ24: 0, HQ31: 12.50, HQ32: 0, HQ33: 0, HQ34: 0, HQ41: 12.50, HQ42: 0, HQ43: 0, HQ44: 0, HQ51: 10, HQ52: 0, HQ53: 0, HQ54: 0, HQ61: 10, HQ62: 0, HQ63: 0, HQ64: 0, HQ71: 10, HQ72: 0, HQ73: 0, HQ74: 0, HQ81: 10, HQ82: 0, HQ83: 0, HQ84: 0, HQ91: 2.50, HQ92: 0, HQ93: 0, HQ94: 0, HQ101: 2.50, HQ102: 0, HQ103: 0, HQ104: 0, HQ111: 2.50, HQ112: 0, HQ113: 0, HQ114: 0, HQ121: 2.50, HQ122: 0, HQ123: 0, HQ124: 0 },\r\n { kpi: 'PO Spend on Business Network', spend: '', efo: 1000000, BR1: 86.08, BR2: 0, BA1: 86.08, BA2: 0, HR: 'hr', H11: 25, H12: 0, H13: 0, H14: 0, H21: 25, H22: 0, H23: 0, H24: 0, H31: 20, H32: 0, H33: 0, H34: 0, H41: 20, H42: 0, H43: 0, H44: 0, H51: 5, H52: 0, H53: 0, H54: 0, H61: 5, H62: 0, H63: 0, H64: 0, HQ11: 12.50, HQ12: 0, HQ13: 0, HQ14: 0, HQ21: 12.50, HQ22: 0, HQ23: 0, HQ24: 0, HQ31: 12.50, HQ32: 0, HQ33: 0, HQ34: 0, HQ41: 12.50, HQ42: 0, HQ43: 0, HQ44: 0, HQ51: 10, HQ52: 0, HQ53: 0, HQ54: 0, HQ61: 10, HQ62: 0, HQ63: 0, HQ64: 0, HQ71: 10, HQ72: 0, HQ73: 0, HQ74: 0, HQ81: 10, HQ82: 0, HQ83: 0, HQ84: 0, HQ91: 2.50, HQ92: 0, HQ93: 0, HQ94: 0, HQ101: 2.50, HQ102: 0, HQ103: 0, HQ104: 0, HQ111: 2.50, HQ112: 0, HQ113: 0, HQ114: 0, HQ121: 2.50, HQ122: 0, HQ123: 0, HQ124: 0 },\r\n { kpi: 'Invoice Count via Business Network', spend: '', efo: 1000000, BR1: 86.08, BR2: 0, BA1: 86.08, BA2: 0, HR: 'hr', H11: 25, H12: 0, H13: 0, H14: 0, H21: 25, H22: 0, H23: 0, H24: 0, H31: 20, H32: 0, H33: 0, H34: 0, H41: 20, H42: 0, H43: 0, H44: 0, H51: 5, H52: 0, H53: 0, H54: 0, H61: 5, H62: 0, H63: 0, H64: 0, HQ11: 12.50, HQ12: 0, HQ13: 0, HQ14: 0, HQ21: 12.50, HQ22: 0, HQ23: 0, HQ24: 0, HQ31: 12.50, HQ32: 0, HQ33: 0, HQ34: 0, HQ41: 12.50, HQ42: 0, HQ43: 0, HQ44: 0, HQ51: 10, HQ52: 0, HQ53: 0, HQ54: 0, HQ61: 10, HQ62: 0, HQ63: 0, HQ64: 0, HQ71: 10, HQ72: 0, HQ73: 0, HQ74: 0, HQ81: 10, HQ82: 0, HQ83: 0, HQ84: 0, HQ91: 2.50, HQ92: 0, HQ93: 0, HQ94: 0, HQ101: 2.50, HQ102: 0, HQ103: 0, HQ104: 0, HQ111: 2.50, HQ112: 0, HQ113: 0, HQ114: 0, HQ121: 2.50, HQ122: 0, HQ123: 0, HQ124: 0 },\r\n { kpi: 'Invoice Spend on Business Network', spend: '', efo: 1000000, BR1: 86.08, BR2: 0, BA1: 86.08, BA2: 0, HR: 'hr', H11: 25, H12: 0, H13: 0, H14: 0, H21: 25, H22: 0, H23: 0, H24: 0, H31: 20, H32: 0, H33: 0, H34: 0, H41: 20, H42: 0, H43: 0, H44: 0, H51: 5, H52: 0, H53: 0, H54: 0, H61: 5, H62: 0, H63: 0, H64: 0, HQ11: 12.50, HQ12: 0, HQ13: 0, HQ14: 0, HQ21: 12.50, HQ22: 0, HQ23: 0, HQ24: 0, HQ31: 12.50, HQ32: 0, HQ33: 0, HQ34: 0, HQ41: 12.50, HQ42: 0, HQ43: 0, HQ44: 0, HQ51: 10, HQ52: 0, HQ53: 0, HQ54: 0, HQ61: 10, HQ62: 0, HQ63: 0, HQ64: 0, HQ71: 10, HQ72: 0, HQ73: 0, HQ74: 0, HQ81: 10, HQ82: 0, HQ83: 0, HQ84: 0, HQ91: 2.50, HQ92: 0, HQ93: 0, HQ94: 0, HQ101: 2.50, HQ102: 0, HQ103: 0, HQ104: 0, HQ111: 2.50, HQ112: 0, HQ113: 0, HQ114: 0, HQ121: 2.50, HQ122: 0, HQ123: 0, HQ124: 0 },\r\n { kpi: 'Supplier Transact in Business Network', spend: '', efo: 1000000, BR1: 86.08, BR2: 0, BA1: 86.08, BA2: 0, HR: 'hr', H11: 10, H12: 0, H13: 0, H14: 0, H21: 10, H22: 0, H23: 0, H24: 0, H31: 10, H32: 0, H33: 0, H34: 0, H41: 10, H42: 0, H43: 0, H44: 0, H51: 10, H52: 0, H53: 0, H54: 0, H61: 10, H62: 0, H63: 0, H64: 0, HQ11: 12.50, HQ12: 0, HQ13: 0, HQ14: 0, HQ21: 12.50, HQ22: 0, HQ23: 0, HQ24: 0, HQ31: 12.50, HQ32: 0, HQ33: 0, HQ34: 0, HQ41: 12.50, HQ42: 0, HQ43: 0, HQ44: 0, HQ51: 10, HQ52: 0, HQ53: 0, HQ54: 0, HQ61: 10, HQ62: 0, HQ63: 0, HQ64: 0, HQ71: 10, HQ72: 0, HQ73: 0, HQ74: 0, HQ81: 10, HQ82: 0, HQ83: 0, HQ84: 0, HQ91: 2.50, HQ92: 0, HQ93: 0, HQ94: 0, HQ101: 2.50, HQ102: 0, HQ103: 0, HQ104: 0, HQ111: 2.50, HQ112: 0, HQ113: 0, HQ114: 0, HQ121: 2.50, HQ122: 0, HQ123: 0, HQ124: 0 }\r\n ],\r\n spanValues: [\r\n { value: 'Half', label: 'Half' },\r\n { value: 'Quarter', label: 'Quarter' }\r\n ],\r\n selectedSpanValue: 'Quarter',\r\n spData: [],\r\n tableData: [],\r\n isLoading: false,\r\n benchmarkPercentileValues: [\r\n { value: 'Top 25%', label: 'Top 25%' },\r\n { value: 'Average 50%', label: 'Average 50%' },\r\n { value: 'Bottom 25%', label: 'Bottom 25%' }\r\n ],\r\n selectedBPValue: 'Average 50%',\r\n metricValues: [],\r\n selectedMetricValue: 'ALL',\r\n metricFilteredData: [],\r\n isSaveInProgress: false,\r\n selectedBPFlag: 'AVERAGE',\r\n metricID_Edited: [],\r\n keyBPSelected: 'AVG_BENCHMARK_ADJUS',\r\n dataLoaded: false,\r\n startdate: null,\r\n goLiveDate: null,\r\n kpiBenchMarkFilters: {metric: 'ALL', type: 'AVERAGE'}\r\n }\r\n this.spendChange = this.spendChange.bind(this);\r\n this.calcBenchMarkSpend = this.calcBenchMarkSpend.bind(this);\r\n this.benchMarkAdjusted = this.benchMarkAdjusted.bind(this);\r\n this.hPercentChanged = this.hPercentChanged.bind(this);\r\n this.handleSpanChange = this.handleSpanChange.bind(this);\r\n this.hQPercentChanged = this.hQPercentChanged.bind(this);\r\n this.calcBenchMarkSpendForQuater = this.calcBenchMarkSpendForQuater.bind(this);\r\n this.loadData = this.loadData.bind(this);\r\n this.handleBPChange = this.handleBPChange.bind(this);\r\n this.handleMetricChange = this.handleMetricChange.bind(this);\r\n this.onSave = this.onSave.bind(this);\r\n this.handleResetTable = this.handleResetTable.bind(this);\r\n this.setStartDate = this.setStartDate.bind(this);\r\n this.setGoLiveDate = this.setGoLiveDate.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.props.trackKpiBenchMarkFilters(this.state.kpiBenchMarkFilters)\r\n this.loadData()\r\n this.setState({ currencySymbol: this.props.spendDetails.currentActiveRequest !== undefined ? this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()] : '' })\r\n }\r\n\r\n\r\n setStartDate(date) {\r\n this.props.pendingChanges(true)\r\n this.setState({ startdate: date, isSaveInProgress: true, responseMsg: \"Pending changes. Click save to update KPIs.\", })\r\n }\r\n\r\n setGoLiveDate(date) {\r\n this.props.pendingChanges(true)\r\n this.setState({ goLiveDate: date, isSaveInProgress: true, responseMsg: \"Pending changes. Click save to update KPIs.\", })\r\n }\r\n\r\n handleResetTable() {\r\n this.setState({ responseMsg: '' })\r\n this.loadData()\r\n }\r\n\r\n loadData() {\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let user = this.props.user.user.Email;\r\n this.props.defineScopeLoading(true)\r\n this.setState({ isLoading: true })\r\n this.props.getKPISetUpLoadData(dmcId, vsId, user)\r\n .then((response) => {\r\n if (response.data.Result.length > 0) {\r\n let spData = response.data.Result;\r\n let unique = spData.filter(item => item.BENCHMARK_METRICS == this.state.selectedMetricValue)\r\n //https://stackoverflow.com/questions/15125920/how-to-get-distinct-values-from-an-array-of-objects-in-javascript\r\n // let unique = [...new Map(temp.map(item =>\r\n // [item['METRIC_ID'], item])).values()];\r\n\r\n let uniqueMetrics = [...new Set(spData.map(item => item.BENCHMARK_METRICS))];\r\n let metricValues = [];\r\n for (let i = 0; i < uniqueMetrics.length; i++) {\r\n let obj = {}\r\n obj.label = uniqueMetrics[i]\r\n obj.value = uniqueMetrics[i]\r\n\r\n metricValues.push(obj)\r\n }\r\n\r\n let tableData = this.createTableData(unique, this.state.selectedBPValue)\r\n\r\n let data = tableData;\r\n for (let i = 0; i < data.length; i++) {\r\n this.state.selectedSpanValue == 'Half' ? this.calcBenchMarkSpend(data[i], i, data) : this.calcBenchMarkSpendForQuater(data[i], i, data)\r\n }\r\n this.props.defineScopeLoading(false)\r\n let goLiveDate = spData[0][\"GO_LIVE_DATE\"] !== null ? new Date(spData[0][\"GO_LIVE_DATE\"]) : null;\r\n let projectStartDate = spData[0][\"PROJECT_START_DATE\"] !== null ? new Date(spData[0][\"PROJECT_START_DATE\"]) : null;\r\n this.setState({ spData: spData, startdate: projectStartDate, goLiveDate: goLiveDate, metricFilteredData: unique, tableData: tableData, metricValues: metricValues, isLoading: false, isSaveInProgress: false, dataLoaded: true })\r\n } else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'No result found. Please try reimporting the file.', isError: 'Yes', isLoading: false })\r\n }\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n }\r\n })\r\n }\r\n\r\n updateKPIDashBoard() { \r\n\r\n let records = []\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let userEmail = this.props.user.user.Email;\r\n \r\n let obj = {}\r\n obj[\"VS_ID\"] = vsId;\r\n obj[\"DMC_ID\"] = dmcId;\r\n obj[\"USER_ID\"] = userEmail;\r\n obj[\"BENCHMARK_METRICS\"] = this.state.selectedMetricValue;\r\n obj[\"BENCHMARK_TYPE\"] = this.state.selectedBPFlag;\r\n obj[\"ACTUAL_FLAG\"] = 1;\r\n records.push(obj)\r\n \r\n this.setState({ isLoading: true, isSaveInProgress: true, responseMsg: '' })\r\n this.props.defineScopeLoading(true)\r\n\r\n this.props.updateKPIDashBoardTabData(records)\r\n .then((response) => {\r\n //this.loadData()\r\n this.setState({ responseMsg: 'Record/s has been updated successfully', isError: 'No', isLoading: false, isSaveInProgress: false, editedRowsIds: [] })\r\n this.props.defineScopeLoading(false)\r\n this.props.pendingChanges(null)\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: this.props.content.error, isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n }\r\n })\r\n }\r\n\r\n\r\n createTableData(data, selectedBPValue) {\r\n let tableData = []\r\n let key = '' //this key is used to map ui metric value with HANA col value\r\n if (selectedBPValue == 'Top 25%') {\r\n key = 'TOP_25'\r\n } else if (selectedBPValue == 'Average 50%') {\r\n key = 'AVERAGE'\r\n } else {\r\n key = 'BOTTOM_25'\r\n }\r\n //filter data to get unique arr with selected metric and industry values\r\n let unique = data.filter(item => item.BENCHMARK_TYPE == key)\r\n\r\n //use kpiArr to further filter data on granular level as HANA data has many duplicate records\r\n let kpiArr = ['Invoice Spend on Business Network', 'Invoice Count via Business Network', 'PO Spend on Business Network', 'PO Count via Business Network', 'Suppliers in Business Network']\r\n for (let i = 0; i < kpiArr.length; i++) {\r\n let temp = unique.filter(item => item.KPI_NAME == kpiArr[i])\r\n let obj = this.createTableDataObject(temp)\r\n tableData.push(obj)\r\n }\r\n //tableData.sort((a, b) => (a.srNo > b.srNo) ? 1 : -1)//sort the table always by sr_no\r\n tableData.sort((a, b) => kpiRowCustomOrder[a.srNo] - kpiRowCustomOrder[b.srNo]);\r\n return tableData;\r\n }\r\n\r\n //this function creates an object for each single row of kpi setup table which is used to construct table data\r\n createTableDataObject(kpiArr) {\r\n let obj = {}\r\n for (let i = 0; i < kpiArr.length; i++) {\r\n obj.METRIC_ID = kpiArr[i]['METRIC_ID']\r\n obj.VS_ID = kpiArr[i]['VS_ID']\r\n obj.DMC_ID = kpiArr[i]['DMC_ID']\r\n obj.kpi = kpiArr[i]['KPI_NAME']\r\n obj.srNo = kpiArr[i]['KPI_SR_NO']\r\n obj.BENCHMARK_METRICS = kpiArr[i]['BENCHMARK_METRICS']\r\n obj.spend = kpiArr[i]['SPEND_DATA_VALUE']\r\n obj.efo = kpiArr[i]['ELIGIBLE_FOR_ONBOARDING']\r\n obj.efo2 = kpiArr[i]['ELIGIBLE_FOR_ONBOARDING'] / 1000000 //adding this for masked input for spend data\r\n obj.BR1 = roundFix(kpiArr[i]['BENCHMARK_RECOMD'], 2)\r\n obj.BR2 = 0\r\n obj.BA1 = roundFix(kpiArr[i]['BENCHMARK_ADJUS'], 2)\r\n obj.BA2 = 0\r\n obj.HR = 'hr'\r\n if (kpiArr[i]['YEAR_NO'] == 1 && kpiArr[i]['QUARTER_NO'] == 'Q1') obj.HQ11 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ12 = 0\r\n obj.HQ13 = 0\r\n obj.HQ14 = 0\r\n if (kpiArr[i]['YEAR_NO'] == 1 && kpiArr[i]['QUARTER_NO'] == 'Q2') obj.HQ21 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ22 = 0\r\n obj.HQ23 = 0\r\n obj.HQ24 = 0\r\n if (kpiArr[i]['YEAR_NO'] == 1 && kpiArr[i]['QUARTER_NO'] == 'Q3') obj.HQ31 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ32 = 0\r\n obj.HQ33 = 0\r\n obj.HQ34 = 0\r\n if (kpiArr[i]['YEAR_NO'] == 1 && kpiArr[i]['QUARTER_NO'] == 'Q4') obj.HQ41 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ42 = 0\r\n obj.HQ43 = 0\r\n obj.HQ44 = 0\r\n if (kpiArr[i]['YEAR_NO'] == 2 && kpiArr[i]['QUARTER_NO'] == 'Q5') obj.HQ51 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ52 = 0\r\n obj.HQ53 = 0\r\n obj.HQ54 = 0\r\n if (kpiArr[i]['YEAR_NO'] == 2 && kpiArr[i]['QUARTER_NO'] == 'Q6') obj.HQ61 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ62 = 0\r\n obj.HQ63 = 0\r\n obj.HQ64 = 0\r\n if (kpiArr[i]['YEAR_NO'] == 2 && kpiArr[i]['QUARTER_NO'] == 'Q7') obj.HQ71 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ72 = 0\r\n obj.HQ73 = 0\r\n obj.HQ74 = 0\r\n if (kpiArr[i]['YEAR_NO'] == 2 && kpiArr[i]['QUARTER_NO'] == 'Q8') obj.HQ81 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ82 = 0\r\n obj.HQ83 = 0\r\n obj.HQ84 = 0\r\n if (kpiArr[i]['YEAR_NO'] == 3 && kpiArr[i]['QUARTER_NO'] == 'Q9') obj.HQ91 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ92 = 0\r\n obj.HQ93 = 0\r\n obj.HQ94 = 0\r\n if (kpiArr[i]['YEAR_NO'] == 3 && kpiArr[i]['QUARTER_NO'] == 'Q10') obj.HQ101 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ102 = 0\r\n obj.HQ103 = 0\r\n obj.HQ104 = 0\r\n if (kpiArr[i]['YEAR_NO'] == 3 && kpiArr[i]['QUARTER_NO'] == 'Q11') obj.HQ111 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ112 = 0\r\n obj.HQ113 = 0\r\n obj.HQ114 = 0\r\n if (kpiArr[i]['YEAR_NO'] == 3 && kpiArr[i]['QUARTER_NO'] == 'Q12') obj.HQ121 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ122 = 0\r\n obj.HQ123 = 0\r\n obj.HQ124 = 0\r\n obj.H11 = Number(obj.HQ11) + Number(obj.HQ21)\r\n obj.H12 = 0\r\n obj.H13 = 0\r\n obj.H14 = 0\r\n obj.H21 = Number(obj.HQ31) + Number(obj.HQ41)\r\n obj.H22 = 0\r\n obj.H23 = 0\r\n obj.H24 = 0\r\n obj.H31 = Number(obj.HQ51) + Number(obj.HQ61)\r\n obj.H32 = 0\r\n obj.H33 = 0\r\n obj.H34 = 0\r\n obj.H41 = Number(obj.HQ71) + Number(obj.HQ81)\r\n obj.H42 = 0\r\n obj.H43 = 0\r\n obj.H44 = 0\r\n obj.H51 = Number(obj.HQ91) + Number(obj.HQ101)\r\n obj.H52 = 0\r\n obj.H53 = 0\r\n obj.H54 = 0\r\n obj.H61 = Number(obj.HQ111) + Number(obj.HQ121)\r\n obj.H62 = 0\r\n obj.H63 = 0\r\n obj.H64 = 0\r\n\r\n\r\n }\r\n\r\n return obj;\r\n }\r\n\r\n hQPercentChanged(element) {\r\n let cellId = element.target.attributes.cellId.nodeValue;\r\n let val = onChangeRemoveMask(element, '%');\r\n let id = element.target.id;\r\n let data = this.state.tableData;\r\n let unique = this.state.metricFilteredData;\r\n let metricID_Edited = this.state.metricID_Edited;\r\n metricID_Edited.push(data[id]['METRIC_ID'])\r\n if (data[id][cellId] != val) {\r\n data[id][cellId] = val;\r\n this.calcBenchMarkSpendForQuater(data[id], id, data)\r\n this.props.pendingChanges(true)\r\n this.setState({ tableData: data, unique: unique, isSaveInProgress: true, responseMsg: \"Pending changes. Click save to update KPIs.\", metricID_Edited: metricID_Edited })\r\n }\r\n }\r\n\r\n handleSpanChange(value) {\r\n let unique = this.state.metricFilteredData;\r\n let data = this.createTableData(unique, this.state.selectedBPValue)\r\n for (let i = 0; i < data.length; i++) {\r\n value.value == 'Half' ? this.calcBenchMarkSpend(data[i], i, data) : this.calcBenchMarkSpendForQuater(data[i], i, data)\r\n }\r\n this.setState({ selectedSpanValue: value.value, tableData: data })\r\n }\r\n\r\n handleBPChange(option) {\r\n let value = option.value;\r\n let unique = this.state.metricFilteredData;\r\n let data = this.createTableData(unique, value)\r\n for (let i = 0; i < data.length; i++) {\r\n this.state.selectedSpanValue == 'Half' ? this.calcBenchMarkSpend(data[i], i, data) : this.calcBenchMarkSpendForQuater(data[i], i, data)\r\n }\r\n let key = ''\r\n let flag = ''\r\n if (value == 'Top 25%') {\r\n key = 'TOP_BENCHMARK_ADJUS'\r\n flag = 'TOP_25'\r\n } else if (value == 'Average 50%') {\r\n key = 'AVG_BENCHMARK_ADJUS'\r\n flag = 'AVERAGE'\r\n } else {\r\n key = 'BOTTOM_BENCHMARK_ADJUS'\r\n flag = 'BOTTOM_25'\r\n }\r\n //track filters\r\n let filter = this.state.kpiBenchMarkFilters;\r\n //filter.type = value;\r\n filter.type = flag;\r\n this.props.trackKpiBenchMarkFilters(filter)\r\n\r\n this.setState({ selectedBPValue: value, tableData: data, selectedBPFlag: flag, keyBPSelected: key, kpiBenchMarkFilters: filter})\r\n }\r\n\r\n handleMetricChange(option) {\r\n let value = option.value;\r\n let spData = this.state.spData;\r\n let unique = spData.filter(item => item.BENCHMARK_METRICS == value)\r\n let data = this.createTableData(unique, this.state.selectedBPValue)\r\n for (let i = 0; i < data.length; i++) {\r\n this.state.selectedSpanValue == 'Half' ? this.calcBenchMarkSpend(data[i], i, data) : this.calcBenchMarkSpendForQuater(data[i], i, data)\r\n }\r\n\r\n //track filters\r\n let filter = this.state.kpiBenchMarkFilters;\r\n filter.metric = value;\r\n this.props.trackKpiBenchMarkFilters(filter)\r\n\r\n this.setState({ selectedMetricValue: value, tableData: data, metricFilteredData: unique, kpiBenchMarkFilters: filter })\r\n }\r\n\r\n hPercentChanged(element) {\r\n let cellId = element.target.attributes.cellId.nodeValue;\r\n let val = Number(element.target.value);\r\n let id = element.target.id;\r\n let data = this.state.tableData;\r\n\r\n data[id][cellId] = val;\r\n this.calcBenchMarkSpend(data[id], id, data)\r\n }\r\n\r\n benchMarkAdjusted(element) {\r\n let val = onChangeRemoveMask(element, '%')\r\n let id = element.target.id;\r\n let data = this.state.tableData;\r\n let unique = this.state.metricFilteredData;\r\n let selectedBPValue = this.state.selectedBPValue\r\n let key = ''\r\n let flag = ''\r\n if (selectedBPValue == 'Top 25%') {\r\n key = 'TOP_BENCHMARK_ADJUS'\r\n flag = 'TOP_25'\r\n } else if (selectedBPValue == 'Average 50%') {\r\n key = 'AVG_BENCHMARK_ADJUS'\r\n flag = 'AVERAGE'\r\n } else {\r\n key = 'BOTTOM_BENCHMARK_ADJUS'\r\n flag = 'BOTTOM_25'\r\n }\r\n\r\n let metricID_Edited = this.state.metricID_Edited;\r\n metricID_Edited.push(data[id]['METRIC_ID'])\r\n\r\n if (data[id]['BA1'] != val) {\r\n data[id]['BA1'] = val;\r\n this.state.selectedSpanValue == 'Half' ? this.calcBenchMarkSpend(data[id], id, data) : this.calcBenchMarkSpendForQuater(data[id], id, data)\r\n this.props.pendingChanges(true)\r\n this.setState({ unique: unique, isSaveInProgress: true, responseMsg: \"Pending changes. Click save to update KPIs.\", keyBPSelected: key, selectedBPFlag: flag, metricID_Edited: metricID_Edited })\r\n }\r\n }\r\n\r\n spendChange(element) {\r\n let val = onChangeRemoveMask(element, this.state.currencySymbol);\r\n if(val == \"\") val = null;\r\n let id = element.target.id;\r\n let data = this.state.tableData;\r\n let unique = this.state.metricFilteredData;\r\n let metricID_Edited = this.state.metricID_Edited;\r\n metricID_Edited.push(data[id]['METRIC_ID'])\r\n \r\n if (kpiFormatRowWithThousandMillion[id] == 'Million' ? round(data[id]['efo2'], 2) != val : data[id]['efo'] != val) {\r\n kpiFormatRowWithThousandMillion[id] == 'Million' ? data[id]['efo'] = val * 1000000 : data[id]['efo'] = val;\r\n data[id]['efo2'] = val;\r\n this.state.selectedSpanValue == 'Half' ? this.calcBenchMarkSpend(data[id], id, data) : this.calcBenchMarkSpendForQuater(data[id], id, data)\r\n this.setState({ unique: unique, isSaveInProgress: true, responseMsg: \"Pending changes. Click save to update KPIs.\", metricID_Edited: metricID_Edited })\r\n }\r\n }\r\n\r\n calcBenchMarkSpend(obj, key, data) {\r\n //benchmark calc (BR2, BA2)\r\n let spend1 = round((obj.BR1 * obj.efo) / 100, 2);\r\n let spend2 = round((obj.BA1 * obj.efo) / 100, 2);\r\n\r\n data[key].BR2 = spend1;\r\n data[key].BA2 = spend2;\r\n\r\n //cumulative % calc (H12, H22, H32, H42, H52, H62)\r\n let element = data[key];\r\n element.H12 = Number(element.H11);\r\n element.H22 = Number(element.H11) + Number(element.H21);\r\n element.H32 = Number(element.H11) + Number(element.H21) + Number(element.H31);\r\n element.H42 = Number(element.H11) + Number(element.H21) + Number(element.H31) + Number(element.H41);\r\n element.H52 = Number(element.H11) + Number(element.H21) + Number(element.H31) + Number(element.H41) + Number(element.H51);\r\n element.H62 = Number(element.H11) + Number(element.H21) + Number(element.H31) + Number(element.H41) + Number(element.H51) + Number(element.H61);\r\n\r\n //Target H calc (H13, H23, H33, H43, H53, H63)\r\n // let sp2 = spend2 !== 0? convertToNumber(spend2) : 0;\r\n element.H13 = round((spend2 * element.H11) / 100, 2);\r\n element.H23 = round((spend2 * element.H21) / 100, 2);\r\n element.H33 = round((spend2 * element.H31) / 100, 2);\r\n element.H43 = round((spend2 * element.H41) / 100, 2);\r\n element.H53 = round((spend2 * element.H51) / 100, 2);\r\n element.H63 = round((spend2 * element.H61) / 100, 2);\r\n\r\n //Target Cumulative calc (H14, H24, H34, H44, H54, H64)\r\n element.H14 = round(element.H13, 2);\r\n element.H24 = round(element.H13 + element.H23, 2);\r\n element.H34 = round(element.H13 + element.H23 + element.H33, 2);\r\n element.H44 = round(element.H13 + element.H23 + element.H33 + element.H43, 2);\r\n element.H54 = round(element.H13 + element.H23 + element.H33 + element.H43 + element.H53, 2);\r\n element.H64 = round(element.H13 + element.H23 + element.H33 + element.H43 + element.H53 + element.H63, 2);\r\n\r\n this.setState({ tableData: data })\r\n }\r\n\r\n calcBenchMarkSpendForQuater(obj, key, data) {\r\n //benchmark calc (BR2, BA2)\r\n let spend1 = round((obj.BR1 * obj.efo) / 100, 2);\r\n let spend2 = round((obj.BA1 * obj.efo) / 100, 2);\r\n\r\n data[key].BR2 = spend1;\r\n data[key].BA2 = spend2;\r\n\r\n //cumulative % calc (H12, H22, H32, H42, H52, H62)\r\n let element = data[key];\r\n element.HQ12 = Number(element.HQ11);\r\n element.HQ22 = Number(element.HQ11) + Number(element.HQ21);\r\n element.HQ32 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31);\r\n element.HQ42 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41);\r\n element.HQ52 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41) + Number(element.HQ51);\r\n element.HQ62 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41) + Number(element.HQ51) + Number(element.HQ61);\r\n element.HQ72 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41) + Number(element.HQ51) + Number(element.HQ61) + Number(element.HQ71);\r\n element.HQ82 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41) + Number(element.HQ51) + Number(element.HQ61) + Number(element.HQ71) + Number(element.HQ81);\r\n element.HQ92 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41) + Number(element.HQ51) + Number(element.HQ61) + Number(element.HQ71) + Number(element.HQ81) + Number(element.HQ91);\r\n element.HQ102 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41) + Number(element.HQ51) + Number(element.HQ61) + Number(element.HQ71) + Number(element.HQ81) + Number(element.HQ91) + Number(element.HQ101);\r\n element.HQ112 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41) + Number(element.HQ51) + Number(element.HQ61) + Number(element.HQ71) + Number(element.HQ81) + Number(element.HQ91) + Number(element.HQ101) + Number(element.HQ111);\r\n element.HQ122 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41) + Number(element.HQ51) + Number(element.HQ61) + Number(element.HQ71) + Number(element.HQ81) + Number(element.HQ91) + Number(element.HQ101) + Number(element.HQ111) + Number(element.HQ121);\r\n\r\n if (element.HQ122 !== 100) {\r\n this.setState({ isError: 'Yes', errorMsg: \"Warning: KPI does not total 100%\" })\r\n } else {\r\n this.setState({ isError: 'No', errorMsg: '' })\r\n }\r\n\r\n //Target H calc (H13, H23, H33, H43, H53, H63)\r\n element.HQ13 = round((spend2 * element.HQ11) / 100, 2);\r\n element.HQ23 = round((spend2 * element.HQ21) / 100, 2);\r\n element.HQ33 = round((spend2 * element.HQ31) / 100, 2);\r\n element.HQ43 = round((spend2 * element.HQ41) / 100, 2);\r\n element.HQ53 = round((spend2 * element.HQ51) / 100, 2);\r\n element.HQ63 = round((spend2 * element.HQ61) / 100, 2);\r\n element.HQ73 = round((spend2 * element.HQ71) / 100, 2);\r\n element.HQ83 = round((spend2 * element.HQ81) / 100, 2);\r\n element.HQ93 = round((spend2 * element.HQ91) / 100, 2);\r\n element.HQ103 = round((spend2 * element.HQ101) / 100, 2);\r\n element.HQ113 = round((spend2 * element.HQ111) / 100, 2);\r\n element.HQ123 = round((spend2 * element.HQ121) / 100, 2);\r\n\r\n //Target Cumulative calc (H14, H24, H34, H44, H54, H64)\r\n element.HQ14 = round(element.HQ13, 2);\r\n element.HQ24 = round(element.HQ13 + element.HQ23, 2);\r\n element.HQ34 = round(element.HQ13 + element.HQ23 + element.HQ33, 2);\r\n element.HQ44 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43, 2);\r\n element.HQ54 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43 + element.HQ53, 2);\r\n element.HQ64 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43 + element.HQ53 + element.HQ63, 2);\r\n element.HQ74 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43 + element.HQ53 + element.HQ63 + element.HQ73, 2);\r\n element.HQ84 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43 + element.HQ53 + element.HQ63 + element.HQ73 + element.HQ83, 2);\r\n element.HQ94 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43 + element.HQ53 + element.HQ63 + element.HQ73 + element.HQ83 + element.HQ93, 2);\r\n element.HQ104 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43 + element.HQ53 + element.HQ63 + element.HQ73 + element.HQ83 + element.HQ93 + element.HQ103, 2);\r\n element.HQ114 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43 + element.HQ53 + element.HQ63 + element.HQ73 + element.HQ83 + element.HQ93 + element.HQ103 + element.HQ113, 2);\r\n element.HQ124 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43 + element.HQ53 + element.HQ63 + element.HQ73 + element.HQ83 + element.HQ93 + element.HQ103 + element.HQ113 + element.HQ123, 2);\r\n\r\n this.setState({ tableData: data })\r\n }\r\n\r\n onSave() {\r\n let data = [];\r\n let unique = this.state.tableData;\r\n let userEmail = this.props.user.user.Email;\r\n let metricID_Edited = this.state.metricID_Edited;\r\n let flag = this.state.selectedBPFlag;\r\n let key = this.state.keyBPSelected;\r\n data = unique.filter((item, index) => metricID_Edited.includes(item.METRIC_ID))\r\n let spData = this.state.spData[0];\r\n let records = []\r\n //if data is null then user only edited date fields so send date value with any row data\r\n if (data.length > 0) {\r\n for (let i = 0; i < data.length; i++) {\r\n for (let j = 1; j <= 12; j++) {\r\n let obj = {}\r\n obj[\"VS_ID\"] = data[i].VS_ID;\r\n obj[\"DMC_ID\"] = data[i].DMC_ID;\r\n obj[\"USER_ID\"] = userEmail;\r\n obj[\"METRIC_ID\"] = data[i].METRIC_ID;\r\n obj[\"BENCHMARK_METRICS\"] = data[i].BENCHMARK_METRICS;\r\n obj[\"BENCHMARK_TYPE\"] = flag;\r\n obj[\"ELIGIBLE_FOR_ONBOARDING\"] = data[i].efo;\r\n obj[\"BENCHMARK_ADJUS\"] = data[i].BA1;\r\n obj[\"YEAR_NO\"] = j == 1 || j == 2 || j == 3 || j == 4 ? 1 : j == 5 || j == 6 || j == 7 || j == 8 ? 2 : 3;\r\n obj[\"QUARTER_NO\"] = 'Q' + j;\r\n obj[\"H_PERCENTAGE_VALUE\"] = data[i][\"HQ\" + j + '1']\r\n obj[\"CUMULATIVE_VALUE\"] = data[i][\"HQ\" + j + '2']\r\n obj[\"TARGET_VALUE\"] = data[i][\"HQ\" + j + '3']\r\n obj[\"CUMULATIVE_TARGET_VALUE\"] = data[i][\"HQ\" + j + '4']\r\n obj[\"GO_LIVE_DATE\"] = this.state.goLiveDate;\r\n obj[\"PROJECT_START_DATE\"] = this.state.startdate;\r\n\r\n records.push(obj)\r\n }\r\n }\r\n } else {\r\n let obj = {}\r\n obj[\"VS_ID\"] = spData.VS_ID;\r\n obj[\"DMC_ID\"] = spData.DMC_ID;\r\n obj[\"USER_ID\"] = userEmail;\r\n obj[\"METRIC_ID\"] = spData.METRIC_ID;\r\n obj[\"BENCHMARK_METRICS\"] = spData.BENCHMARK_METRICS;\r\n obj[\"BENCHMARK_TYPE\"] = flag;\r\n obj[\"ELIGIBLE_FOR_ONBOARDING\"] = spData.efo;\r\n obj[\"BENCHMARK_ADJUS\"] = spData.BENCHMARK_ADJUS;\r\n obj[\"YEAR_NO\"] = spData.YEAR_NO;\r\n obj[\"QUARTER_NO\"] = spData.QUARTER_NO;\r\n obj[\"H_PERCENTAGE_VALUE\"] = spData.H_PERCENTAGE_VALUE;\r\n obj[\"CUMULATIVE_VALUE\"] = spData.CUMULATIVE_VALUE;\r\n obj[\"TARGET_VALUE\"] = spData.TARGET_VALUE;\r\n obj[\"CUMULATIVE_TARGET_VALUE\"] = spData.CUMULATIVE_TARGET_VALUE;\r\n obj[\"GO_LIVE_DATE\"] = this.state.goLiveDate;\r\n obj[\"PROJECT_START_DATE\"] = this.state.startdate;\r\n\r\n records.push(obj)\r\n }\r\n this.setState({ isLoading: true, isSaveInProgress: true })\r\n this.props.defineScopeLoading(true)\r\n //call hana procedure for save here\r\n this.props.updateKPISetUpTabData(records)\r\n .then((response) => {\r\n this.loadData()\r\n this.updateKPIDashBoard()\r\n this.props.pendingChanges(null)\r\n this.setState({ responseMsg: 'Record/s has been updated successfully', isError: 'No', isLoading: false, isSaveInProgress: false })\r\n this.props.defineScopeLoading(false)\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: this.props.content.error, isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n }\r\n })\r\n }\r\n\r\n render() {\r\n let currencySymbol = this.state.currencySymbol;\r\n\r\n const userInputPlaceholder = currencySymbol;\r\n\r\n\r\n const userInputPrefix = currencySymbol;\r\n\r\n const userInputSuffix = 'M';\r\n\r\n const numberMask = createNumberMask({\r\n prefix: userInputPrefix + '',\r\n suffix: ' ' + userInputSuffix,\r\n allowDecimal: true\r\n })\r\n const numberMaskForThousands = createNumberMask({\r\n prefix: '',\r\n suffix: '',\r\n allowDecimal: false\r\n })\r\n const numberMaskPercentage = createNumberMask({\r\n prefix: '',\r\n suffix: ' ' + '%',\r\n allowDecimal: true\r\n })\r\n return (\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n\r\n\r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n
\r\n\r\n\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n {this.state.enablementWaveJson !== undefined && this.state.enablementWaveJson !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.refs.enablementSupplier ? this.state.openPopup ?\r\n this.refs.enablementSupplier.show() :\r\n this.refs.enablementSupplier.hide() : ''}\r\n \r\n
\r\n {/* \r\n
\r\n \r\n {\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n ui: state.content.ui,\r\n userData: state.valueStory,\r\n user: state.default,\r\n content: state.content.spendAnalysis.worldMap,\r\n focusLabel: state.content.spendAnalysis.enablement.focusLabel,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n tabMessage: state.content.spendAnalysis.detailedFile.toggleTabMessage,\r\n kpiLables: state.content.kpiTab\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n resetError: error => dispatch(resetError(error)),\r\n defineScopeLoading: bool => dispatch(defineScopeLoading(bool)),\r\n getKPISetUpLoadData: (DMCId, VSId, userEmail) => dispatch(getKPISetUpLoadData(DMCId, VSId, userEmail)),\r\n getKPIDashBoardLoadData: (DMCId, VSId, userEmail, metric, type) => dispatch(getKPIDashBoardLoadData(DMCId, VSId, userEmail, metric, type)),\r\n updateKPISetUpTabData: (records) => dispatch(updateKPISetUpTabData(records)),\r\n updateKPIDashBoardTabData: (records) => dispatch(updateKPIDashBoardTabData(records)),\r\n pendingChanges: changes => dispatch(pendingChanges(changes)),\r\n trackKpiBenchMarkFilters: obj => dispatch(trackKpiBenchMarkFilters(obj)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(KPIContainer)","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n getKPIDashBoardLoadData,\r\n updateKPIDashBoardTabData,\r\n} from 'actions/kpiActions'\r\nimport {\r\n resetError,\r\n defineScopeLoading,\r\n pendingChanges\r\n} from 'actions/spendActions'\r\nimport Select from 'react-select'\r\nimport { roundFix, round, formatThousands, addCurrencyMask, convertToNumber, convertToMillion, onChangeRemoveMask } from 'utils/Utils'\r\nimport reactSelectCjsDev from 'react-select/dist/react-select.cjs.dev';\r\nimport { path, routes,kpiRowCustomOrder, kpiFormatRowWithThousandMillion } from 'Constants'\r\nimport classNames from \"classnames\";\r\nimport Button from 'UI/ButtonWithoutLoader'\r\nimport Popup from \"reactjs-popup\";\r\nimport MaskedInput from 'react-text-mask'\r\nimport createNumberMask from 'text-mask-addons/dist/createNumberMask'\r\n\r\nclass KPIDashboard extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n headers: ['KPI', '', 'Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8', 'Q9', 'Q10', 'Q11', 'Q12'],\r\n //quaterly data may be added revisit logic \r\n colGroupYearly: [{ key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 2, value: 'Year1' }, { key: 2, value: 'Year2' }, { key: 2, value: 'Year3' }],\r\n tableData: [],\r\n editedRowsIds: [],\r\n selectedBPValue: 'Average 50%',\r\n metricValues: [],\r\n selectedMetricValue: 'ALL',\r\n selectedBPFlag: 'AVERAGE',\r\n kpiBenchMarkFilters: { metric: 'ALL', type: 'AVERAGE' }\r\n }\r\n this.loadData = this.loadData.bind(this);\r\n this.createTableData = this.createTableData.bind(this);\r\n this.createTableDataObject = this.createTableDataObject.bind(this);\r\n this.handleActualValChange = this.handleActualValChange.bind(this);\r\n this.onSave = this.onSave.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData()\r\n this.setState({ currencySymbol: this.props.spendDetails.currentActiveRequest !== undefined ? this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()] : '' })\r\n }\r\n\r\n loadData() {\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let user = this.props.user.user.Email;\r\n let metric = this.props.kpiFilters !== undefined ? this.props.kpiFilters.metric : this.state.kpiBenchMarkFilters.metric;\r\n let type = this.props.kpiFilters !== undefined ? this.props.kpiFilters.type : this.state.kpiBenchMarkFilters.type;\r\n\r\n this.props.defineScopeLoading(true)\r\n this.setState({ isLoading: true })\r\n this.props.getKPIDashBoardLoadData(dmcId, vsId, user, metric, type)\r\n .then((response) => {\r\n if (response.data.Result.length > 0) {\r\n let spData = response.data.Result;\r\n let tableData = this.createTableData(spData);\r\n this.props.defineScopeLoading(false)\r\n this.setState({ tableData: tableData, isLoading: false })\r\n } else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'No result found. Please try reimporting the file.', isError: 'Yes', isLoading: false })\r\n }\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n }\r\n })\r\n }\r\n\r\n createTableData(spData) {\r\n let tableData = [];\r\n\r\n //create an array with unique kpi names from sp data\r\n let kpiArr = [...new Set(spData.map(item => item.KPI_NAME))];\r\n\r\n //for every unique kpi name create table data for 12 quaters\r\n for (let i = 0; i < kpiArr.length; i++) {\r\n let temp = spData.filter(item => item.KPI_NAME == kpiArr[i])\r\n let obj = this.createTableDataObject(temp)\r\n tableData.push(obj)\r\n }\r\n //tableData.sort((a, b) => (a.srNo > b.srNo) ? 1 : -1)//sort the table always by sr_no\r\n\r\n \r\n tableData.sort((a, b) => kpiRowCustomOrder[a.srNo] - kpiRowCustomOrder[b.srNo]);\r\n\r\n return tableData;\r\n }\r\n\r\n createTableDataObject(kpiArr) {\r\n let obj = {}\r\n for (let i = 0; i < kpiArr.length; i++) {\r\n obj.VS_ID = kpiArr[i]['VS_ID']\r\n obj.DMC_ID = kpiArr[i]['DMC_ID']\r\n obj.kpi = kpiArr[i]['KPI_NAME']\r\n obj.QUARTER_NO = kpiArr[i]['QUARTER_NO']\r\n obj.srNo = kpiArr[i]['SR_NO']\r\n obj.HR = 'hr'\r\n for (let j = 1; j <= 12; j++) {\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['TagetKpi_Q' + j] = kpiArr[i]['TARGET_KPI_CUMULATIVE']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['SE_Targeted_Q' + j] = kpiArr[i]['SE_TARGETED']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['SE_Estimated_Q' + j] = kpiArr[i]['SE_ESTIMATED']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['Actual_Q' + j] = kpiArr[i]['SR_NO'] % 2 == 0 ? kpiArr[i]['ACTUAL_VALUE'] / 1000000 : kpiArr[i]['ACTUAL_VALUE']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['Gap_Q' + j] = kpiArr[i]['GAP_VALUE']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['Attainment_Q' + j] = kpiArr[i]['ATTAINMENT_VALUE']\r\n }\r\n }\r\n return obj;\r\n }\r\n\r\n handleActualValChange(element) {\r\n let id = element.target.id;\r\n let editedRowsIds = this.state.editedRowsIds;\r\n let cellId = element.target.attributes.cellId.nodeValue;\r\n //let val = id % 2 == 0 ? onChangeRemoveMask(element, '') : onChangeRemoveMask(element, this.state.currencySymbol);\r\n let val = kpiFormatRowWithThousandMillion[id] == 'Million' ? onChangeRemoveMask(element, '') : onChangeRemoveMask(element, this.state.currencySymbol);\r\n if (val == \"\") val = null;\r\n let data = this.state.tableData;\r\n if (data[id][cellId] != val) {\r\n data[id][cellId] = val;\r\n //save the edited row id number\r\n if (!editedRowsIds.includes(id)) editedRowsIds.push(id);\r\n this.runCalcFormulae(data[id], id, data)\r\n this.props.pendingChanges(true)\r\n this.setState({ editedRowsIds: editedRowsIds, isSaveInProgress: true, isError: 'No', responseMsg: \"Pending changes. Click save to update KPI Dashboard.\" })\r\n }\r\n }\r\n\r\n runCalcFormulae(obj, id, data) {\r\n let element = data[id];\r\n\r\n //Gap calculation formulae kpi - actual\r\n //if (id % 2 == 0) {\r\n if(kpiFormatRowWithThousandMillion[id] == 'Thousand') {\r\n element.Gap_Q1 = element.TagetKpi_Q1 - element.Actual_Q1;\r\n element.Gap_Q2 = element.TagetKpi_Q2 - element.Actual_Q2;\r\n element.Gap_Q3 = element.TagetKpi_Q3 - element.Actual_Q3;\r\n element.Gap_Q4 = element.TagetKpi_Q4 - element.Actual_Q4;\r\n element.Gap_Q5 = element.TagetKpi_Q5 - element.Actual_Q5;\r\n element.Gap_Q6 = element.TagetKpi_Q6 - element.Actual_Q6;\r\n element.Gap_Q7 = element.TagetKpi_Q7 - element.Actual_Q7;\r\n element.Gap_Q8 = element.TagetKpi_Q8 - element.Actual_Q8;\r\n element.Gap_Q9 = element.TagetKpi_Q9 - element.Actual_Q9;\r\n element.Gap_Q10 = element.TagetKpi_Q10 - element.Actual_Q10;\r\n element.Gap_Q11 = element.TagetKpi_Q11 - element.Actual_Q11;\r\n element.Gap_Q12 = element.TagetKpi_Q12 - element.Actual_Q12;\r\n } else {\r\n element.Gap_Q1 = element.TagetKpi_Q1 - element.Actual_Q1 * 1000000;//in odd rows the values are in millions so mutiply the value by 10^6\r\n element.Gap_Q2 = element.TagetKpi_Q2 - element.Actual_Q2 * 1000000;\r\n element.Gap_Q3 = element.TagetKpi_Q3 - element.Actual_Q3 * 1000000;\r\n element.Gap_Q4 = element.TagetKpi_Q4 - element.Actual_Q4 * 1000000;\r\n element.Gap_Q5 = element.TagetKpi_Q5 - element.Actual_Q5 * 1000000;\r\n element.Gap_Q6 = element.TagetKpi_Q6 - element.Actual_Q6 * 1000000;\r\n element.Gap_Q7 = element.TagetKpi_Q7 - element.Actual_Q7 * 1000000;\r\n element.Gap_Q8 = element.TagetKpi_Q8 - element.Actual_Q8 * 1000000;\r\n element.Gap_Q9 = element.TagetKpi_Q9 - element.Actual_Q9 * 1000000;\r\n element.Gap_Q10 = element.TagetKpi_Q10 - element.Actual_Q10 * 1000000;\r\n element.Gap_Q11 = element.TagetKpi_Q11 - element.Actual_Q11 * 1000000;\r\n element.Gap_Q12 = element.TagetKpi_Q12 - element.Actual_Q12 * 1000000;\r\n }\r\n\r\n\r\n //Attainment clac formula Actual/kpi\r\n //if (id % 2 == 0) {\r\n if(kpiFormatRowWithThousandMillion[id] == 'Thousand') {\r\n element.Attainment_Q1 = roundFix((element.Actual_Q1 / element.TagetKpi_Q1) * 100, 2);//we multiply the result with 100 and roundFix it off to 2 decimal bcs its % value\r\n element.Attainment_Q2 = roundFix((element.Actual_Q2 / element.TagetKpi_Q2) * 100, 2);\r\n element.Attainment_Q3 = roundFix((element.Actual_Q3 / element.TagetKpi_Q3) * 100, 2);\r\n element.Attainment_Q4 = roundFix((element.Actual_Q4 / element.TagetKpi_Q4) * 100, 2);\r\n element.Attainment_Q5 = roundFix((element.Actual_Q5 / element.TagetKpi_Q5) * 100, 2);\r\n element.Attainment_Q6 = roundFix((element.Actual_Q6 / element.TagetKpi_Q6) * 100, 2);\r\n element.Attainment_Q7 = roundFix((element.Actual_Q7 / element.TagetKpi_Q7) * 100, 2);\r\n element.Attainment_Q8 = roundFix((element.Actual_Q8 / element.TagetKpi_Q8) * 100, 2);\r\n element.Attainment_Q9 = roundFix((element.Actual_Q9 / element.TagetKpi_Q9) * 100, 2);\r\n element.Attainment_Q10 = roundFix((element.Actual_Q10 / element.TagetKpi_Q10) * 100, 2);\r\n element.Attainment_Q11 = roundFix((element.Actual_Q11 / element.TagetKpi_Q11) * 100, 2);\r\n element.Attainment_Q12 = roundFix((element.Actual_Q12 / element.TagetKpi_Q12) * 100, 2);\r\n } else {\r\n element.Attainment_Q1 = roundFix((1000000 * element.Actual_Q1 / element.TagetKpi_Q1) * 100, 2);//we multiply the result with 100 and roundFix it off to 2 decimal bcs its % value\r\n element.Attainment_Q2 = roundFix((1000000 * element.Actual_Q2 / element.TagetKpi_Q2) * 100, 2);\r\n element.Attainment_Q3 = roundFix((1000000 * element.Actual_Q3 / element.TagetKpi_Q3) * 100, 2);\r\n element.Attainment_Q4 = roundFix((1000000 * element.Actual_Q4 / element.TagetKpi_Q4) * 100, 2);\r\n element.Attainment_Q5 = roundFix((1000000 * element.Actual_Q5 / element.TagetKpi_Q5) * 100, 2);\r\n element.Attainment_Q6 = roundFix((1000000 * element.Actual_Q6 / element.TagetKpi_Q6) * 100, 2);\r\n element.Attainment_Q7 = roundFix((1000000 * element.Actual_Q7 / element.TagetKpi_Q7) * 100, 2);\r\n element.Attainment_Q8 = roundFix((1000000 * element.Actual_Q8 / element.TagetKpi_Q8) * 100, 2);\r\n element.Attainment_Q9 = roundFix((1000000 * element.Actual_Q9 / element.TagetKpi_Q9) * 100, 2);\r\n element.Attainment_Q10 = roundFix((1000000 * element.Actual_Q10 / element.TagetKpi_Q10) * 100, 2);\r\n element.Attainment_Q11 = roundFix((1000000 * element.Actual_Q11 / element.TagetKpi_Q11) * 100, 2);\r\n element.Attainment_Q12 = roundFix((1000000 * element.Actual_Q12 / element.TagetKpi_Q12) * 100, 2);\r\n }\r\n\r\n this.setState({ tableData: data })\r\n }\r\n\r\n onSave() {\r\n let data = []\r\n let editedRowsIds = this.state.editedRowsIds;\r\n let tableData = this.state.tableData;\r\n for (let i = 0; i < editedRowsIds.length; i++) {\r\n data.push(tableData[editedRowsIds[i]])\r\n }\r\n\r\n let records = []\r\n let userEmail = this.props.user.user.Email;\r\n let BENCHMARK_METRICS = this.props.kpiFilters !== undefined ? this.props.kpiFilters.metric : this.state.kpiBenchMarkFilters.metric; //this.props.kpiFilters.metric;\r\n let BENCHMARK_TYPE = this.props.kpiFilters !== undefined ? this.props.kpiFilters.type : this.state.kpiBenchMarkFilters.type; //this.props.kpiFilters.type;\r\n let ACTUAL_FLAG = 2;\r\n for (let i = 0; i < data.length; i++) {\r\n for (let j = 1; j <= 12; j++) {\r\n let obj = {}\r\n obj[\"VS_ID\"] = data[i].VS_ID;\r\n obj[\"DMC_ID\"] = data[i].DMC_ID;\r\n obj[\"USER_ID\"] = userEmail;\r\n obj[\"BENCHMARK_METRICS\"] = BENCHMARK_METRICS;\r\n obj[\"BENCHMARK_TYPE\"] = BENCHMARK_TYPE;\r\n obj[\"ACTUAL_FLAG\"] = ACTUAL_FLAG;\r\n obj[\"QUARTER_NO\"] = 'Q' + j;\r\n obj[\"KPI_NAME\"] = data[i].kpi;\r\n //obj[\"ACTUAL_VALUE\"] = data[i]['srNo'] % 2 == 0 ? data[i]['Actual_Q' + j] * 1000000 : data[i]['Actual_Q' + j];\r\n obj[\"ACTUAL_VALUE\"] = kpiFormatRowWithThousandMillion[kpiRowCustomOrder[data[i]['srNo']]] == 'Million' ? data[i]['Actual_Q' + j] * 1000000 : data[i]['Actual_Q' + j];\r\n obj[\"GAP_VALUE\"] = data[i]['Gap_Q' + j];\r\n obj[\"ATTAINMENT_VALUE\"] = data[i]['Attainment_Q' + j];\r\n\r\n records.push(obj)\r\n }\r\n }\r\n\r\n this.setState({ isLoading: true, isSaveInProgress: true, responseMsg: '' })\r\n this.props.defineScopeLoading(true)\r\n\r\n this.props.updateKPIDashBoardTabData(records)\r\n .then((response) => {\r\n //this.loadData()\r\n this.setState({ responseMsg: 'Record/s has been updated successfully', isError: 'No', isLoading: false, isSaveInProgress: false, editedRowsIds: [] })\r\n this.props.defineScopeLoading(false)\r\n this.props.pendingChanges(null)\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: this.props.content.error, isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n }\r\n })\r\n }\r\n\r\n render() {\r\n let currencySymbol = this.state.currencySymbol;\r\n const userInputPrefix = currencySymbol;\r\n\r\n const userInputSuffix = 'M';\r\n\r\n const numberMask = createNumberMask({\r\n prefix: userInputPrefix + '',\r\n suffix: ' ' + userInputSuffix,\r\n allowDecimal: true\r\n })\r\n const numberMaskForThousands = createNumberMask({\r\n prefix: '',\r\n suffix: '',\r\n allowDecimal: false\r\n }) \r\n\r\n return (\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n {this.state.errorMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n this.setGoLiveDate(date)} />\r\n
\r\n {this.props.kpiLables.goLiveDate}
\r\n \r\n this.setStartDate(date)} />\r\n
\r\n {this.props.kpiLables.projectStartDate}
\r\n \r\n option.value === this.state.selectedMetricValue\r\n )}\r\n onChange={value => this.handleMetricChange(value)}\r\n options={this.state.metricValues}\r\n // isSearchable={true}\r\n isDisabled={this.state.isSaveInProgress}\r\n />\r\n
\r\n {this.props.kpiLables.benchmarkMetric}
\r\n \r\n option.value === this.state.selectedBPValue\r\n )}\r\n onChange={value => this.handleBPChange(value)}\r\n options={this.state.benchmarkPercentileValues}\r\n // isSearchable={true}\r\n isDisabled={this.state.isSaveInProgress}\r\n />\r\n
\r\n {this.props.kpiLables.benchmarkPercentile}
\r\n \r\n option.value === this.state.selectedSpanValue\r\n )}\r\n onChange={value => this.handleSpanChange(value)}\r\n options={this.state.spanValues}\r\n // isSearchable={true}\r\n // isDisabled={this.state.isLoading}\r\n />\r\n
\r\n {this.props.kpiLables.benchMarkSpan}
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.kpiLables.restoreMsg}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {this.state.dataLoaded ?\r\n \r\n {/* {this.state.colGroupYearly.map(el => el.key == 1 ?
\r\n : null}\r\n
\r\n | : this.state.selectedSpanValue == 'Half' ? | {el.value} | :{el.value} | )}\r\n||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {el} | :{el} | ) : this.state.headers2.map(el => el !== '' ?{el} | :{el} | )}\r\n|||||||||||||||||||||
| {el.kpi} | \r\n{kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.spend, true) : formatThousands(round(el.spend, 0))} | \r\n {kpiFormatRowWithThousandMillion[index] == 'Million' ?\r\n | :\r\n \r\n | }\r\n\r\n\r\n {el.BR1}% {el.BR2 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.BR2, true) : formatThousands(round(el.BR2, 0))} | \r\n {el.BA2 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.BA2, true) : formatThousands(round(el.BA2, 0))} | \r\n (%) Cumulative (%) Target KPI Target KPI Cumulative | \r\n {this.state.selectedSpanValue == 'Half' ?\r\n {el.H11} % {el.H12 == 0 ? '-' : el.H12} % {el.H13 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.H13, true) : formatThousands(round(el.H13, 0))} {el.H14 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.H14, true) : formatThousands(round(el.H14, 0))} | \r\n {el.H21} % {el.H22 == 0 ? '-' : el.H22} % {el.H23 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.H23, true) : formatThousands(round(el.H23, 0))} {el.H24 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.H24, true) : formatThousands(round(el.H24, 0))} | \r\n {el.H31} % {el.H32 == 0 ? '-' : el.H32} % {el.H33 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.H33, true) : formatThousands(round(el.H33, 0))} {el.H34 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.H34, true) : formatThousands(round(el.H34, 0))} | \r\n {el.H41} % {el.H42 == 0 ? '-' : el.H42} % {el.H43 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.H43, true) : formatThousands(round(el.H43, 0))} {el.H44 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.H44, true) : formatThousands(round(el.H44, 0))} | \r\n {el.H51} % {el.H52 == 0 ? '-' : el.H52} % {el.H53 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.H53, true) : formatThousands(round(el.H53, 0))} {el.H54 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.H54, true) : formatThousands(round(el.H54, 0))} | \r\n {el.H61} % {el.H62 == 0 ? '-' : el.H62} % {el.H63 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.H63, true) : formatThousands(round(el.H63, 0))} {el.H64 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.H64, true) : formatThousands(round(el.H64, 0))} | \r\n {el.HQ12 == 0 ? '-' : el.HQ12} % {el.HQ13 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ13, true) : formatThousands(round(el.HQ13, 0))} {el.HQ14 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ14, true) : formatThousands(round(el.HQ14, 0))} | \r\n {el.HQ22 == 0 ? '-' : el.HQ22} % {el.HQ23 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ23, true) : formatThousands(round(el.HQ23, 0))} {el.HQ24 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ24, true) : formatThousands(round(el.HQ24, 0))} | \r\n {el.HQ32 == 0 ? '-' : el.HQ32} % {el.HQ33 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ33, true) : formatThousands(round(el.HQ33, 0))} {el.HQ34 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ34, true) : formatThousands(round(el.HQ34, 0))} | \r\n {el.HQ42 == 0 ? '-' : el.HQ42} % {el.HQ43 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ43, true) : formatThousands(round(el.HQ43, 0))} {el.HQ44 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ44, true) : formatThousands(round(el.HQ44, 0))} | \r\n {el.HQ52 == 0 ? '-' : el.HQ52} % {el.HQ53 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ53, true) : formatThousands(round(el.HQ53, 0))} {el.HQ54 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ54, true) : formatThousands(round(el.HQ54, 0))} | \r\n {el.HQ62 == 0 ? '-' : el.HQ62} % {el.HQ63 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ63, true) : formatThousands(round(el.HQ63, 0))} {el.HQ64 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ64, true) : formatThousands(round(el.HQ64, 0))} | \r\n {el.HQ72 == 0 ? '-' : el.HQ72} % {el.HQ73 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ73, true) : formatThousands(round(el.HQ73, 0))} {el.HQ74 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ74, true) : formatThousands(round(el.HQ74, 0))} | \r\n {el.HQ82 == 0 ? '-' : el.HQ82} % {el.HQ83 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ83, true) : formatThousands(round(el.HQ83, 0))} {el.HQ84 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ84, true) : formatThousands(round(el.HQ84, 0))} | \r\n {el.HQ92 == 0 ? '-' : el.HQ92} % {el.HQ93 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ93, true) : formatThousands(round(el.HQ93, 0))} {el.HQ94 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ94, true) : formatThousands(round(el.HQ94, 0))} | \r\n {el.HQ102 == 0 ? '-' : el.HQ102} % {el.HQ103 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ103, true) : formatThousands(round(el.HQ103, 0))} {el.HQ104 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ104, true) : formatThousands(round(el.HQ104, 0))} | \r\n {el.HQ112 == 0 ? '-' : el.HQ112} % {el.HQ113 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ113, true) : formatThousands(round(el.HQ113, 0))} {el.HQ114 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ114, true) : formatThousands(round(el.HQ114, 0))} | \r\n {el.HQ122 == 0 ? '-' : el.HQ122} % {el.HQ123 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ123, true) : formatThousands(round(el.HQ123, 0))} {el.HQ124 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ124, true) : formatThousands(round(el.HQ124, 0))} | \r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n ui: state.content.ui,\r\n userData: state.valueStory,\r\n user: state.default,\r\n content: state.content.spendAnalysis.worldMap,\r\n focusLabel: state.content.spendAnalysis.enablement.focusLabel,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n kpiFilters: state.kpis.kpiBenchMarkFilters\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n resetError: error => dispatch(resetError(error)),\r\n defineScopeLoading: bool => dispatch(defineScopeLoading(bool)),\r\n getKPIDashBoardLoadData: (DMCId, VSId, userEmail, metric, type) => dispatch(getKPIDashBoardLoadData(DMCId, VSId, userEmail, metric, type)),\r\n updateKPIDashBoardTabData: (records) => dispatch(updateKPIDashBoardTabData(records)),\r\n pendingChanges: changes => dispatch(pendingChanges(changes)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(KPIDashboard)","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n getKPIDashBoardLoadDataV2,\r\n getKPIDashBoardLoadFinalDataV2,\r\n updateKPIDashBoardTabDataV2,\r\n getUpdateKpiGoliveProjectStartDate\r\n} from 'actions/kpiActions'\r\nimport {\r\n resetError,\r\n defineScopeLoading,\r\n pendingChanges\r\n} from 'actions/spendActions'\r\nimport Select from 'react-select'\r\nimport { roundFix, round, formatThousands, addCurrencyMask, convertToNumber, convertToMillion, onChangeRemoveMask } from 'utils/Utils'\r\nimport reactSelectCjsDev from 'react-select/dist/react-select.cjs.dev';\r\nimport { path, routes, kpiRowCustomOrder, kpiFormatRowWithThousandMillion, kpiTargetShortNames } from 'Constants'\r\nimport classNames from \"classnames\";\r\nimport Button from 'UI/ButtonWithoutLoader'\r\nimport Popup from \"reactjs-popup\";\r\nimport MaskedInput from 'react-text-mask'\r\nimport createNumberMask from 'text-mask-addons/dist/createNumberMask'\r\nimport DatePicker from 'react-datepicker';\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\n\r\nclass KPIDashboardV2 extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n headers: ['KPI', 'Metric', 'Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8', 'Q9', 'Q10', 'Q11', 'Q12'],\r\n //quaterly data may be added revisit logic \r\n colGroupYearly: [{ key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 2, value: 'Year1' }, { key: 2, value: 'Year2' }, { key: 2, value: 'Year3' }],\r\n tableData: [],\r\n editedRowsIds: [],\r\n selectedBPValue: 'Average 50%',\r\n metricValues: [],\r\n selectedMetricValue: 'ALL',\r\n selectedBPFlag: 'AVERAGE',\r\n kpiBenchMarkFilters: { metric: 'ALL', type: 'AVERAGE' },\r\n startdate: null,\r\n goLiveDate: null,\r\n }\r\n this.loadData = this.loadData.bind(this);\r\n this.createTableData = this.createTableData.bind(this);\r\n this.createTableDataObject = this.createTableDataObject.bind(this);\r\n this.handleActualValChange = this.handleActualValChange.bind(this);\r\n this.onSave = this.onSave.bind(this);\r\n this.setStartDate = this.setStartDate.bind(this);\r\n this.setGoLiveDate = this.setGoLiveDate.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData()\r\n this.setState({ currencySymbol: this.props.spendDetails.currentActiveRequest !== undefined ? this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()] : '' })\r\n }\r\n\r\n setStartDate(date) {\r\n this.props.pendingChanges(true);\r\n var formattedDate = this.convertToServerTimeZone(date); \r\n this.setState({ startdate: formattedDate, isSaveInProgress: true, responseMsg: \"Pending changes. Click save to update KPIs.\", })\r\n }\r\n\r\n setGoLiveDate(date) {\r\n this.props.pendingChanges(true);\r\n var formattedDate = this.convertToServerTimeZone(date);\r\n this.setState({ goLiveDate: formattedDate, isSaveInProgress: true, responseMsg: \"Pending changes. Click save to update KPIs.\", })\r\n }\r\n\r\n convertToServerTimeZone(date) {\r\n var newDate = new Date(date);\r\n var tt = new Date();\r\n \r\n if (Intl.DateTimeFormat().resolvedOptions().timeZone == 'America/New_York')\r\n return date;\r\n\r\n var dt = new Date(Date.UTC(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), tt.getHours(), tt.getMinutes(), tt.getSeconds()));//new Date(1458619200000);\r\n //console.log(dt); // Gives Tue Mar 22 2016 09:30:00 GMT+0530 (IST)\r\n\r\n dt.setTime(dt.getTime() + dt.getTimezoneOffset() * 60 * 1000);\r\n //console.log(dt); // Gives Tue Mar 22 2016 04:00:00 GMT+0530 (IST)\r\n\r\n var offset = -300; //Timezone offset for EST in minutes.\r\n var estDate = new Date(dt.getTime() + offset * 60 * 1000);\r\n //console.log(estDate);\r\n \r\n return estDate;\r\n }\r\n\r\n loadData() {\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let user = this.props.user.user.Email;\r\n\r\n this.props.defineScopeLoading(true)\r\n this.setState({ isLoading: true })\r\n this.props.getKPIDashBoardLoadFinalDataV2(dmcId, vsId, user)\r\n .then((response) => {\r\n if (response.data.Result.length > 0) {\r\n let spData = response.data.Result;\r\n let tableData = this.createTableData(spData);\r\n this.props.defineScopeLoading(false);\r\n // let goLiveDate = spData[0][\"GO_LIVE_DATE\"] !== null ? new Date(spData[0][\"GO_LIVE_DATE\"]) : null;\r\n // let projectStartDate = spData[0][\"PROJECT_START_DATE\"] !== null ? new Date(spData[0][\"PROJECT_START_DATE\"]) : null;\r\n this.props.getUpdateKpiGoliveProjectStartDate(dmcId, vsId, user, 'R', null, null)\r\n .then((response) => {\r\n var data = response.data.Result[0];\r\n let goLiveDate = data.GO_LIVE_DATE !== null ? this.convertToServerTimeZone(new Date(data.GO_LIVE_DATE)) : null;\r\n let projectStartDate = data.PROJECT_START_DATE !== null ? this.convertToServerTimeZone(new Date(data.PROJECT_START_DATE)) : null;\r\n this.setState({ tableData: tableData, isLoading: false, startdate: projectStartDate, goLiveDate: goLiveDate })\r\n });\r\n } else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'No Records Found. Please navigate to the Your Spend File Tab then Enablement Strategy Wizard Sub-tab then navigate back to this page. The data will appear if the data does not appear email sap_ism_value_experience@sap.com.', isError: 'Yes', isLoading: false })\r\n }\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n }\r\n })\r\n }\r\n\r\n createTableData(spData) {\r\n let tableData = [];\r\n\r\n //create an array with unique kpi names from sp data\r\n let kpiArr = [...new Set(spData.map(item => item.KPI_NAME))];\r\n\r\n //for every unique kpi name create table data for 12 quaters\r\n for (let i = 0; i < kpiArr.length; i++) {\r\n let temp = spData.filter(item => item.KPI_NAME == kpiArr[i])\r\n let obj = this.createTableDataObject(temp)\r\n tableData.push(obj)\r\n }\r\n //tableData.sort((a, b) => (a.srNo > b.srNo) ? 1 : -1)//sort the table always by sr_no\r\n\r\n \r\n tableData.sort((a, b) => kpiRowCustomOrder[a.srNo] - kpiRowCustomOrder[b.srNo]);\r\n\r\n return tableData;\r\n }\r\n\r\n createTableDataObject(kpiArr) {\r\n let obj = {}\r\n for (let i = 0; i < kpiArr.length; i++) {\r\n obj.VS_ID = kpiArr[i]['VS_ID']\r\n obj.DMC_ID = kpiArr[i]['DMC_ID']\r\n obj.kpi = kpiArr[i]['KPI_NAME']\r\n obj.QUARTER_NO = kpiArr[i]['QUARTER_NO']\r\n obj.srNo = kpiArr[i]['SR_NO']\r\n obj.HR = 'hr'\r\n for (let j = 1; j <= 12; j++) {\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['TagetKpi_Q' + j] = kpiArr[i]['TARGET_KPI_CUMULATIVE']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['PLANNED_Q' + j] = kpiArr[i]['PLANNED']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['SE_Estimated_Q' + j] = kpiArr[i]['SE_ESTIMATED']\r\n //if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['Actual_Q' + j] = kpiArr[i]['SR_NO'] % 2 == 0 ? kpiArr[i]['ACTUAL_VALUE'] / 1000000 : kpiArr[i]['ACTUAL_VALUE']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['Actual_Q' + j] = kpiArr[i]['ACTUAL_VALUE']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['Gap_Q' + j] = kpiArr[i]['GAP_VALUE']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['Attainment_Q' + j] = kpiArr[i]['ATTAINMENT_VALUE']\r\n }\r\n }\r\n return obj;\r\n }\r\n\r\n handleActualValChange(element) {\r\n let id = element.target.id;\r\n let editedRowsIds = this.state.editedRowsIds;\r\n let cellId = element.target.attributes.cellId.nodeValue;\r\n \r\n //let val = kpiFormatRowWithThousandMillion[id] == 'Million' ? onChangeRemoveMask(element, '') : onChangeRemoveMask(element, this.state.currencySymbol);\r\n let val = onChangeRemoveMask(element, this.state.currencySymbol);\r\n if (val == \"\") val = null;\r\n let data = this.state.tableData;\r\n if (data[id][cellId] != val) {\r\n data[id][cellId] = val;\r\n //save the edited row id number\r\n if (!editedRowsIds.includes(id)) editedRowsIds.push(id);\r\n this.runCalcFormulae(data[id], id, data)\r\n this.props.pendingChanges(true)\r\n this.setState({ editedRowsIds: editedRowsIds, isSaveInProgress: true, isError: 'No', responseMsg: \"Pending changes. Click save to update KPI Dashboard.\" })\r\n }\r\n }\r\n\r\n runCalcFormulae(obj, id, data) {\r\n let element = data[id];\r\n\r\n //Gap calculation formulae kpi - actual\r\n //if (id % 2 == 0) {\r\n \r\n // if (kpiFormatRowWithThousandMillion[id] == 'Thousand') {\r\n element.Gap_Q1 = element.TagetKpi_Q1 - element.Actual_Q1;\r\n element.Gap_Q2 = element.TagetKpi_Q2 - element.Actual_Q2;\r\n element.Gap_Q3 = element.TagetKpi_Q3 - element.Actual_Q3;\r\n element.Gap_Q4 = element.TagetKpi_Q4 - element.Actual_Q4;\r\n element.Gap_Q5 = element.TagetKpi_Q5 - element.Actual_Q5;\r\n element.Gap_Q6 = element.TagetKpi_Q6 - element.Actual_Q6;\r\n element.Gap_Q7 = element.TagetKpi_Q7 - element.Actual_Q7;\r\n element.Gap_Q8 = element.TagetKpi_Q8 - element.Actual_Q8;\r\n element.Gap_Q9 = element.TagetKpi_Q9 - element.Actual_Q9;\r\n element.Gap_Q10 = element.TagetKpi_Q10 - element.Actual_Q10;\r\n element.Gap_Q11 = element.TagetKpi_Q11 - element.Actual_Q11;\r\n element.Gap_Q12 = element.TagetKpi_Q12 - element.Actual_Q12;\r\n // } else {\r\n // element.Gap_Q1 = element.TagetKpi_Q1 - element.Actual_Q1 * 1000000;//in odd rows the values are in millions so mutiply the value by 10^6\r\n // element.Gap_Q2 = element.TagetKpi_Q2 - element.Actual_Q2 * 1000000;\r\n // element.Gap_Q3 = element.TagetKpi_Q3 - element.Actual_Q3 * 1000000;\r\n // element.Gap_Q4 = element.TagetKpi_Q4 - element.Actual_Q4 * 1000000;\r\n // element.Gap_Q5 = element.TagetKpi_Q5 - element.Actual_Q5 * 1000000;\r\n // element.Gap_Q6 = element.TagetKpi_Q6 - element.Actual_Q6 * 1000000;\r\n // element.Gap_Q7 = element.TagetKpi_Q7 - element.Actual_Q7 * 1000000;\r\n // element.Gap_Q8 = element.TagetKpi_Q8 - element.Actual_Q8 * 1000000;\r\n // element.Gap_Q9 = element.TagetKpi_Q9 - element.Actual_Q9 * 1000000;\r\n // element.Gap_Q10 = element.TagetKpi_Q10 - element.Actual_Q10 * 1000000;\r\n // element.Gap_Q11 = element.TagetKpi_Q11 - element.Actual_Q11 * 1000000;\r\n // element.Gap_Q12 = element.TagetKpi_Q12 - element.Actual_Q12 * 1000000;\r\n //}\r\n\r\n\r\n //Attainment clac formula Actual/kpi\r\n //if (id % 2 == 0) {\r\n // if (kpiFormatRowWithThousandMillion[id] == 'Thousand') {\r\n element.Attainment_Q1 = roundFix((element.Actual_Q1 / element.TagetKpi_Q1) * 100, 2);//we multiply the result with 100 and roundFix it off to 2 decimal bcs its % value\r\n element.Attainment_Q2 = roundFix((element.Actual_Q2 / element.TagetKpi_Q2) * 100, 2);\r\n element.Attainment_Q3 = roundFix((element.Actual_Q3 / element.TagetKpi_Q3) * 100, 2);\r\n element.Attainment_Q4 = roundFix((element.Actual_Q4 / element.TagetKpi_Q4) * 100, 2);\r\n element.Attainment_Q5 = roundFix((element.Actual_Q5 / element.TagetKpi_Q5) * 100, 2);\r\n element.Attainment_Q6 = roundFix((element.Actual_Q6 / element.TagetKpi_Q6) * 100, 2);\r\n element.Attainment_Q7 = roundFix((element.Actual_Q7 / element.TagetKpi_Q7) * 100, 2);\r\n element.Attainment_Q8 = roundFix((element.Actual_Q8 / element.TagetKpi_Q8) * 100, 2);\r\n element.Attainment_Q9 = roundFix((element.Actual_Q9 / element.TagetKpi_Q9) * 100, 2);\r\n element.Attainment_Q10 = roundFix((element.Actual_Q10 / element.TagetKpi_Q10) * 100, 2);\r\n element.Attainment_Q11 = roundFix((element.Actual_Q11 / element.TagetKpi_Q11) * 100, 2);\r\n element.Attainment_Q12 = roundFix((element.Actual_Q12 / element.TagetKpi_Q12) * 100, 2);\r\n // } else {\r\n // element.Attainment_Q1 = roundFix((1000000 * element.Actual_Q1 / element.TagetKpi_Q1) * 100, 2);//we multiply the result with 100 and roundFix it off to 2 decimal bcs its % value\r\n // element.Attainment_Q2 = roundFix((1000000 * element.Actual_Q2 / element.TagetKpi_Q2) * 100, 2);\r\n // element.Attainment_Q3 = roundFix((1000000 * element.Actual_Q3 / element.TagetKpi_Q3) * 100, 2);\r\n // element.Attainment_Q4 = roundFix((1000000 * element.Actual_Q4 / element.TagetKpi_Q4) * 100, 2);\r\n // element.Attainment_Q5 = roundFix((1000000 * element.Actual_Q5 / element.TagetKpi_Q5) * 100, 2);\r\n // element.Attainment_Q6 = roundFix((1000000 * element.Actual_Q6 / element.TagetKpi_Q6) * 100, 2);\r\n // element.Attainment_Q7 = roundFix((1000000 * element.Actual_Q7 / element.TagetKpi_Q7) * 100, 2);\r\n // element.Attainment_Q8 = roundFix((1000000 * element.Actual_Q8 / element.TagetKpi_Q8) * 100, 2);\r\n // element.Attainment_Q9 = roundFix((1000000 * element.Actual_Q9 / element.TagetKpi_Q9) * 100, 2);\r\n // element.Attainment_Q10 = roundFix((1000000 * element.Actual_Q10 / element.TagetKpi_Q10) * 100, 2);\r\n // element.Attainment_Q11 = roundFix((1000000 * element.Actual_Q11 / element.TagetKpi_Q11) * 100, 2);\r\n // element.Attainment_Q12 = roundFix((1000000 * element.Actual_Q12 / element.TagetKpi_Q12) * 100, 2);\r\n // }\r\n\r\n this.setState({ tableData: data })\r\n }\r\n\r\n onSave() {\r\n\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID; \r\n\r\n let data = []\r\n //let editedRowsIds = this.state.editedRowsIds;\r\n let editedRowsIds = [0, 1, 2, 3, 4];\r\n let tableData = this.state.tableData;\r\n for (let i = 0; i < editedRowsIds.length; i++) {\r\n data.push(tableData[editedRowsIds[i]])\r\n }\r\n\r\n let records = []\r\n let userEmail = this.props.user.user.Email;\r\n let BENCHMARK_METRICS = this.props.kpiFilters !== undefined ? this.props.kpiFilters.metric : this.state.kpiBenchMarkFilters.metric; //this.props.kpiFilters.metric;\r\n let BENCHMARK_TYPE = this.props.kpiFilters !== undefined ? this.props.kpiFilters.type : this.state.kpiBenchMarkFilters.type; //this.props.kpiFilters.type;\r\n let ACTUAL_FLAG = 2;\r\n for (let i = 0; i < data.length; i++) {\r\n for (let j = 1; j <= 12; j++) {\r\n let obj = {}\r\n obj[\"VS_ID\"] = data[i].VS_ID;\r\n obj[\"DMC_ID\"] = data[i].DMC_ID;\r\n obj[\"USER_ID\"] = userEmail;\r\n obj[\"BENCHMARK_METRICS\"] = BENCHMARK_METRICS;\r\n obj[\"BENCHMARK_TYPE\"] = BENCHMARK_TYPE;\r\n obj[\"ACTUAL_FLAG\"] = ACTUAL_FLAG;\r\n obj[\"QUARTER_NO\"] = 'Q' + j;\r\n obj[\"KPI_NAME\"] = data[i].kpi;\r\n //obj[\"ACTUAL_VALUE\"] = kpiFormatRowWithThousandMillion[kpiRowCustomOrder[data[i]['srNo']]] == 'Million' ? data[i]['Actual_Q' + j] * 1000000 : data[i]['Actual_Q' + j];\r\n obj[\"ACTUAL_VALUE\"] = data[i]['Actual_Q' + j];\r\n obj[\"GAP_VALUE\"] = data[i]['Gap_Q' + j];\r\n obj[\"ATTAINMENT_VALUE\"] = data[i]['Attainment_Q' + j];\r\n obj[\"MODEL_FLAG\"] = this.props.spendDetails.kpi_Model; \r\n records.push(obj)\r\n }\r\n }\r\n\r\n this.setState({ isLoading: true, isSaveInProgress: true, responseMsg: '' })\r\n this.props.defineScopeLoading(true)\r\n\r\n this.props.updateKPIDashBoardTabDataV2(records)\r\n .then((response) => {\r\n this.props.getUpdateKpiGoliveProjectStartDate(dmcId, vsId, userEmail, 'W', this.state.goLiveDate, this.state.startdate)\r\n .then((response) => {\r\n this.loadData()\r\n this.setState({ responseMsg: 'Record/s has been updated successfully', isError: 'No', isLoading: false, isSaveInProgress: false, editedRowsIds: [] })\r\n this.props.defineScopeLoading(false)\r\n this.props.pendingChanges(null)\r\n });\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: this.props.content.error, isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n }\r\n })\r\n }\r\n\r\n handleResetTable() {\r\n this.setState({ responseMsg: '' })\r\n this.loadData()\r\n }\r\n\r\n render() {\r\n let currencySymbol = this.state.currencySymbol;\r\n const userInputPrefix = currencySymbol;\r\n\r\n const userInputSuffix = 'M';\r\n\r\n const numberMask = createNumberMask({\r\n prefix: userInputPrefix + '',\r\n //suffix: ' ' + userInputSuffix,\r\n allowDecimal: true\r\n })\r\n const numberMaskForThousands = createNumberMask({\r\n prefix: '',\r\n suffix: '',\r\n allowDecimal: false\r\n })\r\n\r\n return (\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n {this.state.errorMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n \r\n
\r\n\r\n \r\n\r\n \r\n {this.state.tableData ?\r\n \r\n {this.state.headers.map(el =>
\r\n : null}\r\n
\r\n | {el} | )}\r\n|||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {el.kpi} | \r\nTarget KPI Cumulative SE Targeted SE Estimated Actual Gap Attainment | \r\n {el.TagetKpi_Q1 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q1, 0)) : currencySymbol + convertToMillion(el.TagetKpi_Q1, true)} {el.SE_Targeted_Q1 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Targeted_Q1, 0)) : currencySymbol + convertToMillion(el.SE_Targeted_Q1, true)} {el.SE_Estimated_Q1 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q1, 0)) : currencySymbol + convertToMillion(el.SE_Estimated_Q1, true)}\r\n {el.Gap_Q1 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q1, 0)) : currencySymbol + convertToMillion(el.Gap_Q1, true)} {el.Attainment_Q1 == 0 ? '-' : roundFix(el.Attainment_Q1, 2) + '%'} | \r\n {el.TagetKpi_Q2 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q2, 0)) : currencySymbol + convertToMillion(el.TagetKpi_Q2, true)} {el.SE_Targeted_Q2 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Targeted_Q2, 0)) : currencySymbol + convertToMillion(el.SE_Targeted_Q2, true)} {el.SE_Estimated_Q2 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q2, 0)) : currencySymbol + convertToMillion(el.SE_Estimated_Q2, true)}\r\n {el.Gap_Q2 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q2, 0)) : currencySymbol + convertToMillion(el.Gap_Q2, true)} {el.Attainment_Q2 == 0 ? '-' : roundFix(el.Attainment_Q2, 2) + '%'} | \r\n {el.TagetKpi_Q3 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q3, 0)) : currencySymbol + convertToMillion(el.TagetKpi_Q3, true)} {el.SE_Targeted_Q3 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Targeted_Q3, 0)) : currencySymbol + convertToMillion(el.SE_Targeted_Q3, true)} {el.SE_Estimated_Q3 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q3, 0)) : currencySymbol + convertToMillion(el.SE_Estimated_Q3, true)}\r\n {el.Gap_Q3 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q3, 0)) : currencySymbol + convertToMillion(el.Gap_Q3, true)} {el.Attainment_Q3 == 0 ? '-' : roundFix(el.Attainment_Q3, 2) + '%'} | \r\n {el.TagetKpi_Q4 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q4, 0)) : currencySymbol + convertToMillion(el.TagetKpi_Q4, true)} {el.SE_Targeted_Q4 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Targeted_Q4, 0)) : currencySymbol + convertToMillion(el.SE_Targeted_Q4, true)} {el.SE_Estimated_Q4 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q4, 0)) : currencySymbol + convertToMillion(el.SE_Estimated_Q4, true)}\r\n {el.Gap_Q4 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q4, 0)) : currencySymbol + convertToMillion(el.Gap_Q4, true)} {el.Attainment_Q4 == 0 ? '-' : roundFix(el.Attainment_Q4, 2) + '%'} | \r\n {el.TagetKpi_Q5 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q5, 0)) : currencySymbol + convertToMillion(el.TagetKpi_Q5, true)} {el.SE_Targeted_Q5 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Targeted_Q5, 0)) : currencySymbol + convertToMillion(el.SE_Targeted_Q5, true)} {el.SE_Estimated_Q5 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q5, 0)) : currencySymbol + convertToMillion(el.SE_Estimated_Q5, true)}\r\n {el.Gap_Q5 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q5, 0)) : currencySymbol + convertToMillion(el.Gap_Q5, true)} {el.Attainment_Q5 == 0 ? '-' : roundFix(el.Attainment_Q5, 2) + '%'} | \r\n {el.TagetKpi_Q6 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q6, 0)) : currencySymbol + convertToMillion(el.TagetKpi_Q6, true)} {el.SE_Targeted_Q6 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Targeted_Q6, 0)) : currencySymbol + convertToMillion(el.SE_Targeted_Q6, true)} {el.SE_Estimated_Q6 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q6, 0)) : currencySymbol + convertToMillion(el.SE_Estimated_Q6, true)}\r\n {el.Gap_Q6 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q6, 0)) : currencySymbol + convertToMillion(el.Gap_Q6, true)} {el.Attainment_Q6 == 0 ? '-' : roundFix(el.Attainment_Q6, 2) + '%'} | \r\n {el.TagetKpi_Q7 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q7, 0)) : currencySymbol + convertToMillion(el.TagetKpi_Q7, true)} {el.SE_Targeted_Q7 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Targeted_Q7, 0)) : currencySymbol + convertToMillion(el.SE_Targeted_Q7, true)} {el.SE_Estimated_Q7 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q7, 0)) : currencySymbol + convertToMillion(el.SE_Estimated_Q7, true)}\r\n {el.Gap_Q7 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q7, 0)) : currencySymbol + convertToMillion(el.Gap_Q7, true)} {el.Attainment_Q7 == 0 ? '-' : roundFix(el.Attainment_Q7, 2) + '%'} | \r\n {el.TagetKpi_Q8 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q8, 0)) : currencySymbol + convertToMillion(el.TagetKpi_Q8, true)} {el.SE_Targeted_Q8 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Targeted_Q8, 0)) : currencySymbol + convertToMillion(el.SE_Targeted_Q8, true)} {el.SE_Estimated_Q8 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q8, 0)) : currencySymbol + convertToMillion(el.SE_Estimated_Q8, true)}\r\n {el.Gap_Q8 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q8, 0)) : currencySymbol + convertToMillion(el.Gap_Q8, true)} {el.Attainment_Q8 == 0 ? '-' : roundFix(el.Attainment_Q8, 2) + '%'} | \r\n {el.TagetKpi_Q9 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q9, 0)) : currencySymbol + convertToMillion(el.TagetKpi_Q9, true)} {el.SE_Targeted_Q9 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Targeted_Q9, 0)) : currencySymbol + convertToMillion(el.SE_Targeted_Q9, true)} {el.SE_Estimated_Q9 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q9, 0)) : currencySymbol + convertToMillion(el.SE_Estimated_Q9, true)}\r\n {el.Gap_Q9 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q9, 0)) : currencySymbol + convertToMillion(el.Gap_Q9, true)} {el.Attainment_Q9 == 0 ? '-' : roundFix(el.Attainment_Q9, 2) + '%'} | \r\n {el.TagetKpi_Q10 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q10, 0)) : currencySymbol + convertToMillion(el.TagetKpi_Q10, true)} {el.SE_Targeted_Q10 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Targeted_Q10, 0)) : currencySymbol + convertToMillion(el.SE_Targeted_Q10, true)} {el.SE_Estimated_Q10 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q10, 0)) : currencySymbol + convertToMillion(el.SE_Estimated_Q10, true)}\r\n {el.Gap_Q10 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q10, 0)) : currencySymbol + convertToMillion(el.Gap_Q10, true)} {el.Attainment_Q10 == 0 ? '-' : roundFix(el.Attainment_Q10, 2) + '%'} | \r\n {el.TagetKpi_Q11 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q11, 0)) : currencySymbol + convertToMillion(el.TagetKpi_Q11, true)} {el.SE_Targeted_Q11 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Targeted_Q11, 0)) : currencySymbol + convertToMillion(el.SE_Targeted_Q11, true)} {el.SE_Estimated_Q11 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q11, 0)) : currencySymbol + convertToMillion(el.SE_Estimated_Q11, true)}\r\n {el.Gap_Q11 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q11, 0)) : currencySymbol + convertToMillion(el.Gap_Q11, true)} {el.Attainment_Q11 == 0 ? '-' : roundFix(el.Attainment_Q11, 2) + '%'} | \r\n {el.TagetKpi_Q12 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q12, 0)) : currencySymbol + convertToMillion(el.TagetKpi_Q12, true)} {el.SE_Targeted_Q12 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Targeted_Q12, 0)) : currencySymbol + convertToMillion(el.SE_Targeted_Q12, true)} {el.SE_Estimated_Q12 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q12, 0)) : currencySymbol + convertToMillion(el.SE_Estimated_Q12, true)}\r\n {el.Gap_Q12 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q12, 0)) : currencySymbol + convertToMillion(el.Gap_Q12, true)} {el.Attainment_Q12 == 0 ? '-' : roundFix(el.Attainment_Q12, 2) + '%'} | \r\n\r\n\r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n ui: state.content.ui,\r\n userData: state.valueStory,\r\n user: state.default,\r\n content: state.content.spendAnalysis.worldMap,\r\n focusLabel: state.content.spendAnalysis.enablement.focusLabel,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n kpiFilters: state.kpis.kpiBenchMarkFilters,\r\n kpiLables: state.content.kpiTab\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n resetError: error => dispatch(resetError(error)),\r\n defineScopeLoading: bool => dispatch(defineScopeLoading(bool)),\r\n getKPIDashBoardLoadDataV2: (DMCId, VSId, userEmail) => dispatch(getKPIDashBoardLoadDataV2(DMCId, VSId, userEmail)),\r\n getKPIDashBoardLoadFinalDataV2: (DMCId, VSId, userEmail) => dispatch(getKPIDashBoardLoadFinalDataV2(DMCId, VSId, userEmail)),\r\n updateKPIDashBoardTabDataV2: (records) => dispatch(updateKPIDashBoardTabDataV2(records)),\r\n pendingChanges: changes => dispatch(pendingChanges(changes)),\r\n getUpdateKpiGoliveProjectStartDate: (DMCId, VSId, userEmail, ReadWriteFlag, goLiveDate, projectStartDate) => dispatch(getUpdateKpiGoliveProjectStartDate(DMCId, VSId, userEmail, ReadWriteFlag, goLiveDate, projectStartDate)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(KPIDashboardV2)","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n getKPIDashBoardLoadDataV2,\r\n getKPIDashBoardLoadFinalDataV2,\r\n updateKPIDashBoardTabDataV2,\r\n getUpdateKpiGoliveProjectStartDate\r\n} from 'actions/kpiActions'\r\nimport {\r\n resetError,\r\n defineScopeLoading,\r\n pendingChanges\r\n} from 'actions/spendActions'\r\nimport Select from 'react-select'\r\nimport { roundFix, round, formatThousands, addCurrencyMask, convertToNumber, convertToMillion, onChangeRemoveMask } from 'utils/Utils'\r\nimport reactSelectCjsDev from 'react-select/dist/react-select.cjs.dev';\r\nimport { path, routes, kpiRowCustomOrder, kpiFormatRowWithThousandMillion, kpiTargetShortNames } from 'Constants'\r\nimport classNames from \"classnames\";\r\nimport Button from 'UI/ButtonWithoutLoader'\r\nimport Popup from \"reactjs-popup\";\r\nimport MaskedInput from 'react-text-mask'\r\nimport createNumberMask from 'text-mask-addons/dist/createNumberMask'\r\nimport DatePicker from 'react-datepicker';\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\n\r\nclass KPIDashboardManualV2 extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n headers: ['KPI', 'Metric', 'Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8', 'Q9', 'Q10', 'Q11', 'Q12'],\r\n //quaterly data may be added revisit logic \r\n colGroupYearly: [{ key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 2, value: 'Year1' }, { key: 2, value: 'Year2' }, { key: 2, value: 'Year3' }],\r\n tableData: [],\r\n editedRowsIds: [],\r\n selectedBPValue: 'Average 50%',\r\n metricValues: [],\r\n selectedMetricValue: 'ALL',\r\n selectedBPFlag: 'AVERAGE',\r\n kpiBenchMarkFilters: { metric: 'ALL', type: 'AVERAGE' },\r\n startdate: null,\r\n goLiveDate: null,\r\n }\r\n this.loadData = this.loadData.bind(this);\r\n this.createTableData = this.createTableData.bind(this);\r\n this.createTableDataObject = this.createTableDataObject.bind(this);\r\n this.handleActualValChange = this.handleActualValChange.bind(this);\r\n this.onSave = this.onSave.bind(this);\r\n this.setStartDate = this.setStartDate.bind(this);\r\n this.setGoLiveDate = this.setGoLiveDate.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData()\r\n this.setState({ currencySymbol: this.props.spendDetails.currentActiveRequest !== undefined ? this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()] : '' })\r\n }\r\n\r\n setStartDate(date) {\r\n this.props.pendingChanges(true)\r\n var formattedDate = this.convertToServerTimeZone(date);\r\n this.setState({ startdate: formattedDate, isSaveInProgress: true, responseMsg: \"Pending changes. Click save to update KPIs.\", })\r\n }\r\n\r\n setGoLiveDate(date) {\r\n this.props.pendingChanges(true)\r\n var formattedDate = this.convertToServerTimeZone(date);\r\n //alert(formattedDate);\r\n this.setState({ goLiveDate: formattedDate, isSaveInProgress: true, responseMsg: \"Pending changes. Click save to update KPIs.\", })\r\n }\r\n\r\n convertToServerTimeZone(date) {\r\n var newDate = new Date(date);\r\n var tt = new Date();\r\n \r\n if (Intl.DateTimeFormat().resolvedOptions().timeZone == 'America/New_York')\r\n return date;\r\n\r\n var dt = new Date(Date.UTC(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), tt.getHours(), tt.getMinutes(), tt.getSeconds()));//new Date(1458619200000);\r\n //console.log(dt); // Gives Tue Mar 22 2016 09:30:00 GMT+0530 (IST)\r\n\r\n dt.setTime(dt.getTime() + dt.getTimezoneOffset() * 60 * 1000);\r\n //console.log(dt); // Gives Tue Mar 22 2016 04:00:00 GMT+0530 (IST)\r\n\r\n var offset = -300; //Timezone offset for EST in minutes.\r\n var estDate = new Date(dt.getTime() + offset * 60 * 1000);\r\n //console.log(estDate);\r\n \r\n return estDate;\r\n }\r\n\r\n loadData() {\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let user = this.props.user.user.Email;\r\n\r\n this.props.defineScopeLoading(true)\r\n this.setState({ isLoading: true })\r\n this.props.getKPIDashBoardLoadFinalDataV2(dmcId, vsId, user)\r\n .then((response) => {\r\n if (response.data.Result.length > 0) {\r\n let spData = response.data.Result;\r\n let tableData = this.createTableData(spData);\r\n this.props.defineScopeLoading(false);\r\n // let goLiveDate = spData[0][\"GO_LIVE_DATE\"] !== null ? new Date(spData[0][\"GO_LIVE_DATE\"]) : null;\r\n // let projectStartDate = spData[0][\"PROJECT_START_DATE\"] !== null ? new Date(spData[0][\"PROJECT_START_DATE\"]) : null;\r\n this.props.getUpdateKpiGoliveProjectStartDate(dmcId, vsId, user, 'R', null, null)\r\n .then((response) => {\r\n var data = response.data.Result[0];\r\n let goLiveDate = data.GO_LIVE_DATE !== null ? this.convertToServerTimeZone(new Date(data.GO_LIVE_DATE)) : null;\r\n let projectStartDate = data.PROJECT_START_DATE !== null ? this.convertToServerTimeZone(new Date(data.PROJECT_START_DATE)) : null;\r\n this.setState({ tableData: tableData, isLoading: false, startdate: projectStartDate, goLiveDate: goLiveDate })\r\n });\r\n } else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'No Records Found. Please navigate to the Your Spend File Tab then Enablement Strategy Wizard Sub-tab then navigate back to this page. The data will appear if the data does not appear email sap_ism_value_experience@sap.com.', isError: 'Yes', isLoading: false })\r\n }\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n }\r\n })\r\n }\r\n\r\n createTableData(spData) {\r\n let tableData = [];\r\n\r\n //create an array with unique kpi names from sp data\r\n let kpiArr = [...new Set(spData.map(item => item.KPI_NAME))];\r\n\r\n //for every unique kpi name create table data for 12 quaters\r\n for (let i = 0; i < kpiArr.length; i++) {\r\n let temp = spData.filter(item => item.KPI_NAME == kpiArr[i])\r\n let obj = this.createTableDataObject(temp)\r\n tableData.push(obj)\r\n }\r\n //tableData.sort((a, b) => (a.srNo > b.srNo) ? 1 : -1)//sort the table always by sr_no\r\n\r\n\r\n tableData.sort((a, b) => kpiRowCustomOrder[a.srNo] - kpiRowCustomOrder[b.srNo]);\r\n\r\n return tableData;\r\n }\r\n\r\n createTableDataObject(kpiArr) {\r\n let obj = {}\r\n for (let i = 0; i < kpiArr.length; i++) {\r\n obj.VS_ID = kpiArr[i]['VS_ID']\r\n obj.DMC_ID = kpiArr[i]['DMC_ID']\r\n obj.kpi = kpiArr[i]['KPI_NAME']\r\n obj.QUARTER_NO = kpiArr[i]['QUARTER_NO']\r\n obj.srNo = kpiArr[i]['SR_NO']\r\n obj.HR = 'hr'\r\n for (let j = 1; j <= 12; j++) {\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['TagetKpi_Q' + j] = kpiArr[i]['TARGET_KPI_CUMULATIVE']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['PLANNED_Q' + j] = kpiArr[i]['PLANNED']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['SE_Estimated_Q' + j] = kpiArr[i]['SE_ESTIMATED']\r\n //if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['Actual_Q' + j] = kpiArr[i]['SR_NO'] % 2 == 0 ? kpiArr[i]['ACTUAL_VALUE'] / 1000000 : kpiArr[i]['ACTUAL_VALUE']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['Actual_Q' + j] = kpiArr[i]['ACTUAL_VALUE']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['Gap_Q' + j] = kpiArr[i]['GAP_VALUE']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['Attainment_Q' + j] = kpiArr[i]['ATTAINMENT_VALUE']\r\n }\r\n }\r\n return obj;\r\n }\r\n\r\n handleActualValChange(element) {\r\n let id = element.target.id;\r\n let editedRowsIds = this.state.editedRowsIds;\r\n let cellId = element.target.attributes.cellId.nodeValue;\r\n //let val = kpiFormatRowWithThousandMillion[id] == 'Million' ? onChangeRemoveMask(element, '') : onChangeRemoveMask(element, this.state.currencySymbol);\r\n let val = onChangeRemoveMask(element, this.state.currencySymbol);\r\n if (val == \"\") val = null;\r\n let data = this.state.tableData;\r\n if (data[id][cellId] != val) {\r\n data[id][cellId] = val;\r\n //save the edited row id number\r\n if (!editedRowsIds.includes(id)) editedRowsIds.push(id);\r\n this.runCalcFormulae(data[id], id, data)\r\n this.props.pendingChanges(true)\r\n this.setState({ editedRowsIds: editedRowsIds, isSaveInProgress: true, isError: 'No', responseMsg: \"Pending changes. Click save to update KPI Dashboard.\" })\r\n }\r\n }\r\n\r\n runCalcFormulae(obj, id, data) {\r\n let element = data[id];\r\n\r\n //Gap calculation formulae kpi - actual\r\n //if (id % 2 == 0) {\r\n\r\n //if (kpiFormatRowWithThousandMillion[id] == 'Thousand') {\r\n element.Gap_Q1 = element.TagetKpi_Q1 - element.Actual_Q1;\r\n element.Gap_Q2 = element.TagetKpi_Q2 - element.Actual_Q2;\r\n element.Gap_Q3 = element.TagetKpi_Q3 - element.Actual_Q3;\r\n element.Gap_Q4 = element.TagetKpi_Q4 - element.Actual_Q4;\r\n element.Gap_Q5 = element.TagetKpi_Q5 - element.Actual_Q5;\r\n element.Gap_Q6 = element.TagetKpi_Q6 - element.Actual_Q6;\r\n element.Gap_Q7 = element.TagetKpi_Q7 - element.Actual_Q7;\r\n element.Gap_Q8 = element.TagetKpi_Q8 - element.Actual_Q8;\r\n element.Gap_Q9 = element.TagetKpi_Q9 - element.Actual_Q9;\r\n element.Gap_Q10 = element.TagetKpi_Q10 - element.Actual_Q10;\r\n element.Gap_Q11 = element.TagetKpi_Q11 - element.Actual_Q11;\r\n element.Gap_Q12 = element.TagetKpi_Q12 - element.Actual_Q12;\r\n // } else {\r\n // element.Gap_Q1 = element.TagetKpi_Q1 - element.Actual_Q1 * 1000000;//in odd rows the values are in millions so mutiply the value by 10^6\r\n // element.Gap_Q2 = element.TagetKpi_Q2 - element.Actual_Q2 * 1000000;\r\n // element.Gap_Q3 = element.TagetKpi_Q3 - element.Actual_Q3 * 1000000;\r\n // element.Gap_Q4 = element.TagetKpi_Q4 - element.Actual_Q4 * 1000000;\r\n // element.Gap_Q5 = element.TagetKpi_Q5 - element.Actual_Q5 * 1000000;\r\n // element.Gap_Q6 = element.TagetKpi_Q6 - element.Actual_Q6 * 1000000;\r\n // element.Gap_Q7 = element.TagetKpi_Q7 - element.Actual_Q7 * 1000000;\r\n // element.Gap_Q8 = element.TagetKpi_Q8 - element.Actual_Q8 * 1000000;\r\n // element.Gap_Q9 = element.TagetKpi_Q9 - element.Actual_Q9 * 1000000;\r\n // element.Gap_Q10 = element.TagetKpi_Q10 - element.Actual_Q10 * 1000000;\r\n // element.Gap_Q11 = element.TagetKpi_Q11 - element.Actual_Q11 * 1000000;\r\n // element.Gap_Q12 = element.TagetKpi_Q12 - element.Actual_Q12 * 1000000;\r\n // }\r\n\r\n\r\n //Attainment clac formula Actual/kpi\r\n //if (id % 2 == 0) {\r\n \r\n \r\n // if (kpiFormatRowWithThousandMillion[id] == 'Thousand') {\r\n element.Attainment_Q1 = roundFix((element.Actual_Q1 / element.TagetKpi_Q1) * 100, 2);//we multiply the result with 100 and roundFix it off to 2 decimal bcs its % value\r\n element.Attainment_Q2 = roundFix((element.Actual_Q2 / element.TagetKpi_Q2) * 100, 2);\r\n element.Attainment_Q3 = roundFix((element.Actual_Q3 / element.TagetKpi_Q3) * 100, 2);\r\n element.Attainment_Q4 = roundFix((element.Actual_Q4 / element.TagetKpi_Q4) * 100, 2);\r\n element.Attainment_Q5 = roundFix((element.Actual_Q5 / element.TagetKpi_Q5) * 100, 2);\r\n element.Attainment_Q6 = roundFix((element.Actual_Q6 / element.TagetKpi_Q6) * 100, 2);\r\n element.Attainment_Q7 = roundFix((element.Actual_Q7 / element.TagetKpi_Q7) * 100, 2);\r\n element.Attainment_Q8 = roundFix((element.Actual_Q8 / element.TagetKpi_Q8) * 100, 2);\r\n element.Attainment_Q9 = roundFix((element.Actual_Q9 / element.TagetKpi_Q9) * 100, 2);\r\n element.Attainment_Q10 = roundFix((element.Actual_Q10 / element.TagetKpi_Q10) * 100, 2);\r\n element.Attainment_Q11 = roundFix((element.Actual_Q11 / element.TagetKpi_Q11) * 100, 2);\r\n element.Attainment_Q12 = roundFix((element.Actual_Q12 / element.TagetKpi_Q12) * 100, 2);\r\n // } else {\r\n // element.Attainment_Q1 = roundFix((1000000 * element.Actual_Q1 / element.TagetKpi_Q1) * 100, 2);//we multiply the result with 100 and roundFix it off to 2 decimal bcs its % value\r\n // element.Attainment_Q2 = roundFix((1000000 * element.Actual_Q2 / element.TagetKpi_Q2) * 100, 2);\r\n // element.Attainment_Q3 = roundFix((1000000 * element.Actual_Q3 / element.TagetKpi_Q3) * 100, 2);\r\n // element.Attainment_Q4 = roundFix((1000000 * element.Actual_Q4 / element.TagetKpi_Q4) * 100, 2);\r\n // element.Attainment_Q5 = roundFix((1000000 * element.Actual_Q5 / element.TagetKpi_Q5) * 100, 2);\r\n // element.Attainment_Q6 = roundFix((1000000 * element.Actual_Q6 / element.TagetKpi_Q6) * 100, 2);\r\n // element.Attainment_Q7 = roundFix((1000000 * element.Actual_Q7 / element.TagetKpi_Q7) * 100, 2);\r\n // element.Attainment_Q8 = roundFix((1000000 * element.Actual_Q8 / element.TagetKpi_Q8) * 100, 2);\r\n // element.Attainment_Q9 = roundFix((1000000 * element.Actual_Q9 / element.TagetKpi_Q9) * 100, 2);\r\n // element.Attainment_Q10 = roundFix((1000000 * element.Actual_Q10 / element.TagetKpi_Q10) * 100, 2);\r\n // element.Attainment_Q11 = roundFix((1000000 * element.Actual_Q11 / element.TagetKpi_Q11) * 100, 2);\r\n // element.Attainment_Q12 = roundFix((1000000 * element.Actual_Q12 / element.TagetKpi_Q12) * 100, 2);\r\n // }\r\n\r\n this.setState({ tableData: data })\r\n }\r\n\r\n onSave() {\r\n\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID; \r\n\r\n let data = []\r\n //let editedRowsIds = this.state.editedRowsIds;\r\n let editedRowsIds = [0, 1, 2, 3, 4];\r\n let tableData = this.state.tableData;\r\n for (let i = 0; i < editedRowsIds.length; i++) {\r\n data.push(tableData[editedRowsIds[i]])\r\n }\r\n\r\n let records = []\r\n let userEmail = this.props.user.user.Email;\r\n let BENCHMARK_METRICS = this.props.kpiFilters !== undefined ? this.props.kpiFilters.metric : this.state.kpiBenchMarkFilters.metric; //this.props.kpiFilters.metric;\r\n let BENCHMARK_TYPE = this.props.kpiFilters !== undefined ? this.props.kpiFilters.type : this.state.kpiBenchMarkFilters.type; //this.props.kpiFilters.type;\r\n let ACTUAL_FLAG = 2;\r\n for (let i = 0; i < data.length; i++) {\r\n for (let j = 1; j <= 12; j++) {\r\n let obj = {}\r\n obj[\"VS_ID\"] = data[i].VS_ID;\r\n obj[\"DMC_ID\"] = data[i].DMC_ID;\r\n obj[\"USER_ID\"] = userEmail;\r\n obj[\"BENCHMARK_METRICS\"] = BENCHMARK_METRICS;\r\n obj[\"BENCHMARK_TYPE\"] = BENCHMARK_TYPE;\r\n obj[\"ACTUAL_FLAG\"] = ACTUAL_FLAG;\r\n obj[\"QUARTER_NO\"] = 'Q' + j;\r\n obj[\"KPI_NAME\"] = data[i].kpi;\r\n //obj[\"ACTUAL_VALUE\"] = data[i]['srNo'] % 2 == 0 ? data[i]['Actual_Q' + j] * 1000000 : data[i]['Actual_Q' + j];\r\n //obj[\"ACTUAL_VALUE\"] = kpiFormatRowWithThousandMillion[kpiRowCustomOrder[data[i]['srNo']]] == 'Million' ? data[i]['Actual_Q' + j] * 1000000 : data[i]['Actual_Q' + j];\r\n obj[\"ACTUAL_VALUE\"] = data[i]['Actual_Q' + j];\r\n obj[\"GAP_VALUE\"] = data[i]['Gap_Q' + j];\r\n obj[\"ATTAINMENT_VALUE\"] = data[i]['Attainment_Q' + j];\r\n obj[\"MODEL_FLAG\"] = this.props.spendDetails.kpi_Model; \r\n records.push(obj)\r\n }\r\n }\r\n\r\n this.setState({ isLoading: true, isSaveInProgress: true, responseMsg: '' })\r\n this.props.defineScopeLoading(true)\r\n\r\n this.props.updateKPIDashBoardTabDataV2(records)\r\n .then((response) => {\r\n this.props.getUpdateKpiGoliveProjectStartDate(dmcId, vsId, userEmail, 'W', this.state.goLiveDate, this.state.startdate)\r\n .then((response) => {\r\n this.loadData()\r\n this.setState({ responseMsg: 'Record/s has been updated successfully', isError: 'No', isLoading: false, isSaveInProgress: false, editedRowsIds: [] })\r\n this.props.defineScopeLoading(false)\r\n this.props.pendingChanges(null)\r\n });\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: this.props.content.error, isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n }\r\n })\r\n }\r\n\r\n handleResetTable() {\r\n this.setState({ responseMsg: '' })\r\n this.loadData()\r\n }\r\n\r\n render() {\r\n let currencySymbol = this.state.currencySymbol;\r\n const userInputPrefix = currencySymbol;\r\n\r\n const userInputSuffix = 'M';\r\n\r\n const numberMask = createNumberMask({\r\n prefix: userInputPrefix + '',\r\n //suffix: ' ' + userInputSuffix,\r\n allowDecimal: true\r\n })\r\n const numberMaskForThousands = createNumberMask({\r\n prefix: '',\r\n suffix: '',\r\n allowDecimal: false\r\n })\r\n\r\n return (\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n {this.state.errorMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n \r\n this.setGoLiveDate(date)} />\r\n
\r\n {this.props.kpiLables.goLiveDate}
\r\n \r\n this.setStartDate(date)} />\r\n
\r\n {this.props.kpiLables.projectStartDate}
\r\n \r\n
\r\n \r\n {this.state.tableData ?\r\n \r\n {this.state.headers.map(el =>
\r\n : null}\r\n
\r\n | {el} | )}\r\n|||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {kpiTargetShortNames[el.kpi]} | \r\n Planned Target KPI KPI Estimate Actual Gap Attainment | \r\n {el.PLANNED_Q1 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q1, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q1, 0))} {el.TagetKpi_Q1 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q1, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q1, 0))} {el.SE_Estimated_Q1 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q1, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q1, 0))}\r\n {el.Gap_Q1 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q1, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q1, 0))} {el.Attainment_Q1 == 0 ? '-' : roundFix(el.Attainment_Q1, 2) + '%'} | \r\n {el.PLANNED_Q2 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q2, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q2, 0))} {el.TagetKpi_Q2 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q2, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q2, 0))} {el.SE_Estimated_Q2 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q2, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q2, 0))}\r\n {el.Gap_Q2 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q2, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q2, 0))} {el.Attainment_Q2 == 0 ? '-' : roundFix(el.Attainment_Q2, 2) + '%'} | \r\n {el.PLANNED_Q3 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q3, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q3, 0))} {el.TagetKpi_Q3 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q3, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q3, 0))} {el.SE_Estimated_Q3 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q3, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q3, 0))}\r\n {el.Gap_Q3 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q3, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q3, 0))} {el.Attainment_Q3 == 0 ? '-' : roundFix(el.Attainment_Q3, 2) + '%'} | \r\n {el.PLANNED_Q4 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q4, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q4, 0))} {el.TagetKpi_Q4 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q4, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q4, 0))} {el.SE_Estimated_Q4 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q4, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q4, 0))}\r\n {el.Gap_Q4 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q4, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q4, 0))} {el.Attainment_Q4 == 0 ? '-' : roundFix(el.Attainment_Q4, 2) + '%'} | \r\n {el.PLANNED_Q5 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q5, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q5, 0))} {el.TagetKpi_Q5 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q5, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q5, 0))} {el.SE_Estimated_Q5 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q5, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q5, 0))}\r\n {el.Gap_Q5 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q5, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q5, 0))} {el.Attainment_Q5 == 0 ? '-' : roundFix(el.Attainment_Q5, 2) + '%'} | \r\n {el.PLANNED_Q6 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q6, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q6, 0))} {el.TagetKpi_Q6 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q6, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q6, 0))} {el.SE_Estimated_Q6 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q6, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q6, 0))}\r\n {el.Gap_Q6 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q6, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q6, 0))} {el.Attainment_Q6 == 0 ? '-' : roundFix(el.Attainment_Q6, 2) + '%'} | \r\n {el.PLANNED_Q7 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q7, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q7, 0))} {el.TagetKpi_Q7 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q7, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q7, 0))} {el.SE_Estimated_Q7 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q7, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q7, 0))}\r\n {el.Gap_Q7 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q7, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q7, 0))} {el.Attainment_Q7 == 0 ? '-' : roundFix(el.Attainment_Q7, 2) + '%'} | \r\n {el.PLANNED_Q8 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q8, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q8, 0))} {el.TagetKpi_Q8 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q8, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q8, 0))} {el.SE_Estimated_Q8 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q8, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q8, 0))}\r\n {el.Gap_Q8 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q8, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q8, 0))} {el.Attainment_Q8 == 0 ? '-' : roundFix(el.Attainment_Q8, 2) + '%'} | \r\n {el.PLANNED_Q9 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q9, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q9, 0))} {el.TagetKpi_Q9 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q9, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q9, 0))} {el.SE_Estimated_Q9 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q9, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q9, 0))}\r\n {el.Gap_Q9 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q9, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q9, 0))} {el.Attainment_Q9 == 0 ? '-' : roundFix(el.Attainment_Q9, 2) + '%'} | \r\n {el.PLANNED_Q10 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q10, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q10, 0))} {el.TagetKpi_Q10 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q10, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q10, 0))} {el.SE_Estimated_Q10 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q10, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q10, 0))}\r\n {el.Gap_Q10 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q10, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q10, 0))} {el.Attainment_Q10 == 0 ? '-' : roundFix(el.Attainment_Q10, 2) + '%'} | \r\n {el.PLANNED_Q11 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q11, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q11, 0))} {el.TagetKpi_Q11 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q11, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q11, 0))} {el.SE_Estimated_Q11 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q11, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q11, 0))}\r\n {el.Gap_Q11 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q11, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q11, 0))} {el.Attainment_Q11 == 0 ? '-' : roundFix(el.Attainment_Q11, 2) + '%'} | \r\n {el.PLANNED_Q12 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q12, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q12, 0))} {el.TagetKpi_Q12 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q12, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q12, 0))} {el.SE_Estimated_Q12 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q12, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q12, 0))}\r\n {el.Gap_Q12 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q12, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q12, 0))} {el.Attainment_Q12 == 0 ? '-' : roundFix(el.Attainment_Q12, 2) + '%'} | \r\n\r\n\r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n ui: state.content.ui,\r\n userData: state.valueStory,\r\n user: state.default,\r\n content: state.content.spendAnalysis.worldMap,\r\n focusLabel: state.content.spendAnalysis.enablement.focusLabel,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n kpiFilters: state.kpis.kpiBenchMarkFilters,\r\n kpiLables: state.content.kpiTab\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n resetError: error => dispatch(resetError(error)),\r\n defineScopeLoading: bool => dispatch(defineScopeLoading(bool)),\r\n getKPIDashBoardLoadDataV2: (DMCId, VSId, userEmail) => dispatch(getKPIDashBoardLoadDataV2(DMCId, VSId, userEmail)),\r\n getKPIDashBoardLoadFinalDataV2: (DMCId, VSId, userEmail) => dispatch(getKPIDashBoardLoadFinalDataV2(DMCId, VSId, userEmail)),\r\n \r\n updateKPIDashBoardTabDataV2: (records) => dispatch(updateKPIDashBoardTabDataV2(records)),\r\n pendingChanges: changes => dispatch(pendingChanges(changes)),\r\n getUpdateKpiGoliveProjectStartDate: (DMCId, VSId, userEmail, ReadWriteFlag, goLiveDate, projectStartDate) => dispatch(getUpdateKpiGoliveProjectStartDate(DMCId, VSId, userEmail, ReadWriteFlag, goLiveDate, projectStartDate)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(KPIDashboardManualV2)","import * as d3 from 'd3'\r\nimport { convertToMillion, formatThousands } from 'utils/Utils'\r\n\r\nconst KPILineChart = (drawXY, data, fillColor, value, element, currency, Ylabel, YMaxValue) => {\r\n if (data !== undefined) {\r\n var windowWidth = 1280;\r\n var windowHeight = 300;\r\n\r\n var margin = { top: 40, right: 0, bottom: 10, left: 70 }\r\n var svg = d3.select(\"#\" + element.value)\r\n //.attr(\"viewBox\", '0 0 1050 350')\r\n .attr(\"width\", windowWidth)\r\n .attr(\"height\", windowHeight)\r\n .attr('preserveAspectRatio', 'xMinYMin')\r\n .append(\"g\")\r\n .attr(\"transform\",\r\n \"translate(\" + margin.left + \",\" + margin.top + \")\");\r\n\r\n var x = d3.scaleBand()\r\n .range([0, windowWidth])\r\n .padding(1)\r\n .domain(data.map(function (d) {\r\n return d.QUARTER_NO;\r\n }));\r\n \r\n // var c1= d3.max(data, function (d) { return d[\"KPI_VALUE\"]; }); \r\n // var maxValue=c1;\r\n var maxValue=YMaxValue;\r\n \r\n var y = d3.scaleLinear()\r\n .domain([0,maxValue]) // Put here maximum value from all data\r\n .range([windowHeight, 0]).nice();\r\n\r\n if (drawXY) {\r\n\r\n svg.append(\"g\")\r\n .attr(\"class\", \"axis\")\r\n .attr(\"fill\", \"#666\")\r\n //.style(\"font-weight\", 600)\r\n .call(d3.axisLeft(y).ticks(5,\"s\").tickFormat(function(d){\r\n return element.value === 'KPI_SPEND' ? currency + convertToMillion(d, true) : formatThousands(d);\r\n }))\r\n .append(\"text\")\r\n .attr(\"transform\", \"rotate(-90)\")\r\n .attr(\"y\", 0 - 60)\r\n .attr(\"x\", 0 - (windowHeight / 2))\r\n .attr(\"dy\", \"1em\")\r\n .style(\"text-anchor\", \"middle\")\r\n .text(Ylabel);\r\n\r\n svg.append(\"g\")\r\n .attr(\"class\", \"axis\")\r\n .attr(\"fill\", \"#666\")\r\n //.style(\"font-weight\", 600)\r\n .attr(\"transform\", \"translate(0,\" + windowHeight + \")\")\r\n .call(d3.axisBottom(x).tickFormat(function (d) {\r\n return d;\r\n }))\r\n\r\n }\r\n\r\n // Add the line\r\n svg.append(\"path\")\r\n .datum(data)\r\n .attr(\"fill\", \"none\")\r\n .attr(\"stroke\", fillColor)\r\n .attr(\"stroke-width\", 1.5)\r\n .attr(\"d\", d3.line() \r\n .x(function (d) {\r\n return x(d[\"QUARTER_NO\"])\r\n })\r\n .y(function (d) {\r\n return y(d[value])\r\n })\r\n .defined(function (d) { return d[value] !== 0 && d[value] !== null; })\r\n )\r\n\r\n // create a tooltip\r\n var Tooltip = d3.select(\"#\" + element.value)\r\n .append(\"div\")\r\n .style(\"opacity\", 1)\r\n .attr(\"class\", \"tooltip\")\r\n .style(\"background-color\", \"white\")\r\n .style(\"border\", \"solid\")\r\n .style(\"border-width\", \"2px\")\r\n .style(\"border-radius\", \"5px\")\r\n .style(\"padding\", \"5px\")\r\n\r\n // Three function that change the tooltip when user hover / move / leave a cell\r\n var mouseover = function(d) {\r\n Tooltip\r\n .style(\"opacity\", 1)\r\n }\r\n var mousemove = function(d) {\r\n Tooltip\r\n .html(\"Exact value: \" + d[value])\r\n .style(\"left\", (d3.mouse(this)[0]+70) + \"px\")\r\n .style(\"top\", (d3.mouse(this)[1]) + \"px\")\r\n }\r\n var mouseleave = function(d) {\r\n Tooltip\r\n .style(\"opacity\", 0)\r\n }\r\n\r\n // Add the points\r\n svg.append(\"g\")\r\n .selectAll(\"dot\")\r\n .data(data)\r\n .enter()\r\n .append(\"circle\")\r\n .attr(\"class\", \"dot\")\r\n .attr(\"cx\", function (d) {\r\n return x(d[\"QUARTER_NO\"])\r\n })\r\n .attr(\"cy\", function (d) {\r\n return y(d[value])\r\n }) \r\n .attr(\"r\", 5)\r\n .attr(\"fill\", fillColor)\r\n .on(\"mouseover\", mouseover)\r\n .on(\"mousemove\", mousemove)\r\n .on(\"mouseleave\", mouseleave)\r\n .style(\"display\", function(d) { return (d[value] === 0 || d[value] === null) ? \"none\" : null; })\r\n\r\n \r\n \r\n // Add data point text \r\n // svg.append(\"g\")\r\n // .attr(\"fill\", \"#666\")\r\n // .selectAll(\"g\")\r\n // .data(data)\r\n // .join(\"g\")\r\n // .attr(\"transform\",\r\n // function (d) {\r\n // return value === 'KPI_VALUE'? `translate(${x(d[\"QUARTER_NO\"])}, ${y(d[value]) - 10 })` \r\n // : value === 'ESTIMATED_VALUE' ? `translate(${x(d[\"QUARTER_NO\"])}, ${y(d[value]) + 15})` : `translate(${x(d[\"QUARTER_NO\"]) - 10}, ${y(d[value]) - 10})` })\r\n // .attr(\"opacity\", 1).append(\"text\")\r\n // .style(\"font-size\", \"0.625rem\")\r\n // .style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\")\r\n // .text(function (d) {\r\n // return element.value === 'KPI_SPEND' ? currency + convertToMillion(d[value], true) : formatThousands(Math.round(d[value]));\r\n // });\r\n\r\n svg.append(\"text\") \r\n .attr(\"x\", (windowWidth / 2)) \r\n .attr(\"y\", (-20))\r\n .attr(\"text-anchor\", \"middle\") \r\n .style(\"font-size\", \"0.875rem\") \r\n .attr(\"fill\",'currentcolor') \r\n .style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\")\r\n .text(element.header);\r\n\r\n // For legend\r\n // switch (value) { \r\n // case 'ESTIMATED_VALUE':\r\n // svg.append(\"circle\").attr(\"cx\", 260).attr(\"cy\", windowHeight + 40).attr(\"r\", 6).style(\"fill\", fillColor)\r\n // svg.append(\"text\").attr(\"x\", 280).attr(\"y\", windowHeight + 40).attr(\"class\", \"axis\").style(\"font-size\", \"0.625rem\").style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\").text(element.estLegend).attr(\"fill\", \"#666\").attr(\"alignment-baseline\", \"middle\")\r\n // break\r\n // case 'ACTUAL_VALUE':\r\n // svg.append(\"circle\").attr(\"cx\", 380).attr(\"cy\", windowHeight + 40).attr(\"r\", 6).style(\"fill\", fillColor)\r\n // svg.append(\"text\").attr(\"x\", 400).attr(\"y\", windowHeight + 40).attr(\"class\", \"axis\").style(\"font-size\", \"0.625rem\").style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\").text(element.actualLegend).attr(\"fill\", \"#666\").attr(\"alignment-baseline\", \"middle\")\r\n // break \r\n // case 'KPI_VALUE':\r\n // svg.append(\"circle\").attr(\"cx\", 500).attr(\"cy\", windowHeight + 40).attr(\"r\", 6).style(\"fill\", fillColor)\r\n // svg.append(\"text\").attr(\"x\", 520).attr(\"y\", windowHeight + 40).attr(\"class\", \"axis\").style(\"font-size\", \"0.625rem\").style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\").text(element.legend).attr(\"fill\", \"#666\").attr(\"alignment-baseline\", \"middle\")\r\n // break \r\n // default:\r\n // break\r\n // } \r\n }\r\n return svg;\r\n}\r\n\r\nexport default KPILineChart\r\n\r\n","import React from \"react\";\r\nimport { convertToMillion, formatThousands } from 'utils/Utils'\r\nimport Popup from \"reactjs-popup\";\r\nimport { kpiChartTableLableIcon } from 'Constants'\r\n\r\nclass KPIChartTable extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n {\r\n this.state={\r\n headers: ['', 'Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8', 'Q9', 'Q10', 'Q11', 'Q12']\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n var currencySymbol = this.props.currencySymbols !== undefined ? this.props.currencySymbols : '' \r\n var isSpendType = this.props.type === 'Spend' ? true : false;\r\n return (\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n {this.state.errorMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n \r\n this.setGoLiveDate(date)} />\r\n
\r\n {this.props.kpiLables.goLiveDate}
\r\n \r\n this.setStartDate(date)} />\r\n
\r\n {this.props.kpiLables.projectStartDate}
\r\n \r\n
\r\n \r\n {this.state.tableData ?\r\n \r\n {this.state.headers.map(el =>
\r\n : null}\r\n
\r\n | {el} | )}\r\n|||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {kpiTargetShortNames[el.kpi]} | \r\n Planned Target KPI KPI Estimate Actual Gap Attainment | \r\n {el.PLANNED_Q1 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q1, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q1, 0))} {el.TagetKpi_Q1 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q1, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q1, 0))} {el.SE_Estimated_Q1 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q1, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q1, 0))}\r\n {el.Gap_Q1 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q1, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q1, 0))} {el.Attainment_Q1 == 0 ? '-' : roundFix(el.Attainment_Q1, 2) + '%'} | \r\n {el.PLANNED_Q2 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q2, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q2, 0))} {el.TagetKpi_Q2 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q2, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q2, 0))} {el.SE_Estimated_Q2 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q2, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q2, 0))}\r\n {el.Gap_Q2 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q2, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q2, 0))} {el.Attainment_Q2 == 0 ? '-' : roundFix(el.Attainment_Q2, 2) + '%'} | \r\n {el.PLANNED_Q3 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q3, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q3, 0))} {el.TagetKpi_Q3 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q3, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q3, 0))} {el.SE_Estimated_Q3 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q3, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q3, 0))}\r\n {el.Gap_Q3 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q3, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q3, 0))} {el.Attainment_Q3 == 0 ? '-' : roundFix(el.Attainment_Q3, 2) + '%'} | \r\n {el.PLANNED_Q4 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q4, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q4, 0))} {el.TagetKpi_Q4 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q4, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q4, 0))} {el.SE_Estimated_Q4 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q4, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q4, 0))}\r\n {el.Gap_Q4 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q4, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q4, 0))} {el.Attainment_Q4 == 0 ? '-' : roundFix(el.Attainment_Q4, 2) + '%'} | \r\n {el.PLANNED_Q5 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q5, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q5, 0))} {el.TagetKpi_Q5 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q5, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q5, 0))} {el.SE_Estimated_Q5 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q5, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q5, 0))}\r\n {el.Gap_Q5 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q5, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q5, 0))} {el.Attainment_Q5 == 0 ? '-' : roundFix(el.Attainment_Q5, 2) + '%'} | \r\n {el.PLANNED_Q6 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q6, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q6, 0))} {el.TagetKpi_Q6 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q6, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q6, 0))} {el.SE_Estimated_Q6 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q6, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q6, 0))}\r\n {el.Gap_Q6 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q6, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q6, 0))} {el.Attainment_Q6 == 0 ? '-' : roundFix(el.Attainment_Q6, 2) + '%'} | \r\n {el.PLANNED_Q7 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q7, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q7, 0))} {el.TagetKpi_Q7 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q7, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q7, 0))} {el.SE_Estimated_Q7 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q7, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q7, 0))}\r\n {el.Gap_Q7 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q7, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q7, 0))} {el.Attainment_Q7 == 0 ? '-' : roundFix(el.Attainment_Q7, 2) + '%'} | \r\n {el.PLANNED_Q8 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q8, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q8, 0))} {el.TagetKpi_Q8 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q8, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q8, 0))} {el.SE_Estimated_Q8 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q8, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q8, 0))}\r\n {el.Gap_Q8 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q8, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q8, 0))} {el.Attainment_Q8 == 0 ? '-' : roundFix(el.Attainment_Q8, 2) + '%'} | \r\n {el.PLANNED_Q9 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q9, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q9, 0))} {el.TagetKpi_Q9 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q9, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q9, 0))} {el.SE_Estimated_Q9 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q9, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q9, 0))}\r\n {el.Gap_Q9 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q9, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q9, 0))} {el.Attainment_Q9 == 0 ? '-' : roundFix(el.Attainment_Q9, 2) + '%'} | \r\n {el.PLANNED_Q10 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q10, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q10, 0))} {el.TagetKpi_Q10 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q10, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q10, 0))} {el.SE_Estimated_Q10 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q10, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q10, 0))}\r\n {el.Gap_Q10 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q10, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q10, 0))} {el.Attainment_Q10 == 0 ? '-' : roundFix(el.Attainment_Q10, 2) + '%'} | \r\n {el.PLANNED_Q11 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q11, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q11, 0))} {el.TagetKpi_Q11 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q11, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q11, 0))} {el.SE_Estimated_Q11 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q11, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q11, 0))}\r\n {el.Gap_Q11 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q11, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q11, 0))} {el.Attainment_Q11 == 0 ? '-' : roundFix(el.Attainment_Q11, 2) + '%'} | \r\n {el.PLANNED_Q12 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.PLANNED_Q12, 0)) : currencySymbol + formatThousands(roundFix(el.PLANNED_Q12, 0))} {el.TagetKpi_Q12 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q12, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q12, 0))} {el.SE_Estimated_Q12 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Estimated_Q12, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Estimated_Q12, 0))}\r\n {el.Gap_Q12 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.Gap_Q12, 0)) : currencySymbol + formatThousands(roundFix(el.Gap_Q12, 0))} {el.Attainment_Q12 == 0 ? '-' : roundFix(el.Attainment_Q12, 2) + '%'} | \r\n\r\n\r\n
\r\n {this.props.data ?\r\n \r\n {this.state.headers.map((el, index) =>\r\n index == 0 ?\r\n
\r\n : null}\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n\r\nexport default KPIChartTable;","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport * as d3 from 'd3'\r\nimport Select from 'react-select'\r\nimport { path } from 'Constants'\r\nimport lineChart from './KPILineChart'\r\nimport ChartTable from './KPIChartTable'\r\nimport {\r\n resetError,\r\n defineScopeLoading \r\n} from 'actions/spendActions'\r\n\r\nimport { getKPIChartDataV2,\r\n getKPIDashBoardLoadDataV2,\r\n trackKpiBenchMarkFilters,\r\n getKPISetUpLoadData\r\n} from 'actions/kpiActions'\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\n\r\n\r\nclass KPIChartsV2 extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = { \r\n selectedMetric: 'Invoice Only', \r\n currencySymbols : this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()],\r\n isLoading: false,\r\n tableDataActual_Estimate: [],\r\n tableDataPlanned: [],\r\n focusOption : [\r\n { key: 'KPI SUPPLIER', value: 'KPI1', legend: 'KPI Suppliers', estLegend: 'SE Estimated', actualLegend: 'SE Targeted', header: 'Suppliers' },\r\n { key: 'KPI SPEND', value: 'KPI1', legend: 'KPI Spend', estLegend: 'SE Estimated', actualLegend: 'SE Targeted', header: 'Spend' },\r\n { key: 'KPI DOCUMENT', value: 'KPI1', legend: 'KPI Documents', estLegend: 'SE Estimated', actualLegend: 'SE Targeted', header: 'Documents' }\r\n ],\r\n metricOption : [ \r\n { label: 'Invoice Only', value: 'Invoice Only' }, \r\n { label: 'PO Only', value: 'PO Only' },\r\n { label: 'Invoice & PO', value: 'Invoice & PO' }\r\n ],\r\n benchmarkPercentileValues: [\r\n { value: 'Top 25%', label: 'Top 25%' },\r\n { value: 'Average 50%', label: 'Average 50%' },\r\n { value: 'Bottom 25%', label: 'Bottom 25%' }\r\n ],\r\n tabs: [\r\n { label : 'Invoice Spend'},\r\n { label : 'Invoice Count'},\r\n { label : 'PO Spend' },\r\n { label : 'PO Count' },\r\n { label : 'Suppliers' }\r\n ],\r\n selectedBPValue: 'Average 50%',\r\n metricValues: [],\r\n selectedMetricValue: 'ALL', \r\n selectedBPFlag: 'AVERAGE',\r\n currentTabIndex : 0,\r\n kpiBenchMarkFilters: {metric: 'ALL', type: 'AVERAGE'},\r\n chart_label : '',\r\n svg_label : '',\r\n selectedTabLabel : 'Invoice Spend' \r\n }\r\n // this.handleBPChange = this.handleBPChange.bind(this);\r\n // this.handleBenchMarkMetricChange = this.handleBenchMarkMetricChange.bind(this);\r\n }\r\n \r\n handleTabChange = (e, tabIndex) => {\r\n //console.log(tabIndex); \r\n var metric = (tabIndex == 0 || tabIndex == 1) ? 'Invoice Only' : (tabIndex == 2 || tabIndex == 3) ? 'PO Only' : 'Invoice Only';\r\n var tabLabel = this.state.tabs[tabIndex].label;\r\n this.setState({currentTabIndex: tabIndex ,selectedMetric: metric,selectedTabLabel:tabLabel}, this.loadKPIChart); \r\n };\r\n\r\n componentDidMount() {\r\n // To load KPI chart we need to first call KPI setup and KPI dashboard\r\n //this.loadKPISetup();\r\n //this.loadKPIDashboard(); \r\n this.loadKPIChart(); \r\n }\r\n\r\n loadKPISetup() {\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let user = this.props.user.user.Email;\r\n this.props.defineScopeLoading(true)\r\n this.setState({ isLoading: true })\r\n this.props.getKPISetUpLoadData(dmcId, vsId, user)\r\n .then((response) => {\r\n if (response.data.Result.length > 0) {\r\n let spData = response.data.Result;\r\n let unique = spData.filter(item => item.BENCHMARK_METRICS == this.state.selectedMetricValue)\r\n //https://stackoverflow.com/questions/15125920/how-to-get-distinct-values-from-an-array-of-objects-in-javascript\r\n // let unique = [...new Map(temp.map(item =>\r\n // [item['METRIC_ID'], item])).values()];\r\n\r\n let uniqueMetrics = [...new Set(spData.map(item => item.BENCHMARK_METRICS))];\r\n let metricValues = [];\r\n for (let i = 0; i < uniqueMetrics.length; i++) {\r\n let obj = {}\r\n obj.label = uniqueMetrics[i]\r\n obj.value = uniqueMetrics[i]\r\n\r\n metricValues.push(obj)\r\n }\r\n this.setState({ spData: spData, metricValues: metricValues })\r\n\r\n } else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'No Records Found. Please navigate to the Your Spend File Tab then Enablement Strategy Wizard Sub-tab then navigate back to this page. The data will appear if the data does not appear email sap_ism_value_experience@sap.com.', isError: 'Yes', isLoading: false })\r\n }\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n }\r\n })\r\n }\r\n\r\n loadKPIDashboard(){\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let user = this.props.user.user.Email;\r\n\r\n this.props.defineScopeLoading(true)\r\n this.setState({ isLoading: true })\r\n this.props.getKPIDashBoardLoadDataV2(dmcId, vsId, user)\r\n .then((response) => {\r\n if (response.data.Result.length > 0) {\r\n let spData = response.data.Result;\r\n //let tableData = this.createTableData(spData);\r\n this.props.defineScopeLoading(false)\r\n this.setState({ isLoading: false }, this.loadKPIChart)\r\n } else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'No Records Found. Please navigate to the Your Spend File Tab then Enablement Strategy Wizard Sub-tab then navigate back to this page. The data will appear if the data does not appear email sap_ism_value_experience@sap.com.', isError: 'Yes', isLoading: false })\r\n }\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n }\r\n })\r\n }\r\n\r\n loadKPIChart() {\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let user = this.props.user.user.Email;\r\n let metric = this.props.kpiFilters !== undefined ? this.props.kpiFilters.metric : this.state.selectedMetricValue; \r\n let type = this.props.kpiFilters !== undefined ? this.props.kpiFilters.type : this.state.selectedBPFlag; \r\n let metricType = this.state.selectedMetric ;\r\n\r\n this.props.defineScopeLoading(true)\r\n this.setState({ isLoading: true })\r\n this.props.getKPIChartDataV2(dmcId, vsId, user, metricType)\r\n .then((response) => {\r\n if (response.data.Result.length > 0) {\r\n var tab = this.state.currentTabIndex;\r\n var focus_opt = (tab == 0 || tab == 2) ? this.state.focusOption[1] : (tab == 1 || tab == 3) ? this.state.focusOption[2]: this.state.focusOption[0];\r\n var svg_label = (tab == 0 || tab == 2) ? '\"KPI_SPEND\"' : (tab == 1 || tab == 3) ? '\"KPI_DOCUMENT\"' : '\"KPI_SUPPLIER\"';\r\n //let spData = response.data.Result.filter(x=>x.CHART_LABEL == focus_opt.key); \r\n let spData = response.data.Result; \r\n let tableDataActual_Estimate = this.createTableData(spData);\r\n this.setState({tableDataActual_Estimate: tableDataActual_Estimate,svg_label:svg_label})\r\n \r\n // draw chart for each\r\n \r\n // focus_opt.forEach(element => {\r\n // this.drawLineChart(element, spData); \r\n // });\r\n this.drawLineChart(focus_opt, spData,'chart1'); \r\n this.drawLineChart(focus_opt, spData,'chart2'); \r\n \r\n this.setState({ isLoading: false})\r\n this.props.defineScopeLoading(false)\r\n } else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'No Records Found. Please navigate to the Your Spend File Tab then Enablement Strategy Wizard Sub-tab then navigate back to this page. The data will appear if the data does not appear email sap_ism_value_experience@sap.com.', isError: 'Yes', isLoading: false })\r\n }\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n }\r\n })\r\n }\r\n\r\n createTableData(spData) {\r\n let tableData = [];\r\n var tab = this.state.currentTabIndex;\r\n\r\n //create an array with unique kpi names from sp data\r\n let kpiArr = [...new Set(spData.map(item => item.CHART_LABEL))];\r\n\r\n var chart_label = (tab == 0 || tab == 2) ? 'KPI SPEND' : (tab == 1 || tab == 3) ? 'KPI DOCUMENT': 'KPI SUPPLIER';\r\n \r\n\r\n // //for every unique kpi name create table data for 12 quaters\r\n // for (let i = 0; i < kpiArr.length; i++) {\r\n // let temp = spData.filter(item => item.CHART_LABEL == kpiArr[i])\r\n // let obj = this.createTableDataObject(temp)\r\n // tableData.push(obj)\r\n // }\r\n let temp = spData.filter(item => item.CHART_LABEL == chart_label)\r\n let obj = this.createTableDataObject(temp)\r\n tableData.push(obj)\r\n\r\n //tableData.sort((a, b) => (a.srNo > b.srNo) ? 1 : -1)//sort the table always by sr_no \r\n return tableData;\r\n }\r\n\r\n createTableDataObject(kpiArr) {\r\n let obj = {}\r\n \r\n for (let i = 0; i < kpiArr.length; i++) {\r\n obj.VS_ID = kpiArr[i]['VS_ID']\r\n obj.DMC_ID = kpiArr[i]['DMC_ID']\r\n //obj.kpi = kpiArr[i]['KPI_NAME']\r\n obj.QUARTER_NO = kpiArr[i]['QUARTER_NO']\r\n obj.CHART_LABEL = kpiArr[i]['CHART_LABEL']\r\n obj.HR = 'hr'\r\n \r\n for (let j = 1; j <= 12; j++) { \r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['KPI_VALUE_Q' + j] = kpiArr[i]['KPI_VALUE']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['ESTIMATED_VALUE_Q' + j] = kpiArr[i]['ESTIMATED_VALUE']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['ACTUAL_VALUE_Q' + j] = kpiArr[i]['ACTUAL_VALUE']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['PLANNED_VALUE_Q' + j] = kpiArr[i]['PLANNED_VALUE'] \r\n }\r\n }\r\n //}\r\n return obj;\r\n }\r\n\r\n drawLineChart(element, spData, chart)\r\n {\r\n element.value = chart == 'chart1' ? 'KPI1' : 'KPI2';\r\n element.header = this.state.selectedTabLabel + (chart == 'chart1' ? ' Actual & Estimate' : ' Planned for Enablement');\r\n var lineChartData = spData.filter(d=>d.CHART_LABEL=== element.key) \r\n //this.setState({ chartData: lineChartData }) \r\n d3.select(\"#\"+ element.value +\"\").selectAll(\"g\").remove();\r\n d3.select(\"#\"+ element.value +\"\").selectAll(\"path\").remove();\r\n\r\n var kpiMaxValue = lineChartData.reduce((max, p) => p.KPI_VALUE > max ? p.KPI_VALUE : max, lineChartData[0].KPI_VALUE);\r\n var actualMaxValue = lineChartData.reduce((max, p) => p.ACTUAL_VALUE > max ? p.ACTUAL_VALUE : max, lineChartData[0].ACTUAL_VALUE);\r\n var estimatedMaxValue = lineChartData.reduce((max, p) => p.ESTIMATED_VALUE > max ? p.ESTIMATED_VALUE : max, lineChartData[0].ESTIMATED_VALUE);\r\n var plannedMaxValue = lineChartData.reduce((max, p) => p.PLANNED_VALUE > max ? p.PLANNED_VALUE : max, lineChartData[0].PLANNED_VALUE);\r\n\r\n //var YMaxValue = (kpiMaxValue > actualMaxValue) ? (kpiMaxValue > estimatedMaxValue ? kpiMaxValue : estimatedMaxValue) : (actualMaxValue > estimatedMaxValue ? actualMaxValue : estimatedMaxValue);\r\n var YMaxValueChart1 = (estimatedMaxValue > actualMaxValue) ? estimatedMaxValue : actualMaxValue;\r\n var YMaxValueChart2 = (kpiMaxValue > plannedMaxValue) ? kpiMaxValue : plannedMaxValue;\r\n\r\n if (chart == 'chart1') {\r\n lineChart(true, lineChartData, '#f0ab00', 'ACTUAL_VALUE', element, this.state.currencySymbols, \"\", YMaxValueChart1) //#f0ab00 //#f0d737\r\n lineChart(false, lineChartData, '#008fd3', 'ESTIMATED_VALUE', element, this.state.currencySymbols, \"\", YMaxValueChart1)\r\n }\r\n else {\r\n lineChart(true, lineChartData, '#000000', 'KPI_VALUE', element, this.state.currencySymbols, \"\", YMaxValueChart2) //#4a4a4a //#f07e37\r\n lineChart(false, lineChartData, '#c7c7c7', 'PLANNED_VALUE', element, this.state.currencySymbols, \"\", YMaxValueChart2)\r\n }\r\n }\r\n\r\n handleMetricChange(value)\r\n {\r\n this.setState({selectedMetric: value.label}, this.loadKPIChart);\r\n }\r\n\r\n render() {\r\n return (\r\n | {el} | )}\r\n||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {this.props.type} Target KPI\r\n \r\n \r\n {/* {this.props.type} Target KPI */}\r\n {kpiChartTableLableIcon[this.props.type + ' Target KPI']}\r\n \r\n \r\n \r\n | \r\n { isSpendType ? currencySymbol + convertToMillion(item.KPI_VALUE_Q1,true) : formatThousands(Math.round(item.KPI_VALUE_Q1))} | \r\n{ isSpendType ? currencySymbol + convertToMillion(item.KPI_VALUE_Q2,true) : formatThousands(Math.round(item.KPI_VALUE_Q2))} | \r\n{ isSpendType ? currencySymbol + convertToMillion(item.KPI_VALUE_Q3,true) : formatThousands(Math.round(item.KPI_VALUE_Q3))} | \r\n{ isSpendType ? currencySymbol + convertToMillion(item.KPI_VALUE_Q4,true) : formatThousands(Math.round(item.KPI_VALUE_Q4))} | \r\n{ isSpendType ? currencySymbol + convertToMillion(item.KPI_VALUE_Q5,true) : formatThousands(Math.round(item.KPI_VALUE_Q5))} | \r\n{ isSpendType ? currencySymbol + convertToMillion(item.KPI_VALUE_Q6,true) : formatThousands(Math.round(item.KPI_VALUE_Q6))} | \r\n{ isSpendType ? currencySymbol + convertToMillion(item.KPI_VALUE_Q7,true) : formatThousands(Math.round(item.KPI_VALUE_Q7))} | \r\n{ isSpendType ? currencySymbol + convertToMillion(item.KPI_VALUE_Q8,true) : formatThousands(Math.round(item.KPI_VALUE_Q8))} | \r\n{ isSpendType ? currencySymbol + convertToMillion(item.KPI_VALUE_Q9,true) : formatThousands(Math.round(item.KPI_VALUE_Q9))} | \r\n{ isSpendType ? currencySymbol + convertToMillion(item.KPI_VALUE_Q10,true) : formatThousands(Math.round(item.KPI_VALUE_Q10))} | \r\n{ isSpendType ? currencySymbol + convertToMillion(item.KPI_VALUE_Q11,true) : formatThousands(Math.round(item.KPI_VALUE_Q11))} | \r\n{ isSpendType ? currencySymbol + convertToMillion(item.KPI_VALUE_Q12,true) : formatThousands(Math.round(item.KPI_VALUE_Q12))} | \r\n
| {this.props.type} KPI Estimate\r\n \r\n \r\n {/* {this.props.type} KPI Estimate */}\r\n {kpiChartTableLableIcon[this.props.type + ' KPI Estimate']}\r\n \r\n \r\n \r\n | \r\n { isSpendType? currencySymbol + convertToMillion(item.ESTIMATED_VALUE_Q1,true) :formatThousands(Math.round(item.ESTIMATED_VALUE_Q1))} | \r\n{ isSpendType? currencySymbol + convertToMillion(item.ESTIMATED_VALUE_Q2,true) :formatThousands(Math.round(item.ESTIMATED_VALUE_Q2))} | \r\n{ isSpendType? currencySymbol + convertToMillion(item.ESTIMATED_VALUE_Q3,true) :formatThousands(Math.round(item.ESTIMATED_VALUE_Q3))} | \r\n{ isSpendType? currencySymbol + convertToMillion(item.ESTIMATED_VALUE_Q4,true) :formatThousands(Math.round(item.ESTIMATED_VALUE_Q4))} | \r\n{ isSpendType? currencySymbol + convertToMillion(item.ESTIMATED_VALUE_Q5,true) :formatThousands(Math.round(item.ESTIMATED_VALUE_Q5))} | \r\n{ isSpendType? currencySymbol + convertToMillion(item.ESTIMATED_VALUE_Q6,true) :formatThousands(Math.round(item.ESTIMATED_VALUE_Q6))} | \r\n{ isSpendType? currencySymbol + convertToMillion(item.ESTIMATED_VALUE_Q7,true) :formatThousands(Math.round(item.ESTIMATED_VALUE_Q7))} | \r\n{ isSpendType? currencySymbol + convertToMillion(item.ESTIMATED_VALUE_Q8,true) :formatThousands(Math.round(item.ESTIMATED_VALUE_Q8))} | \r\n{ isSpendType? currencySymbol + convertToMillion(item.ESTIMATED_VALUE_Q9,true) :formatThousands(Math.round(item.ESTIMATED_VALUE_Q9))} | \r\n{ isSpendType? currencySymbol + convertToMillion(item.ESTIMATED_VALUE_Q10,true) :formatThousands(Math.round(item.ESTIMATED_VALUE_Q10))} | \r\n{ isSpendType? currencySymbol + convertToMillion(item.ESTIMATED_VALUE_Q11,true) :formatThousands(Math.round(item.ESTIMATED_VALUE_Q11))} | \r\n{ isSpendType? currencySymbol + convertToMillion(item.ESTIMATED_VALUE_Q12,true) :formatThousands(Math.round(item.ESTIMATED_VALUE_Q12))} | \r\n
| Actual {this.props.type}\r\n \r\n \r\n {/* Actual {this.props.type} */}\r\n {kpiChartTableLableIcon['Actual ' + this.props.type]}\r\n \r\n \r\n \r\n | \r\n {isSpendType? (item.ACTUAL_VALUE_Q1 !==0 ? currencySymbol + convertToMillion(item.ACTUAL_VALUE_Q1,true) : '-' ): ( item.ACTUAL_VALUE_Q1 !==0 ? formatThousands(Math.round(item.ACTUAL_VALUE_Q1)) : '-')} | \r\n{isSpendType? (item.ACTUAL_VALUE_Q2 !==0 ? currencySymbol + convertToMillion(item.ACTUAL_VALUE_Q2,true) : '-' ): ( item.ACTUAL_VALUE_Q2 !==0 ? formatThousands(Math.round(item.ACTUAL_VALUE_Q2)) : '-')} | \r\n{isSpendType? (item.ACTUAL_VALUE_Q3 !==0 ? currencySymbol + convertToMillion(item.ACTUAL_VALUE_Q3,true) : '-' ): ( item.ACTUAL_VALUE_Q3 !==0 ? formatThousands(Math.round(item.ACTUAL_VALUE_Q3)) : '-')} | \r\n{isSpendType? (item.ACTUAL_VALUE_Q4 !==0 ? currencySymbol + convertToMillion(item.ACTUAL_VALUE_Q4,true) : '-' ): ( item.ACTUAL_VALUE_Q4 !==0 ? formatThousands(Math.round(item.ACTUAL_VALUE_Q4)) : '-')} | \r\n{isSpendType? (item.ACTUAL_VALUE_Q5 !==0 ? currencySymbol + convertToMillion(item.ACTUAL_VALUE_Q5,true) : '-' ): ( item.ACTUAL_VALUE_Q5 !==0 ? formatThousands(Math.round(item.ACTUAL_VALUE_Q5)) : '-')} | \r\n{isSpendType? (item.ACTUAL_VALUE_Q6 !==0 ? currencySymbol + convertToMillion(item.ACTUAL_VALUE_Q6,true) : '-' ): ( item.ACTUAL_VALUE_Q6 !==0 ? formatThousands(Math.round(item.ACTUAL_VALUE_Q6)) : '-')} | \r\n{isSpendType? (item.ACTUAL_VALUE_Q7 !==0 ? currencySymbol + convertToMillion(item.ACTUAL_VALUE_Q7,true) : '-' ): ( item.ACTUAL_VALUE_Q7 !==0 ? formatThousands(Math.round(item.ACTUAL_VALUE_Q7)) : '-')} | \r\n{isSpendType? (item.ACTUAL_VALUE_Q8 !==0 ? currencySymbol + convertToMillion(item.ACTUAL_VALUE_Q8,true) : '-' ): ( item.ACTUAL_VALUE_Q8 !==0 ? formatThousands(Math.round(item.ACTUAL_VALUE_Q8)) : '-')} | \r\n{isSpendType? (item.ACTUAL_VALUE_Q9 !==0 ? currencySymbol + convertToMillion(item.ACTUAL_VALUE_Q9,true) : '-' ): ( item.ACTUAL_VALUE_Q9 !==0 ? formatThousands(Math.round(item.ACTUAL_VALUE_Q9)) : '-')} | \r\n{isSpendType? (item.ACTUAL_VALUE_Q10 !==0 ? currencySymbol + convertToMillion(item.ACTUAL_VALUE_Q10,true) : '-' ) :( item.ACTUAL_VALUE_Q10 !==0 ? formatThousands(Math.round(item.ACTUAL_VALUE_Q10)): '-')} | \r\n{isSpendType? (item.ACTUAL_VALUE_Q11 !==0 ? currencySymbol + convertToMillion(item.ACTUAL_VALUE_Q11,true) : '-' ) :( item.ACTUAL_VALUE_Q11 !==0 ? formatThousands(Math.round(item.ACTUAL_VALUE_Q11)): '-')} | \r\n{isSpendType? (item.ACTUAL_VALUE_Q12 !==0 ? currencySymbol + convertToMillion(item.ACTUAL_VALUE_Q12,true) : '-' ) :( item.ACTUAL_VALUE_Q12 !==0 ? formatThousands(Math.round(item.ACTUAL_VALUE_Q12)): '-')} | \r\n
| {this.props.type} Planned\r\n \r\n \r\n {/* {this.props.type} Planned */}\r\n {kpiChartTableLableIcon[this.props.type + ' Planned']}\r\n \r\n \r\n \r\n | \r\n {isSpendType? (item.PLANNED_VALUE_Q1 !==0 ? currencySymbol + convertToMillion(item.PLANNED_VALUE_Q1,true) : '-' ): ( item.PLANNED_VALUE_Q1 !==0 ? formatThousands(Math.round(item.PLANNED_VALUE_Q1)) : '-')} | \r\n{isSpendType? (item.PLANNED_VALUE_Q2 !==0 ? currencySymbol + convertToMillion(item.PLANNED_VALUE_Q2,true) : '-' ): ( item.PLANNED_VALUE_Q2 !==0 ? formatThousands(Math.round(item.PLANNED_VALUE_Q2)) : '-')} | \r\n{isSpendType? (item.PLANNED_VALUE_Q3 !==0 ? currencySymbol + convertToMillion(item.PLANNED_VALUE_Q3,true) : '-' ): ( item.PLANNED_VALUE_Q3 !==0 ? formatThousands(Math.round(item.PLANNED_VALUE_Q3)) : '-')} | \r\n{isSpendType? (item.PLANNED_VALUE_Q4 !==0 ? currencySymbol + convertToMillion(item.PLANNED_VALUE_Q4,true) : '-' ): ( item.PLANNED_VALUE_Q4 !==0 ? formatThousands(Math.round(item.PLANNED_VALUE_Q4)) : '-')} | \r\n{isSpendType? (item.PLANNED_VALUE_Q5 !==0 ? currencySymbol + convertToMillion(item.PLANNED_VALUE_Q5,true) : '-' ): ( item.PLANNED_VALUE_Q5 !==0 ? formatThousands(Math.round(item.PLANNED_VALUE_Q5)) : '-')} | \r\n{isSpendType? (item.PLANNED_VALUE_Q6 !==0 ? currencySymbol + convertToMillion(item.PLANNED_VALUE_Q6,true) : '-' ): ( item.PLANNED_VALUE_Q6 !==0 ? formatThousands(Math.round(item.PLANNED_VALUE_Q6)) : '-')} | \r\n{isSpendType? (item.PLANNED_VALUE_Q7 !==0 ? currencySymbol + convertToMillion(item.PLANNED_VALUE_Q7,true) : '-' ): ( item.PLANNED_VALUE_Q7 !==0 ? formatThousands(Math.round(item.PLANNED_VALUE_Q7)) : '-')} | \r\n{isSpendType? (item.PLANNED_VALUE_Q8 !==0 ? currencySymbol + convertToMillion(item.PLANNED_VALUE_Q8,true) : '-' ): ( item.PLANNED_VALUE_Q8 !==0 ? formatThousands(Math.round(item.PLANNED_VALUE_Q8)) : '-')} | \r\n{isSpendType? (item.PLANNED_VALUE_Q9 !==0 ? currencySymbol + convertToMillion(item.PLANNED_VALUE_Q9,true) : '-' ): ( item.PLANNED_VALUE_Q9 !==0 ? formatThousands(Math.round(item.PLANNED_VALUE_Q9)) : '-')} | \r\n{isSpendType? (item.PLANNED_VALUE_Q10 !==0 ? currencySymbol + convertToMillion(item.PLANNED_VALUE_Q10,true) : '-' ) :( item.PLANNED_VALUE_Q10 !==0 ? formatThousands(Math.round(item.PLANNED_VALUE_Q10)): '-')} | \r\n{isSpendType? (item.PLANNED_VALUE_Q11 !==0 ? currencySymbol + convertToMillion(item.PLANNED_VALUE_Q11,true) : '-' ) :( item.PLANNED_VALUE_Q11 !==0 ? formatThousands(Math.round(item.PLANNED_VALUE_Q11)): '-')} | \r\n{isSpendType? (item.PLANNED_VALUE_Q12 !==0 ? currencySymbol + convertToMillion(item.PLANNED_VALUE_Q12,true) : '-' ) :( item.PLANNED_VALUE_Q12 !==0 ? formatThousands(Math.round(item.PLANNED_VALUE_Q12)): '-')} | \r\n
\r\n \r\n {\r\n this.state.tabs.map((tab, i) => {\r\n var disabledTab = this.state.selectedTabLabel === tab.label ? true : false;\r\n return ( \r\n\r\n {/*
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n userData: state.valueStory,\r\n user: state.default,\r\n focusLabel: state.content.spendAnalysis.enablement.focusLabel,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n content: state.content,\r\n ui: state.content.ui,\r\n industryNetworkStats: state.content.spendAnalysis.industryDrilldown.industryNetworkStats,\r\n kpiFilters: state.kpis.kpiBenchMarkFilters,\r\n kpiLables: state.content.kpiTab\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n resetError: error => dispatch(resetError(error)),\r\n defineScopeLoading: bool => dispatch(defineScopeLoading(bool)),\r\n getKPIChartDataV2: (DMCId, VSId, userEmail, metricType) => dispatch(getKPIChartDataV2(DMCId, VSId, userEmail, metricType)),\r\n getKPIDashBoardLoadDataV2: (DMCId, VSId, userEmail) => dispatch(getKPIDashBoardLoadDataV2(DMCId, VSId, userEmail)),\r\n trackKpiBenchMarkFilters: obj => dispatch(trackKpiBenchMarkFilters(obj)),\r\n getKPISetUpLoadData: (DMCId, VSId, userEmail) => dispatch(getKPISetUpLoadData(DMCId, VSId, userEmail)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(KPIChartsV2)","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport classNames from \"classnames\";\r\nimport { path } from 'Constants'\r\nimport moment from 'moment'\r\nimport { ControlTextE } from 'UI/CustomComponents/Controls';\r\n// Actions\r\nimport {\r\n getEnablementResourceParameters,\r\n getEnablementResourceParametersAdmin,\r\n updateEnablementResourceParameters,\r\n pendingChanges,\r\n resetError,\r\n isEnablementStrategyContainerPage\r\n} from 'actions/spendActions'\r\n\r\n// Utils\r\nimport { BreakLine, round } from 'utils/Utils'\r\nimport Popup from \"reactjs-popup\";\r\n\r\nclass EnablementResourceParameters extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isLoading: false,\r\n enablementResourceParameters: [],\r\n editedEnablementResourceParameters: [],\r\n responseMessage: '',\r\n isError: false,\r\n isExpand: false,\r\n //isDataLoaded: false,\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n this.trackEnablementResourceParametersChanges = this.trackEnablementResourceParametersChanges.bind(this)\r\n this.onEnablementResourceParametersSave = this.onEnablementResourceParametersSave.bind(this)\r\n }\r\n\r\n // componentDidMount() {\r\n // this.loadData();\r\n // this.setState({ isExpand: !this.state.isExpand });\r\n // this.props.isEnablementStrategyContainerPage(true);\r\n // }\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n this.setState({ isExpand: true });\r\n this.props.isEnablementStrategyContainerPage(true)\r\n }\r\n\r\n componentDidUpdate(nextProps) {\r\n if (nextProps.isSaveClicked !== this.props.isSaveClicked\r\n || nextProps.kpiSelectedModel !== this.props.kpiSelectedModel\r\n || nextProps.isResourceParamDataLoaded !== this.props.isResourceParamDataLoaded\r\n ) {\r\n setTimeout(() => {\r\n if(nextProps.kpiSelectedModel !== this.props.kpiSelectedModel \r\n && this.props.modelClicked\r\n )\r\n {\r\n //alert(this.props.kpiSelectedModel);\r\n this.getAllDefaultParameters(this.props.kpiSelectedModel);\r\n }\r\n else{\r\n // //if (!this.props.isResourceParamDataLoaded) {\r\n // this.loadData();\r\n // this.setState({ isExpand: true });\r\n // this.props.isEnablementStrategyContainerPage(true);\r\n // //}\r\n this.props.handleResourceParameterChanges()\r\n this.onEnablementResourceParametersSave();\r\n }\r\n }, 1000);\r\n }\r\n }\r\n\r\n // shouldComponentUpdate(nextProps) {\r\n // // if ((nextProps.isSaveClicked !== this.props.isSaveClicked\r\n // // || nextProps.kpiSelectedModel !== this.props.kpiSelectedModel)\r\n // // && nextProps.isSaveClicked) {\r\n // if (nextProps.isSaveClicked !== this.props.isSaveClicked\r\n // || nextProps.kpiSelectedModel !== this.props.kpiSelectedModel\r\n // || nextProps.isResourceParamDataLoaded !== this.props.isResourceParamDataLoaded\r\n // ) {\r\n // this.props.handleResourceParameterChanges()\r\n // this.onEnablementResourceParametersSave();\r\n // }\r\n // return true\r\n // }\r\n\r\n loadData() {\r\n this.setState({ isExpand: false });\r\n this.getAllParameters();\r\n }\r\n\r\n trackEnablementResourceParametersChanges(record) {\r\n var updatedRecords = this.state.editedEnablementResourceParameters\r\n if (this.state.editedEnablementResourceParameters.length === 0)\r\n updatedRecords.push(record)\r\n else {\r\n let index = this.state.editedEnablementResourceParameters.findIndex(x => x.WORK_STREAM === record.WORK_STREAM);\r\n if (index !== undefined && index !== null && index > -1)\r\n updatedRecords.splice(index, 1)\r\n updatedRecords.push(record)\r\n }\r\n this.setState({ responseMessage: 'Pending changes. Click save to recast waves.', editedEnablementResourceParameters: updatedRecords, isError: false })\r\n // this.props.handleResourceParameterChanges(updatedRecords)\r\n }\r\n\r\n getAllParameters() {\r\n if(this.props.isResourceParamDataLoaded)\r\n {\r\n this.setState({ responseMessage: '', isLoading: true, isError: false });\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let user = this.props.user.user.Email;\r\n this.props.getEnablementResourceParameters(dmcId, vsId, user).then((response) => {\r\n if (response.status === 200) {\r\n this.props.UpdateResourceParamDataLoaded(false);\r\n this.props.EnablementStrategyrefreshPriorityTable(true);\r\n //this.setState({ isDataLoaded: true });\r\n if (response.data.Result.length === 0) {\r\n this.setState({ responseMessage: this.props.content.reimport, isLoading: false, isError: true });\r\n }\r\n else {\r\n var _instance = this\r\n response.data.Result.map(function (rows) {\r\n if (rows.WORK_STREAM != 'Enterprise - Integration')\r\n _instance.trackEnablementResourceParametersChanges(rows);\r\n });\r\n this.setState({ enablementResourceParameters: response.data.Result, isLoading: false, responseMessage: '', isError: false });\r\n //this.props.initialState(response.data.Result)\r\n this.props.callbackEnablementResourceParameters(response.data.Result);\r\n }\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n }\r\n this.setState({ isExpand: true });\r\n this.props.isEnablementStrategyContainerPage(true);\r\n }).catch((error) => {\r\n this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n })\r\n }\r\n }\r\n\r\n getAllDefaultParameters(selectedModel) { \r\n this.setState({ responseMessage: '', isLoading: true, isError: false });\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let user = this.props.user.user.Email;\r\n this.props.getEnablementResourceParametersAdmin(this.props.spendDetails.solutionScope).then((response) => {\r\n if (response.status === 200) {\r\n //this.props.UpdateResourceParamDataLoaded(false);\r\n //this.props.EnablementStrategyrefreshPriorityTable(true);\r\n ////this.setState({ isDataLoaded: true });\r\n if (response.data.Result.length === 0) {\r\n this.setState({ responseMessage: this.props.content.reimport, isLoading: false, isError: true });\r\n }\r\n else {\r\n this.setState({ editedEnablementResourceParameters: []});\r\n response.data.Result.map(function (rows) {\r\n rows.SUPPLIER_WAVE_1 = rows.WAVE_1 ;\r\n rows.SUPPLIER_WAVE_N = rows.WAVE_N ;\r\n rows.FTES = rows.FTE ;\r\n rows.WORK_STREAM = rows.RESOURCE_TYPE;\r\n });\r\n var _instance = this;\r\n var model = selectedModel == 1 ? 'Intelligent Strategy Model' : 'KPI Based Model' ;\r\n var filteredData = response.data.Result.filter(a=> a.ENABLEMENT_WAVE_STRATEGY_MODEL == model);\r\n filteredData.map(function (rows) {\r\n if (rows.WORK_STREAM != 'Enterprise - Integration') \r\n _instance.trackEnablementResourceParametersChanges(rows);\r\n });\r\n this.setState({ enablementResourceParameters: filteredData, isLoading: false, responseMessage: '', isError: false });\r\n ////this.props.initialState(response.data.Result)\r\n //this.props.callbackEnablementResourceParameters(filteredData);\r\n }\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n }\r\n this.setState({ isExpand: true });\r\n //this.props.isEnablementStrategyContainerPage(true);\r\n }).catch((error) => {\r\n this.setState({ responseMessage: this.props.content.errorMessage, isLoading: false, isError: true });\r\n }) \r\n }\r\n\r\n onEnablementResourceParametersSave() {\r\n if(this.props.isResourceParamDataLoaded) {\r\n if (this.state.editedEnablementResourceParameters.length !== 0) {\r\n if (this.state.editedEnablementResourceParameters.find(a => a.FTES === '') === undefined && this.state.editedEnablementResourceParameters.find(a => a.WAVE_1 === '') === undefined\r\n && this.state.editedEnablementResourceParameters.find(a => a.WAVE_N === '') === undefined) {\r\n if (this.state.editedEnablementResourceParameters.find(a => a.FTES === '-') === undefined && this.state.editedEnablementResourceParameters.find(a => a.WAVE_1 === '-') === undefined\r\n && this.state.editedEnablementResourceParameters.find(a => a.WAVE_N === '-') === undefined) {\r\n if (this.state.editedEnablementResourceParameters.find(a => Number(a.FTES) > 10) === undefined) {\r\n\r\n this.setState({ isLoading: true, responseMessage: '', isError: false });\r\n\r\n let updatedRecords = this.state.editedEnablementResourceParameters\r\n let index1 = this.state.editedEnablementResourceParameters.findIndex(x => x.WORK_STREAM === 'Enterprise - Portal');\r\n if (index1 > -1) {\r\n let index2 = this.state.editedEnablementResourceParameters.findIndex(x => x.WORK_STREAM === 'Managed Standard Account');\r\n if (index2 > -1) {\r\n if (updatedRecords[index2].FTES !== updatedRecords[index1].FTES)\r\n updatedRecords[index2].FTES = updatedRecords[index1].FTES\r\n }\r\n else {\r\n let obj = this.state.enablementResourceParameters.find(x => x.WORK_STREAM === 'Managed Standard Account');\r\n if (obj.FTES !== updatedRecords[index1].FTES) {\r\n obj.FTES = updatedRecords[index1].FTES\r\n updatedRecords.push(obj)\r\n }\r\n }\r\n }\r\n\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID\r\n let email = this.props.user.user.Email\r\n let finalObject = [];\r\n updatedRecords.map(function (parameter) {\r\n let reocrd = {\r\n 'VSID': vsId, 'DMCID': dmcId, 'Email': email,\r\n 'Resource_Type': parameter.RESOURCE_TYPE, 'Account_Type': parameter.ACCOUNT_TYPE,\r\n 'FTEs': parameter.FTES, 'Wave_1': parameter.WAVE_1, 'Wave_n': parameter.WAVE_N\r\n }\r\n finalObject.push(reocrd)\r\n });\r\n\r\n this.props.updateEnablementResourceParameters(finalObject, this.props.kpiSelectedModel).then((response) => {\r\n if (response.status === 200) {\r\n this.loadData();\r\n this.props.pendingChanges(null);\r\n this.props.handleIsResourceParamterSaved(true);\r\n // this.props.UpdateResourceParamDataLoaded(false);\r\n // this.props.EnablementStrategyrefreshPriorityTable(true);\r\n this.setState({ enablementResourceParameters: response.data.Result, editedEnablementResourceParameters: [], isLoading: false, responseMessage: this.props.content.successMessage, isError: false });\r\n }\r\n else {\r\n this.setState({ isLoading: false, responseMessage: this.props.content.errorMessage, isError: true });\r\n }\r\n }).catch((error) => {\r\n this.setState({ isLoading: false, responseMessage: this.props.content.errorMessage, isError: true });\r\n })\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.maxFTE, isError: true });\r\n }\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.validNumber, isError: true });\r\n }\r\n }\r\n else {\r\n this.setState({ responseMessage: this.props.content.blankValue, isError: true });\r\n }\r\n }\r\n else{\r\n this.loadData();\r\n }\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.resetError();\r\n setTimeout(() => {\r\n this.props.isEnablementStrategyContainerPage(false);\r\n }, 1000); \r\n }\r\n\r\n onExpandClick(e) {\r\n this.setState({ isExpand: !this.state.isExpand })\r\n }\r\n\r\n render() {\r\n var _instance = this\r\n var isAdmin = this.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ? true : false;\r\n var resourceParameters = this.state.enablementResourceParameters.map(function (parameter, index) {\r\n if (parameter.RESOURCE_TYPE === 'Seller Integration Lead' && parameter.WORK_STREAM === 'Enterprise - Integration') { }\r\n else\r\n return (\r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n\r\n {this.state.errorMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n \r\n
*/}\r\n\r\n { this.state.errorMsg === undefined ?\r\n \r\n option.label === this.state.selectedMetric)}\r\n onChange={(value) => this.handleMetricChange(value)}\r\n options={this.state.metricOption}\r\n isSearchable={false}\r\n className=\"border-with-DD dropDownContent\"\r\n />\r\n
\r\n {this.props.kpiLables.metricType}
\r\n \r\n
\r\n : null }\r\n\r\n \r\n {/*
\r\n\r\n\r\n Suppliers
*/}\r\n \r\n {/*
\r\n \r\n {/* d.CHART_LABEL === 'KPI SUPPLIER')} type={\"Suppliers\"} currencySymbols={this.state.currencySymbols}> */}\r\n
\r\n \r\n {/*
\r\n{/* \r\n Suppliers
*/}\r\n \r\n {/*
\r\n \r\n {/* d.CHART_LABEL === 'KPI SUPPLIER')} type={\"Suppliers\"} currencySymbols={this.state.currencySymbols}> */}\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n d.CHART_LABEL === 'KPI SPEND')} type={\"Spend\"} currencySymbols={this.state.currencySymbols}> \r\n
\r\n \r\n \r\n
*/}\r\n \r\n \r\n
\r\n \r\n d.CHART_LABEL === 'KPI DOCUMENT')} type={\"Documents\"} currencySymbols={this.state.currencySymbols}> \r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nclass TableRows extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n };\r\n }\r\n\r\n onChangeEvent(val) {\r\n if (val.target.value === '' || !isNaN(val.target.value)) {\r\n if (val.target.id === \"FTES\") {\r\n var editingRow = this.props.enablementResourceParameter;\r\n let editedValue = val.target.value.trim()\r\n if (editedValue.toString() !== editingRow[val.target.id].toString()) {\r\n editingRow[val.target.id] = editedValue\r\n this.props.trackEnablementResourceParametersChanges(editingRow)\r\n this.props.pendingChanges(true)\r\n }\r\n }\r\n else {\r\n if (val.target.value === '' || val.target.value.match(/^[0-9]+$/)) { //No decimals\r\n var editingRow = this.props.enablementResourceParameter;\r\n let editedValue = val.target.value.trim()\r\n if (editedValue.toString() !== editingRow[val.target.id].toString()) {\r\n editingRow[val.target.id] = editedValue\r\n this.props.trackEnablementResourceParametersChanges(editingRow)\r\n this.props.pendingChanges(true)\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n var bindValues = this.props.enablementResourceParameter;\r\n return (\r\n \r\n
\r\n\r\n {this.state.isExpand ?\r\n {BreakLine(this.props.content.title)}
\r\n this.onExpandClick(e)} >{this.state.isExpand ? \"-\" : \"+\"}
\r\n \r\n
\r\n : null}\r\n {this.props.kpiSelectedModel == 1 ? this.props.content.tabDesc\r\n : this.props.content.tabDescKPI\r\n }
\r\n \r\n
\r\n {this.state.enablementResourceParameters.length > 0 ?\r\n \r\n
\r\n \r\n
\r\n {/* \r\n
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n :\r\n this.state.isError ?\r\n
\r\n {this.state.responseMessage}
:\r\n {this.state.responseMessage}
\r\n }\r\n \r\n \r\n
*/}\r\n {/* */}\r\n \r\n
\r\n : null}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\"For fractional numbers use a leading 0. Example: 0.5\"}\r\n
\r\n \r\n \r\n \r\n {\"For fractional numbers use a leading 0. Example: 0.5\"}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n this.state.isAllowedToEdit && this.onAutoWaveChangeEvent(e, item)}\r\n onBlur={(e) => this.onFocusOut(e, item)}\r\n type=\"Number\"\r\n style={{ borderLeft: '1px solid #e1e1e1', backgroundColor: !this.state.isAllowedToEdit && '#fafafa' }}\r\n readOnly={!this.state.isAllowedToEdit}\r\n //style= {{ backgroundColor: this.state.isReadOnly && '#fafafa'}} \r\n />\r\n
\r\n \r\n\r\n 0 && \"checkBg iconBg\"}>\r\n \r\n
\r\n \r\n
\r\n : null\r\n )\r\n })\r\n\r\n\r\n\r\n return (\r\n this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined && this.props.spendDetails.currentActiveRequest !== \"\" ?\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {item.FIELD_NAME === \"L4_INDUSTRY_GICS_ID\" ? item.FIELD_DESC : item.FIELD_VALUE}\r\n
\r\n \r\n this.state.isAllowedToEdit && this.onChangeEvent(e, item)}\r\n onBlur={(e) => this.onFocusOut(e, item)}\r\n type=\"Number\"\r\n readOnly={this.state.isReadOnly}\r\n style={{ backgroundColor: this.state.isReadOnly && '#fafafa' }}\r\n />\r\n
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n :\r\n this.state.isError ?\r\n
\r\n :\r\n {this.state.responseMessage}{this.state.isWaveDescHaveValue ? {this.props.wizard.clearWaveDesc} : null}
\r\n : this.state.isSucess ?\r\n {this.state.responseMessage}
\r\n : null\r\n }\r\n\r\n {this.state.pendingMsg !== '' && this.state.pendingMsg !== undefined ?\r\n \r\n
\r\n : null}\r\n\r\n {this.state.warning1Msg !== '' && this.state.warning1Msg !== undefined ?\r\n {this.state.pendingMsg}
\r\n \r\n
\r\n : null}\r\n\r\n {this.state.warning2Msg !== '' && this.state.warning2Msg !== undefined ?\r\n {this.state.warning1Msg}
\r\n \r\n
\r\n : null}\r\n\r\n {this.state.warning2Msg}
\r\n \r\n
\r\n\r\n {this.state.isExpand ?\r\n \r\n
\r\n {this.props.wizard.tabHeader}
\r\n this.onExpandClick(e)} >{this.state.isExpand ? \"-\" : \"+\"}
\r\n \r\n
\r\n : null}\r\n \r\n {this.props.wizard.tabDesc}\r\n
\r\n\r\n \r\n \r\n\r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n
\r\n\r\n\r\n {/* \r\n this.state.isAllowedToEdit && this.handleUserInput(e)}\r\n />\r\n
\r\n \r\n \r\n
*/}\r\n \r\n\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n {this.props.wizard.priority}\r\n
\r\n\r\n \r\n {this.props.wizard.enbalementPriorityHoverText}\r\n
\r\n \r\n {this.props.wizard.prioritizationMetric}\r\n
\r\n \r\n {this.props.wizard.enablementMetricHoverText}\r\n
\r\n \r\n \r\n
\r\n\r\n this.state.isAllowedToEdit && this.handleCategoryChange(e)}>\r\n
\r\n - \r\n {priority}\r\n
\r\n\r\n\r\n\r\n {!!this.state.selectedCategory && this.state.data.length !== 0 ? //&& !this.state.isError?\r\n\r\n\r\n }\r\n\r\n
\r\n\r\n \r\n
\r\n : {this.state.selectedCategory}\r\n
\r\n\r\n \r\n {this.state.selectedCategory}\r\n
\r\n \r\n {this.props.wizard.metricPriority}\r\n
\r\n \r\n {this.props.wizard.metricPriorityHoverText}\r\n
\r\n \r\n \r\n
\r\n\r\n \r\n {this.state.data.length !== 0 ? rowItem :
\r\n {this.props.wizard.noDataFound}
}\r\n \r\n this.outsidePopupClick(e)}\r\n closeOnDocumentClick\r\n >\r\n \r\n
\r\n\r\n \r\n this.togglePopUp(e)}\r\n readOnly={true} // hide radio button \r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.props.wizard.applyPriorityChanges}\r\n
\r\n \r\n
\r\n \r\n this.continueNavigation(\"alert\")}\r\n color /> \r\n this.hideModal(\"alert\")}\r\n color /> \r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\nconst mapStateToProps = state => {\r\n return {\r\n // language: state.language,\r\n userData: state.valueStory,\r\n user: state.default,\r\n content: state.content.spendAnalysis.accountParameters,\r\n wizard: state.content.spendAnalysis.prioritizationWizard,\r\n validation: state.content.validation,\r\n spendDetails: state.spendDetails\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n getYourFileLoading: bool => dispatch(getYourFileLoading(bool)),\r\n currentActiveRequest: (requestDetails) => dispatch(currentActiveRequest(requestDetails)),\r\n UpdateRequestParameter: requestDetails => dispatch(UpdateRequestParameter(requestDetails)),\r\n currentActiveRequest: (requestDetails) => dispatch(currentActiveRequest(requestDetails)),\r\n getAllEnablementParameterPriority: (requestDetails) => dispatch(getAllEnablementParameterPriority(requestDetails)),\r\n updateEnablementParameterPriority: (data) => dispatch(updateEnablementParameterPriority(data)),\r\n pendingChanges: changes => dispatch(pendingChanges(changes)),\r\n getEnablementDetails: (data) => dispatch(getEnablementDetails(data))\r\n , redirectFromWizard: (flag) => dispatch(redirectFromWizard(flag)),\r\n updateEnablementStrategyWaveData: (DMCId, VSId, userEmail) => dispatch(updateEnablementStrategyWaveData(DMCId, VSId, userEmail)),\r\n\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EnablementStrategyWizard)\r\n","import React from \"react\";\r\nimport { BreakLine, roundFix } from 'utils/Utils'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n getManualKPIResourceTypeLoadData,\r\n} from 'actions/kpiActions'\r\nimport {\r\n resetError,\r\n defineScopeLoading,\r\n pendingChanges\r\n} from 'actions/spendActions'\r\nimport cloneDeep from 'lodash/cloneDeep';\r\nimport Popup from \"reactjs-popup\";\r\n\r\nclass EnablementKPITable extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n {\r\n this.state = {\r\n resourceHeaders: ['Resource Type', 'Account Type', 'Wave 1', 'Wave 2', 'Wave 3', 'Wave 4', 'Wave 5', 'Wave 6', 'Wave 7', 'Wave 8', 'Wave 9', 'Wave 10', 'Wave 11', 'Wave 12'],\r\n resourceTypeData: [],\r\n resourceTypeDataCopy: [],\r\n expandRowOrder: [1, 2, 0, 3, 4],\r\n collapseRowOrder: [0, 1, 2, 3, 4],\r\n isError: 'No',\r\n errorMsg: '',\r\n responseMsg: '',\r\n isExpand: false,\r\n showHideRow: true,\r\n errorCL: '',\r\n errorSEL: '',\r\n errorSIL: '',\r\n }\r\n }\r\n this.loadResponsetype = this.loadResponsetype.bind(this);\r\n this.createResourceTypeData = this.createResourceTypeData.bind(this);\r\n this.createResourceTypeObject = this.createResourceTypeObject.bind(this);\r\n this.showHideRow = this.showHideRow.bind(this);\r\n this.sortResourceTypeGrid = this.sortResourceTypeGrid.bind(this);\r\n }\r\n\r\n onExpandClick(e) {\r\n this.setState({ isExpand: !this.state.isExpand });\r\n }\r\n\r\n sortResourceTypeGrid(order) {\r\n let data = [];\r\n for (let i = 0; i < this.state.resourceTypeDataCopy.length; i++) {\r\n data.push(this.state.resourceTypeDataCopy[order[i]]);\r\n }\r\n this.setState({ resourceTypeData: data });\r\n }\r\n\r\n componentDidUpdate(nextProps) {\r\n if (\r\n // nextProps.kpiSelectedButton != this.props.kpiSelectedButton || \r\n (nextProps.kpiModel != this.props.kpiModel ||\r\n nextProps.isRefresh != this.props.isRefresh ||\r\n nextProps.enablementResourceParameters != this.props.enablementResourceParameters)\r\n && this.props.isRefresh\r\n ) {\r\n this.setState({ isExpand: false })\r\n this.loadResponsetype();\r\n }\r\n\r\n }\r\n\r\n\r\n loadResponsetype() {\r\n this.setState({ isError: 'No', errorMsg: '', responseMessage: '', showHideRow: true, errorSEL: '', errorCL: '', errorSIL: '' })\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let user = this.props.user.user.Email;\r\n let model = this.props.kpiModel;\r\n\r\n this.props.defineScopeLoading(true)\r\n //this.setState({ isLoading: true })\r\n this.props.getManualKPIResourceTypeLoadData(dmcId, vsId, user, model)\r\n .then((response) => {\r\n if (response.data.Result.length > 0) {\r\n let spData = response.data.Result;\r\n let tableData = this.createResourceTypeData(spData);\r\n this.props.defineScopeLoading(false);\r\n //this.setState({ resourceTypeData: tableData, isLoading: false });\r\n // // let data = [];\r\n\r\n // // data.push(tableData[1]);\r\n // // data.push(tableData[2]);\r\n // // data.push(tableData[0]);\r\n // // data.push(tableData[3]);\r\n // // data.push(tableData[4]);\r\n\r\n\r\n this.setState({ resourceTypeDataCopy: tableData, showHideRow: false });\r\n //this.sortResourceTypeGrid(this.state.expandRowOrder);\r\n if (this.state.showHideRow)\r\n this.sortResourceTypeGrid(this.state.expandRowOrder);\r\n else\r\n this.sortResourceTypeGrid(this.state.collapseRowOrder);\r\n this.props.EnablementStrategyrefreshResourceTable(false);\r\n //this.props.EnablementStrategyrefreshPriorityTable(true);\r\n } else {\r\n this.props.defineScopeLoading(false)\r\n //this.setState({ errorMsg: 'No result found. Please try reimporting the file.', isError: 'Yes', isLoading: false })\r\n }\r\n this.setState({ isExpand: true })\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n //this.setState({ errorMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n //this.setState({ errorMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n }\r\n })\r\n }\r\n\r\n createResourceTypeData(spData) {\r\n let tableData = [];\r\n\r\n let kpiArr = [...new Set(spData.map(item => item.RESOURCE_TYPE))];\r\n let kpiArr_Acc_Type = [...new Set(spData.map(item => item.ACCOUNT_TYPE))];\r\n\r\n //for every unique kpi name create table data for 12 quaters\r\n for (let i = 0; i < kpiArr.length; i++) {\r\n let temp = spData.filter(item => item.RESOURCE_TYPE == kpiArr[i])\r\n for (let i = 0; i < kpiArr_Acc_Type.length; i++) {\r\n let tempNew = temp.filter(item => item.ACCOUNT_TYPE == kpiArr_Acc_Type[i])\r\n if (tempNew.length > 0) {\r\n let obj = this.createResourceTypeObject(tempNew);\r\n tableData.push(obj)\r\n }\r\n }\r\n }\r\n\r\n //Sum the Supplier Enablement Lead Enterprise + Supplier Enablement Lead Standard and add it in first row position\r\n\r\n tableData.unshift(cloneDeep(tableData[0]));\r\n\r\n tableData[0].ACCOUNT_TYPE = 'Total';\r\n tableData[0].RESOURCE_VALUE_Q1 = tableData[1].RESOURCE_VALUE_Q1 + tableData[2].RESOURCE_VALUE_Q1;\r\n tableData[0].RESOURCE_VALUE_Q2 = tableData[1].RESOURCE_VALUE_Q2 + tableData[2].RESOURCE_VALUE_Q2;\r\n tableData[0].RESOURCE_VALUE_Q3 = tableData[1].RESOURCE_VALUE_Q3 + tableData[2].RESOURCE_VALUE_Q3;\r\n tableData[0].RESOURCE_VALUE_Q4 = tableData[1].RESOURCE_VALUE_Q4 + tableData[2].RESOURCE_VALUE_Q4;\r\n tableData[0].RESOURCE_VALUE_Q5 = tableData[1].RESOURCE_VALUE_Q5 + tableData[2].RESOURCE_VALUE_Q5;\r\n tableData[0].RESOURCE_VALUE_Q6 = tableData[1].RESOURCE_VALUE_Q6 + tableData[2].RESOURCE_VALUE_Q6;\r\n tableData[0].RESOURCE_VALUE_Q7 = tableData[1].RESOURCE_VALUE_Q7 + tableData[2].RESOURCE_VALUE_Q7;\r\n tableData[0].RESOURCE_VALUE_Q8 = tableData[1].RESOURCE_VALUE_Q8 + tableData[2].RESOURCE_VALUE_Q8;\r\n tableData[0].RESOURCE_VALUE_Q9 = tableData[1].RESOURCE_VALUE_Q9 + tableData[2].RESOURCE_VALUE_Q9;\r\n tableData[0].RESOURCE_VALUE_Q10 = tableData[1].RESOURCE_VALUE_Q10 + tableData[2].RESOURCE_VALUE_Q10;\r\n tableData[0].RESOURCE_VALUE_Q11 = tableData[1].RESOURCE_VALUE_Q11 + tableData[2].RESOURCE_VALUE_Q11;\r\n tableData[0].RESOURCE_VALUE_Q12 = tableData[1].RESOURCE_VALUE_Q12 + tableData[2].RESOURCE_VALUE_Q12;\r\n\r\n var enterpriseStandardFTE = this.props.enablementResourceParameters[0].FTES;\r\n tableData[0].RESOURCE_COLOR_Q1 = tableData[0].RESOURCE_VALUE_Q1 > enterpriseStandardFTE ? 'red' : 'black';\r\n tableData[0].RESOURCE_COLOR_Q2 = tableData[0].RESOURCE_VALUE_Q2 > enterpriseStandardFTE ? 'red' : 'black';\r\n tableData[0].RESOURCE_COLOR_Q3 = tableData[0].RESOURCE_VALUE_Q3 > enterpriseStandardFTE ? 'red' : 'black';\r\n tableData[0].RESOURCE_COLOR_Q4 = tableData[0].RESOURCE_VALUE_Q4 > enterpriseStandardFTE ? 'red' : 'black';\r\n tableData[0].RESOURCE_COLOR_Q5 = tableData[0].RESOURCE_VALUE_Q5 > enterpriseStandardFTE ? 'red' : 'black';\r\n tableData[0].RESOURCE_COLOR_Q6 = tableData[0].RESOURCE_VALUE_Q6 > enterpriseStandardFTE ? 'red' : 'black';\r\n tableData[0].RESOURCE_COLOR_Q7 = tableData[0].RESOURCE_VALUE_Q7 > enterpriseStandardFTE ? 'red' : 'black';\r\n tableData[0].RESOURCE_COLOR_Q8 = tableData[0].RESOURCE_VALUE_Q8 > enterpriseStandardFTE ? 'red' : 'black';\r\n tableData[0].RESOURCE_COLOR_Q9 = tableData[0].RESOURCE_VALUE_Q9 > enterpriseStandardFTE ? 'red' : 'black';\r\n tableData[0].RESOURCE_COLOR_Q10 = tableData[0].RESOURCE_VALUE_Q10 > enterpriseStandardFTE ? 'red' : 'black';\r\n tableData[0].RESOURCE_COLOR_Q11 = tableData[0].RESOURCE_VALUE_Q11 > enterpriseStandardFTE ? 'red' : 'black';\r\n tableData[0].RESOURCE_COLOR_Q12 = tableData[0].RESOURCE_VALUE_Q12 > enterpriseStandardFTE ? 'red' : 'black';\r\n\r\n for (let j = 1; j <= 12; j++) {\r\n if (this.state.errorSEL === '' && tableData[0]['RESOURCE_VALUE_Q' + j] > enterpriseStandardFTE)\r\n this.setState({ errorSEL: 'Supplier Enablement Lead' });\r\n }\r\n\r\n let err = '';\r\n err += this.state.errorSEL != '' ? ',' + this.state.errorSEL : '';\r\n err += this.state.errorCL != '' ? ',' + this.state.errorCL : '';\r\n err += this.state.errorSIL != '' ? ',' + this.state.errorSIL : '';\r\n\r\n err = err.substring(1, err.length);\r\n\r\n if (err != '')\r\n this.setErrorMsg('This Enablement Strategy exceeds the FTEs defined in the Enablement Resources per wave for ' + err + '.', '');\r\n\r\n return tableData;\r\n }\r\n\r\n createResourceTypeObject(kpiArr) {\r\n let obj = {}\r\n for (let i = 0; i < kpiArr.length; i++) {\r\n obj.VS_ID = kpiArr[i]['VS_ID']\r\n obj.DMC_ID = kpiArr[i]['DMC_ID']\r\n obj.RESOURCE_TYPE = kpiArr[i]['RESOURCE_TYPE']\r\n obj.ACCOUNT_TYPE = kpiArr[i]['ACCOUNT_TYPE']\r\n for (let j = 1; j <= 12; j++) {\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['RESOURCE_VALUE_Q' + j] = kpiArr[i]['RESOURCE_VALUE'];\r\n // if (obj.RESOURCE_TYPE == 'Supplier Enablement Lead' && obj.ACCOUNT_TYPE == 'Enterprise' && kpiArr[i]['QUARTER_NO'] == 'Q' + j) {\r\n // obj['RESOURCE_COLOR_Q' + j] = kpiArr[i]['RESOURCE_VALUE'] > this.props.enablementResourceParameters[1].FTES ? 'red' : 'black';\r\n // if (this.state.isError === 'No' && kpiArr[i]['RESOURCE_VALUE'] > this.props.enablementResourceParameters[1].FTES)\r\n // this.setErrorMsg('This E-Strategy exceeds SAP Best Practices for FTEs per wave.', '');\r\n // } \r\n // else if (obj.RESOURCE_TYPE == 'Supplier Enablement Lead' && obj.ACCOUNT_TYPE == 'Standard' && kpiArr[i]['QUARTER_NO'] == 'Q' + j) {\r\n // obj['RESOURCE_COLOR_Q' + j] = kpiArr[i]['RESOURCE_VALUE'] > this.props.enablementResourceParameters[1].FTES ? 'red' : 'black';\r\n // if (this.state.isError === 'No' && kpiArr[i]['RESOURCE_VALUE'] > this.props.enablementResourceParameters[1].FTES)\r\n // this.setErrorMsg('This E-Strategy exceeds SAP Best Practices for FTEs per wave.', '');\r\n // } \r\n // else \r\n if (obj.RESOURCE_TYPE == 'Catalog Lead' && kpiArr[i]['QUARTER_NO'] == 'Q' + j) {\r\n obj['RESOURCE_COLOR_Q' + j] = kpiArr[i]['RESOURCE_VALUE'] > this.props.enablementResourceParameters[2].FTES ? 'red' : 'black';\r\n if (this.state.errorCL === '' && kpiArr[i]['RESOURCE_VALUE'] > this.props.enablementResourceParameters[2].FTES)\r\n this.setState({ errorCL: 'Catalog Lead' });\r\n // if (this.state.isError === 'No' && kpiArr[i]['RESOURCE_VALUE'] > this.props.enablementResourceParameters[2].FTES)\r\n // this.setErrorMsg('This E-Strategy exceeds SAP Best Practices for FTEs per wave.', '');\r\n } else if (obj.RESOURCE_TYPE == 'Seller Integration Lead' && kpiArr[i]['QUARTER_NO'] == 'Q' + j) {\r\n obj['RESOURCE_COLOR_Q' + j] = kpiArr[i]['RESOURCE_VALUE'] > this.props.enablementResourceParameters[3].FTES ? 'red' : 'black';\r\n // if (this.state.isError === 'No' && kpiArr[i]['RESOURCE_VALUE'] > this.props.enablementResourceParameters[3].FTES)\r\n // this.setErrorMsg('This E-Strategy exceeds SAP Best Practices for FTEs per wave.', '');\r\n if (this.state.errorSIL === '' && kpiArr[i]['RESOURCE_VALUE'] > this.props.enablementResourceParameters[3].FTES)\r\n this.setState({ errorSIL: 'Seller Integration Lead' });\r\n }\r\n }\r\n }\r\n return obj;\r\n }\r\n\r\n setErrorMsg(ErrorMessage, ResponseMessage) {\r\n this.setState({ isError: 'Yes', errorMsg: ErrorMessage, responseMessage: ResponseMessage })\r\n }\r\n showHideRow() {\r\n this.setState({ showHideRow: !this.state.showHideRow });\r\n if (this.state.showHideRow)\r\n this.sortResourceTypeGrid(this.state.collapseRowOrder);\r\n else\r\n this.sortResourceTypeGrid(this.state.expandRowOrder);\r\n }\r\n\r\n render() {\r\n\r\n return (\r\n \r\n {this.props.content.noActiveRequestFile}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n user: state.default,\r\n spendDetails: state.spendDetails,\r\n content: state.content.spendAnalysis.enablementResourceParamaeters,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n defineScopeLoading: bool => dispatch(defineScopeLoading(bool)),\r\n getManualKPIResourceTypeLoadData: (DMCId, VSId, userEmail, model) => dispatch(getManualKPIResourceTypeLoadData(DMCId, VSId, userEmail, model))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EnablementKPITable);","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n getKPIDashBoardLoadData,\r\n updateKPIDashBoardTabData,\r\n getManualKPIDashBoardLoadData,\r\n updateEnablementStrategyWaveData,\r\n updateEnablementKPIDashBoardTabData,\r\n getUpdateEnablementKPIModel,\r\n GetManualKPIDashBoardLoadDataPercentCalc,\r\n saveIntermediateEnablementKPIDashBoardTabData,\r\n deleteIntermediateEnablementKPIDashBoardTabData\r\n //getManualKPIManualTargetFetch\r\n} from 'actions/kpiActions'\r\nimport {\r\n resetError,\r\n defineScopeLoading,\r\n pendingChanges,\r\n saveKPIOnRedirect,\r\n deleteIntermediateKPIOnRedirect,\r\n kpiModelChanged\r\n} from 'actions/spendActions'\r\nimport Select from 'react-select'\r\nimport { roundFix, BreakLine, round, formatThousands, addCurrencyMask, convertToNumber, convertToMillion, onChangeRemoveMask } from 'utils/Utils'\r\nimport reactSelectCjsDev from 'react-select/dist/react-select.cjs.dev';\r\nimport { path, routes, kpiRowCustomOrder, kpiFormatRowWithThousandMillion, kpiModel, kpiTargetShortNames } from 'Constants'\r\nimport classNames from \"classnames\";\r\nimport Button from 'UI/ButtonWithoutLoader'\r\nimport Popup from \"reactjs-popup\";\r\nimport MaskedInput from 'react-text-mask'\r\nimport createNumberMask from 'text-mask-addons/dist/createNumberMask'\r\nimport EnablementKPITable from './EnablementKPITable'\r\nimport DatePicker from 'react-datepicker';\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport Modal from 'reboron/OutlineModal'\r\nimport { changeModalStyle, changeModalContentStyle, backdropStyle, ROOT_URL, kpiConstantModalStyle } from 'Constants'\r\n\r\nconst changeBackdropStyle = Object.assign({}, backdropStyle);\r\nchangeBackdropStyle.zIndex = '1050';\r\n\r\nconst alertModalStyle = Object.assign({}, changeModalStyle);\r\nalertModalStyle.zIndex = '1060';\r\nalertModalStyle.width = '33%';\r\n\r\nconst kpiModalStyle = Object.assign({}, kpiConstantModalStyle);\r\nkpiModalStyle.zIndex = '1060';\r\n//kpiModalStyle.width = '1000px'\r\n\r\nclass EnablementStrategyKPI extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n //resourceHeaders: ['Resource Type', 'Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8', 'Q9', 'Q10', 'Q11', 'Q12'],\r\n headers: ['KPI Target', 'Metric', 'Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8', 'Q9', 'Q10', 'Q11', 'Q12', 'On Going Standard'],\r\n //quaterly data may be added revisit logic \r\n colGroupYearly: [{ key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 1, value: '' }, { key: 2, value: 'Year1' }, { key: 2, value: 'Year2' }, { key: 2, value: 'Year3' }],\r\n tableData: [],\r\n editedRowsIds: [],\r\n selectedBPValue: 'Average 50%',\r\n metricValues: [],\r\n selectedMetricValue: 'ALL',\r\n selectedBPFlag: 'AVERAGE',\r\n kpiBenchMarkFilters: { metric: 'ALL', type: 'AVERAGE' },\r\n isExpand: true,\r\n selectedKPIButton: 3,\r\n selectedKPIButtonBeforeAlert: 3,\r\n // resourceTypeData: [],\r\n goLiveDate: null,\r\n startdate: null,\r\n didComponentMount: false,\r\n KPIModelDB: 1,\r\n //isDataLoaded : false,\r\n KPIheaders2: ['KPI Target', 'Addressable Totals', 'Metrics', 'Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8', 'Q9', 'Q10', 'Q11', 'Q12', 'On Going Standard'],\r\n KPItableData: [],\r\n metricID_Edited: [],\r\n kpiPopupError: [],\r\n }\r\n this.loadData = this.loadData.bind(this);\r\n this.createTableData = this.createTableData.bind(this);\r\n this.createTableDataObject = this.createTableDataObject.bind(this);\r\n this.handleActualValChange = this.handleActualValChange.bind(this);\r\n this.handleTargetInQuarterValChange = this.handleTargetInQuarterValChange.bind(this);\r\n this.onSave = this.onSave.bind(this);\r\n this.setStartDate = this.setStartDate.bind(this);\r\n this.setGoLiveDate = this.setGoLiveDate.bind(this);\r\n //this.loadResponsetype = this.loadResponsetype.bind(this);\r\n }\r\n\r\n setStartDate(date) {\r\n this.props.pendingChanges(true)\r\n this.setState({ startdate: date, isSaveInProgress: true, responseMsg: \"Pending changes. Click save to update KPIs.\", })\r\n }\r\n\r\n setGoLiveDate(date) {\r\n this.props.pendingChanges(true);\r\n this.setState({ goLiveDate: date, isSaveInProgress: true, responseMsg: \"Pending changes. Click save to update KPIs.\", })\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData(true)\r\n this.setState({ currencySymbol: this.props.spendDetails.currentActiveRequest !== undefined ? this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()] : '' })\r\n }\r\n\r\n componentDidUpdate(nextProps) {\r\n if (\r\n (nextProps.kpiSelectedModel != this.props.kpiSelectedModel\r\n || nextProps.kpiSelectedButton != this.props.kpiSelectedButton\r\n || nextProps.isSaveClicked != this.props.isSaveClicked\r\n || nextProps.isKPIDataLoaded != this.props.isKPIDataLoaded\r\n //|| nextProps.isKPIDataLoaded != this.props.isKPIDataLoaded\r\n || nextProps.isResourceParamterSaved !== this.props.isResourceParamterSaved\r\n ) &&\r\n this.props.isKPIDataLoaded == false\r\n //&& prevState.didComponentMount != this.state.didComponentMount\r\n ) {\r\n setTimeout(() => {\r\n if (this.props.isKPIDataLoaded == false) {\r\n this.loadData(false);\r\n }\r\n }, 1000)\r\n }\r\n\r\n if ((nextProps.isDeleteKPITable != this.props.isDeleteKPITable) && this.props.isDeleteKPITable) {\r\n this.deleteIntermediateKPITable();\r\n }\r\n\r\n }\r\n\r\n deleteIntermediateKPITable() {\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let user = this.props.user.user.Email;\r\n this.props.deleteIntermediateEnablementKPIDashBoardTabData(dmcId, vsId, user)\r\n .then((response) => {\r\n })\r\n }\r\n\r\n loadData(isLoad) {\r\n if (!isLoad)\r\n this.props.pendingChanges(true);\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let user = this.props.user.user.Email;\r\n let model = this.props.kpiSelectedModel == 1 ? 1 : this.state.selectedKPIButton;\r\n //let model = this.state.selectedKPIButton;\r\n\r\n this.props.defineScopeLoading(true)\r\n this.setState({ isLoading: true })\r\n\r\n this.props.getUpdateEnablementKPIModel(dmcId, vsId, user, 'R', 1)\r\n .then((response) => {\r\n var data = response.data.Result[0];\r\n this.setState({ KPIModelDB: data.KPI_MODEL });\r\n //this.setState({ selectedModel: data.KPI_MODEL == null ? 1 : data.KPI_MODEL ,kpiSelectedButton: data.KPI_BUTTON == null ? 3 : data.KPI_BUTTON});\r\n //model = data.KPI_MODEL == null ? 1 : data.KPI_MODEL;\r\n if (isLoad) {\r\n this.setState({ selectedKPIButton: data.KPI_BUTTON == null ? 3 : data.KPI_BUTTON });\r\n model = this.state.selectedKPIButton;\r\n this.props.EnablementStrategyModelUpdate(data.KPI_MODEL == null ? 1 : data.KPI_MODEL);\r\n }\r\n\r\n if (this.props.kpiSelectedModel == 2 && model == 1) {\r\n model = 3;\r\n this.setState({ selectedKPIButton: 3 });\r\n }\r\n else if (this.props.kpiSelectedModel == 1)\r\n this.setState({ selectedKPIButton: 1 });\r\n\r\n this.props.getManualKPIDashBoardLoadData(dmcId, vsId, user, this.props.kpiSelectedModel, model)\r\n .then((response) => {\r\n if (response.data.Result.length > 0) {\r\n let spData = response.data.Result;\r\n let tableData = this.createTableData(spData);\r\n this.props.defineScopeLoading(false);\r\n let goLiveDate = spData[0][\"GO_LIVE_DATE\"] !== null ? new Date(spData[0][\"GO_LIVE_DATE\"]) : null;\r\n let projectStartDate = spData[0][\"PROJECT_START_DATE\"] !== null ? new Date(spData[0][\"PROJECT_START_DATE\"]) : null;\r\n this.setState({ tableData: tableData, isError: 'No', errorMsg: '', responseMsg: '', isLoading: false, goLiveDate: goLiveDate, startdate: projectStartDate })\r\n let kpiButtonCallBackVal = this.state.selectedKPIButton;\r\n if (this.state.selectedKPIButton == 5)\r\n kpiButtonCallBackVal = 0;\r\n\r\n this.props.EnablementStrategyKPIButtonClick(kpiButtonCallBackVal);\r\n this.props.UpdateKPIDataLoaded(true);\r\n //this.props.UpdateResourceParamDataLoaded(true);\r\n if (this.state.selectedKPIButton == 6) {\r\n this.loadKPIData(isLoad);\r\n }\r\n if (isLoad) {\r\n this.saveEnabalementStrategyWave(true);\r\n //this.props.UpdateKPIDataLoaded(true);\r\n this.setState({ didComponentMount: true });\r\n }\r\n else if(!isLoad && this.props.shouldCallWaveCalc){\r\n this.props.EnablementStrategyrefreshResourceTable(true);\r\n this.props.pendingChanges(null);\r\n }\r\n else{\r\n this.setState({ responseMsg: \"Pending changes. Click save to update KPI Dashboard.\" });\r\n\r\n }//this.props.EnablementStrategyrefreshResourceTable(true);\r\n //this.loadResponsetype();\r\n } else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'No result found. Please try reimporting the file.', isError: 'Yes', isLoading: false })\r\n }\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n }\r\n });\r\n });\r\n }\r\n\r\n // benchMarkAdjusted(element) {\r\n // let val = onChangeRemoveMask(element, '%')\r\n // let id = element.target.id;\r\n // let data = this.state.tableData;\r\n // let unique = this.state.metricFilteredData;\r\n // let selectedBPValue = this.state.selectedBPValue\r\n // let key = ''\r\n // let flag = ''\r\n // if (selectedBPValue == 'Top 25%') {\r\n // key = 'TOP_BENCHMARK_ADJUS'\r\n // flag = 'TOP_25'\r\n // } else if (selectedBPValue == 'Average 50%') {\r\n // key = 'AVG_BENCHMARK_ADJUS'\r\n // flag = 'AVERAGE'\r\n // } else {\r\n // key = 'BOTTOM_BENCHMARK_ADJUS'\r\n // flag = 'BOTTOM_25'\r\n // }\r\n\r\n // let metricID_Edited = this.state.metricID_Edited;\r\n // metricID_Edited.push(data[id]['METRIC_ID'])\r\n\r\n // if (data[id]['BA1'] != val) {\r\n // data[id]['BA1'] = val;\r\n // this.state.selectedSpanValue == 'Half' ? this.calcBenchMarkSpend(data[id], id, data) : this.calcBenchMarkSpendForQuater(data[id], id, data)\r\n // this.props.pendingChanges(true)\r\n // this.setState({ unique: unique, isSaveInProgress: true, responseMsg: \"Pending changes. Click save to update KPIs.\", keyBPSelected: key, selectedBPFlag: flag, metricID_Edited: metricID_Edited })\r\n // }\r\n // }\r\n\r\n hQPercentChanged(element) {\r\n let cellId = element.target.attributes.cellId.nodeValue;\r\n let val = onChangeRemoveMask(element, '%');\r\n let id = element.target.id;\r\n let data = this.state.KPItableData;\r\n let unique = this.state.metricFilteredData;\r\n let metricID_Edited = this.state.metricID_Edited;\r\n metricID_Edited.push(data[id]['METRIC_ID'])\r\n if (data[id][cellId] != val) {\r\n data[id][cellId] = val;\r\n this.calcBenchMarkSpendForQuater(data[id], id, data)\r\n this.props.pendingChanges(true)\r\n this.setState({ KPItableData: data, unique: unique, isSaveInProgress: true, responseMsg: \"Pending changes. Click save to update KPIs.\", metricID_Edited: metricID_Edited })\r\n }\r\n }\r\n\r\n //createKPITableData(data, selectedBPValue) {\r\n createKPITableData(data) {\r\n let tableData = []\r\n // let key = '' //this key is used to map ui metric value with HANA col value\r\n // if (selectedBPValue == 'Top 25%') {\r\n // key = 'TOP_25'\r\n // } else if (selectedBPValue == 'Average 50%') {\r\n // key = 'AVERAGE'\r\n // } else {\r\n // key = 'BOTTOM_25'\r\n // }\r\n // //filter data to get unique arr with selected metric and industry values\r\n // let unique = data.filter(item => item.BENCHMARK_TYPE == key)\r\n\r\n let unique = data;\r\n\r\n //use kpiArr to further filter data on granular level as HANA data has many duplicate records\r\n let kpiArr = ['Invoice Spend on Business Network', 'Invoice Count via Business Network', 'PO Spend on Business Network', 'PO Count via Business Network', 'Suppliers in Business Network']\r\n for (let i = 0; i < kpiArr.length; i++) {\r\n let temp = unique.filter(item => item.KPI_NAME == kpiArr[i])\r\n let obj = this.createKPITableDataObject(temp)\r\n tableData.push(obj)\r\n }\r\n //tableData.sort((a, b) => (a.srNo > b.srNo) ? 1 : -1)//sort the table always by sr_no\r\n tableData.sort((a, b) => kpiRowCustomOrder[a.srNo] - kpiRowCustomOrder[b.srNo]);\r\n return tableData;\r\n }\r\n\r\n remove(array, key, value) {\r\n const index = array.findIndex(obj => obj[key] === value);\r\n if (index >= 0)\r\n array.splice(index, 1);\r\n }\r\n\r\n calcBenchMarkSpendForQuater(obj, key, data) {\r\n // //benchmark calc (BR2, BA2)\r\n // let spend1 = round((obj.BR1 * obj.efo) / 100, 2);\r\n // let spend2 = round((obj.BA1 * obj.efo) / 100, 2);\r\n\r\n // data[key].BR2 = spend1;\r\n // data[key].BA2 = spend2;\r\n\r\n //cumulative % calc (H12, H22, H32, H42, H52, H62)\r\n let element = data[key];\r\n element.HQ12 = Number(element.HQ11);\r\n element.HQ22 = Number(element.HQ11) + Number(element.HQ21);\r\n element.HQ32 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31);\r\n element.HQ42 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41);\r\n element.HQ52 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41) + Number(element.HQ51);\r\n element.HQ62 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41) + Number(element.HQ51) + Number(element.HQ61);\r\n element.HQ72 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41) + Number(element.HQ51) + Number(element.HQ61) + Number(element.HQ71);\r\n element.HQ82 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41) + Number(element.HQ51) + Number(element.HQ61) + Number(element.HQ71) + Number(element.HQ81);\r\n element.HQ92 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41) + Number(element.HQ51) + Number(element.HQ61) + Number(element.HQ71) + Number(element.HQ81) + Number(element.HQ91);\r\n element.HQ102 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41) + Number(element.HQ51) + Number(element.HQ61) + Number(element.HQ71) + Number(element.HQ81) + Number(element.HQ91) + Number(element.HQ101);\r\n element.HQ112 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41) + Number(element.HQ51) + Number(element.HQ61) + Number(element.HQ71) + Number(element.HQ81) + Number(element.HQ91) + Number(element.HQ101) + Number(element.HQ111);\r\n element.HQ122 = Number(element.HQ11) + Number(element.HQ21) + Number(element.HQ31) + Number(element.HQ41) + Number(element.HQ51) + Number(element.HQ61) + Number(element.HQ71) + Number(element.HQ81) + Number(element.HQ91) + Number(element.HQ101) + Number(element.HQ111) + Number(element.HQ121);\r\n\r\n\r\n this.remove(this.state.kpiPopupError, \"name\", kpiTargetShortNames[element.kpi]);\r\n\r\n if (element.HQ122 == 0) {\r\n this.setState({ isPopupError: 'No', popupErrorMsg: '' })\r\n }\r\n else if (element.HQ122 > 100) {\r\n let obj = {};\r\n obj.name = kpiTargetShortNames[element.kpi];\r\n obj.isPopupError = 'Yes';\r\n obj.popupErrorMsg = \"Error: \" + kpiTargetShortNames[element.kpi] + \" KPI is greater than 100%.\";\r\n this.state.kpiPopupError.push(obj);\r\n this.setState({ isPopupError: 'Yes', popupErrorMsg: \"Error: \" + kpiTargetShortNames[element.kpi] + \" KPI is greater than 100%.\" })\r\n }\r\n else if (element.HQ122 < 100) {\r\n let obj = {};\r\n obj.name = kpiTargetShortNames[element.kpi];\r\n obj.isPopupError = 'Warning';\r\n obj.popupErrorMsg = \"Warning: \" + kpiTargetShortNames[element.kpi] + \" KPI is less than 100%.\";\r\n this.state.kpiPopupError.push(obj);\r\n this.setState({ isPopupError: 'Warning', popupErrorMsg: \"Error: \" + kpiTargetShortNames[element.kpi] + \" KPI is less than 100%.\" })\r\n }\r\n else {\r\n this.setState({ isPopupError: 'No', popupErrorMsg: '' })\r\n }\r\n\r\n //Target H calc (H13, H23, H33, H43, H53, H63)\r\n element.HQ13 = round((element.spend * element.HQ11) / 100, 2);\r\n element.HQ23 = round((element.spend * element.HQ21) / 100, 2);\r\n element.HQ33 = round((element.spend * element.HQ31) / 100, 2);\r\n element.HQ43 = round((element.spend * element.HQ41) / 100, 2);\r\n element.HQ53 = round((element.spend * element.HQ51) / 100, 2);\r\n element.HQ63 = round((element.spend * element.HQ61) / 100, 2);\r\n element.HQ73 = round((element.spend * element.HQ71) / 100, 2);\r\n element.HQ83 = round((element.spend * element.HQ81) / 100, 2);\r\n element.HQ93 = round((element.spend * element.HQ91) / 100, 2);\r\n element.HQ103 = round((element.spend * element.HQ101) / 100, 2);\r\n element.HQ113 = round((element.spend * element.HQ111) / 100, 2);\r\n element.HQ123 = round((element.spend * element.HQ121) / 100, 2);\r\n\r\n //Target Cumulative calc (H14, H24, H34, H44, H54, H64)\r\n element.HQ14 = round(element.HQ13, 2);\r\n element.HQ24 = round(element.HQ13 + element.HQ23, 2);\r\n element.HQ34 = round(element.HQ13 + element.HQ23 + element.HQ33, 2);\r\n element.HQ44 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43, 2);\r\n element.HQ54 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43 + element.HQ53, 2);\r\n element.HQ64 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43 + element.HQ53 + element.HQ63, 2);\r\n element.HQ74 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43 + element.HQ53 + element.HQ63 + element.HQ73, 2);\r\n element.HQ84 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43 + element.HQ53 + element.HQ63 + element.HQ73 + element.HQ83, 2);\r\n element.HQ94 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43 + element.HQ53 + element.HQ63 + element.HQ73 + element.HQ83 + element.HQ93, 2);\r\n element.HQ104 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43 + element.HQ53 + element.HQ63 + element.HQ73 + element.HQ83 + element.HQ93 + element.HQ103, 2);\r\n element.HQ114 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43 + element.HQ53 + element.HQ63 + element.HQ73 + element.HQ83 + element.HQ93 + element.HQ103 + element.HQ113, 2);\r\n element.HQ124 = round(element.HQ13 + element.HQ23 + element.HQ33 + element.HQ43 + element.HQ53 + element.HQ63 + element.HQ73 + element.HQ83 + element.HQ93 + element.HQ103 + element.HQ113 + element.HQ123, 2);\r\n\r\n this.setState({ KPItableData: data })\r\n }\r\n\r\n //this function creates an object for each single row of kpi setup table which is used to construct table data\r\n createKPITableDataObject(kpiArr) {\r\n let obj = {};\r\n for (let i = 0; i < kpiArr.length; i++) {\r\n obj.METRIC_ID = kpiArr[i]['METRIC_ID']\r\n obj.VS_ID = kpiArr[i]['VS_ID']\r\n obj.DMC_ID = kpiArr[i]['DMC_ID']\r\n obj.kpi = kpiArr[i]['KPI_NAME']\r\n obj.srNo = kpiArr[i]['KPI_SR_NO']\r\n obj.BENCHMARK_METRICS = kpiArr[i]['BENCHMARK_METRICS']\r\n if (i == 0) obj.spend = kpiArr[i]['SPEND_DATA_VALUE']\r\n obj.efo = kpiArr[i]['ELIGIBLE_FOR_ONBOARDING']\r\n obj.efo2 = kpiArr[i]['ELIGIBLE_FOR_ONBOARDING'] / 1000000 //adding this for masked input for spend data\r\n obj.BR1 = roundFix(kpiArr[i]['BENCHMARK_RECOMD'], 2)\r\n obj.BR2 = 0\r\n obj.BA1 = roundFix(kpiArr[i]['BENCHMARK_ADJUS'], 2)\r\n obj.BA2 = 0\r\n obj.HR = 'hr'\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q1') obj.HQ11 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ12 = 0\r\n obj.HQ13 = 0\r\n obj.HQ14 = 0\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q2') obj.HQ21 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ22 = 0\r\n obj.HQ23 = 0\r\n obj.HQ24 = 0\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q3') obj.HQ31 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ32 = 0\r\n obj.HQ33 = 0\r\n obj.HQ34 = 0\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q4') obj.HQ41 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ42 = 0\r\n obj.HQ43 = 0\r\n obj.HQ44 = 0\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q5') obj.HQ51 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ52 = 0\r\n obj.HQ53 = 0\r\n obj.HQ54 = 0\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q6') obj.HQ61 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ62 = 0\r\n obj.HQ63 = 0\r\n obj.HQ64 = 0\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q7') obj.HQ71 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ72 = 0\r\n obj.HQ73 = 0\r\n obj.HQ74 = 0\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q8') obj.HQ81 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ82 = 0\r\n obj.HQ83 = 0\r\n obj.HQ84 = 0\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q9') obj.HQ91 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ92 = 0\r\n obj.HQ93 = 0\r\n obj.HQ94 = 0\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q10') obj.HQ101 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ102 = 0\r\n obj.HQ103 = 0\r\n obj.HQ104 = 0\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q11') obj.HQ111 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ112 = 0\r\n obj.HQ113 = 0\r\n obj.HQ114 = 0\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q12') obj.HQ121 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ122 = 0\r\n obj.HQ123 = 0\r\n obj.HQ124 = 0\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q13') {\r\n obj.HQ131 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ132 = kpiArr[i]['H_PERCENTAGE_VALUE']\r\n obj.HQ133 = kpiArr[i]['TARGET_VALUE']\r\n obj.HQ134 = kpiArr[i]['CUMULATIVE_TARGET_VALUE']\r\n }\r\n obj.H11 = Number(obj.HQ11) + Number(obj.HQ21)\r\n obj.H12 = 0\r\n obj.H13 = 0\r\n obj.H14 = 0\r\n obj.H21 = Number(obj.HQ31) + Number(obj.HQ41)\r\n obj.H22 = 0\r\n obj.H23 = 0\r\n obj.H24 = 0\r\n obj.H31 = Number(obj.HQ51) + Number(obj.HQ61)\r\n obj.H32 = 0\r\n obj.H33 = 0\r\n obj.H34 = 0\r\n obj.H41 = Number(obj.HQ71) + Number(obj.HQ81)\r\n obj.H42 = 0\r\n obj.H43 = 0\r\n obj.H44 = 0\r\n obj.H51 = Number(obj.HQ91) + Number(obj.HQ101)\r\n obj.H52 = 0\r\n obj.H53 = 0\r\n obj.H54 = 0\r\n obj.H61 = Number(obj.HQ111) + Number(obj.HQ121)\r\n obj.H62 = 0\r\n obj.H63 = 0\r\n obj.H64 = 0\r\n\r\n\r\n }\r\n\r\n return obj;\r\n }\r\n\r\n loadKPIData(isLoad) {\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let user = this.props.user.user.Email;\r\n this.props.defineScopeLoading(true)\r\n this.setState({ isLoading: true })\r\n this.props.GetManualKPIDashBoardLoadDataPercentCalc(dmcId, vsId, user)\r\n .then((response) => {\r\n if (response.data.Result.length > 0) {\r\n let spData = response.data.Result;\r\n // let unique = spData.filter(item => item.BENCHMARK_METRICS == this.state.selectedMetricValue)\r\n // //https://stackoverflow.com/questions/15125920/how-to-get-distinct-values-from-an-array-of-objects-in-javascript\r\n // // let unique = [...new Map(temp.map(item =>\r\n // // [item['METRIC_ID'], item])).values()];\r\n\r\n // let uniqueMetrics = [...new Set(spData.map(item => item.BENCHMARK_METRICS))];\r\n // let metricValues = [];\r\n // for (let i = 0; i < uniqueMetrics.length; i++) {\r\n // let obj = {}\r\n // obj.label = uniqueMetrics[i]\r\n // obj.value = uniqueMetrics[i]\r\n\r\n // metricValues.push(obj)\r\n // }\r\n\r\n //let KPItableData = this.createKPITableData(unique, this.state.selectedBPValue)\r\n let KPItableData = this.createKPITableData(spData);\r\n\r\n let data = KPItableData;\r\n for (let i = 0; i < data.length; i++) {\r\n this.calcBenchMarkSpendForQuater(data[i], i, data)\r\n }\r\n this.props.defineScopeLoading(false)\r\n this.setState({ KPItableData: KPItableData, isLoading: false, isSaveInProgress: false, dataLoaded: true })\r\n if (!isLoad)\r\n this.showModal(\"KPI\");\r\n } else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'No result found. Please try reimporting the file.', isError: 'Yes', isLoading: false })\r\n }\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n }\r\n })\r\n }\r\n\r\n\r\n createTableData(spData) {\r\n let tableData = [];\r\n\r\n //create an array with unique kpi names from sp data\r\n let kpiArr = [...new Set(spData.map(item => item.KPI_NAME))];\r\n\r\n //for every unique kpi name create table data for 12 quaters\r\n for (let i = 0; i < kpiArr.length; i++) {\r\n let temp = spData.filter(item => item.KPI_NAME == kpiArr[i])\r\n let obj = this.createTableDataObject(temp)\r\n tableData.push(obj)\r\n }\r\n //tableData.sort((a, b) => (a.srNo > b.srNo) ? 1 : -1)//sort the table always by sr_no\r\n\r\n\r\n tableData.sort((a, b) => kpiRowCustomOrder[a.srNo] - kpiRowCustomOrder[b.srNo]);\r\n\r\n return tableData;\r\n }\r\n\r\n\r\n\r\n createTableDataObject(kpiArr) {\r\n let obj = {}\r\n for (let i = 0; i < kpiArr.length; i++) {\r\n obj.VS_ID = kpiArr[i]['VS_ID']\r\n obj.DMC_ID = kpiArr[i]['DMC_ID']\r\n obj.kpi = kpiArr[i]['KPI_NAME']\r\n obj.QUARTER_NO = kpiArr[i]['QUARTER_NO']\r\n obj.srNo = kpiArr[i]['SR_NO']\r\n obj.HR = 'hr'\r\n for (let j = 1; j <= 13; j++) {\r\n // if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['TagetKpi_Q' + j] = kpiArr[i]['TARGET_KPI_CUMULATIVE']\r\n // if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['SE_Targeted_Q' + j] = kpiArr[i]['SE_TARGETED']\r\n // if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['SE_Estimated_Q' + j] = kpiArr[i]['SE_ESTIMATED']\r\n // if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['Actual_Q' + j] = kpiArr[i]['SR_NO'] % 2 == 0 ? kpiArr[i]['ACTUAL_VALUE'] / 1000000 : kpiArr[i]['ACTUAL_VALUE']\r\n // if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['Gap_Q' + j] = kpiArr[i]['GAP_VALUE']\r\n // if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['Attainment_Q' + j] = kpiArr[i]['ATTAINMENT_VALUE']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['TagetKpi_Q' + j] = kpiArr[i]['SE_TARGETED_CUMULATIVE']\r\n if (kpiArr[i]['QUARTER_NO'] == 'Q' + j) obj['SE_Targeted_Q' + j] = kpiArr[i]['SE_TARGETED']\r\n }\r\n }\r\n return obj;\r\n }\r\n\r\n handleActualValChange(element) {\r\n let id = element.target.id;\r\n let editedRowsIds = this.state.editedRowsIds;\r\n let cellId = element.target.attributes.cellId.nodeValue;\r\n //let val = id % 2 == 0 ? onChangeRemoveMask(element, '') : onChangeRemoveMask(element, this.state.currencySymbol);\r\n let val = kpiFormatRowWithThousandMillion[id] == 'Million' ? onChangeRemoveMask(element, '') : onChangeRemoveMask(element, this.state.currencySymbol);\r\n if (val == \"\") val = null;\r\n let data = this.state.tableData;\r\n if (data[id][cellId] != val) {\r\n data[id][cellId] = val;\r\n //save the edited row id number\r\n if (!editedRowsIds.includes(id)) editedRowsIds.push(id);\r\n this.runCalcFormulae(data[id], id, data)\r\n this.props.pendingChanges(true);\r\n this.setState({ editedRowsIds: editedRowsIds, isSaveInProgress: true, isError: 'No', responseMsg: \"Pending changes. Click save to update KPI Dashboard.\" })\r\n }\r\n }\r\n\r\n handleTargetInQuarterValChange(element) {\r\n let id = element.target.id;\r\n let editedRowsIds = this.state.editedRowsIds;\r\n let cellId = element.target.attributes.cellId.nodeValue;\r\n //let val = id % 2 == 0 ? onChangeRemoveMask(element, '') : onChangeRemoveMask(element, this.state.currencySymbol);\r\n let val = kpiFormatRowWithThousandMillion[id] == 'Million' ? onChangeRemoveMask(element, '') : onChangeRemoveMask(element, this.state.currencySymbol);\r\n if (val == \"\") val = null;\r\n let data = this.state.tableData;\r\n if (data[id][cellId] != val) {\r\n data[id][cellId] = Number(val);\r\n //save the edited row id number\r\n if (!editedRowsIds.includes(id)) editedRowsIds.push(id);\r\n this.runCalcFormulae(data[id], id, data)\r\n this.props.pendingChanges(true);\r\n this.setState({ editedRowsIds: editedRowsIds, isSaveInProgress: true, isError: 'No', responseMsg: \"Pending changes. Click save to update KPI Dashboard.\" })\r\n }\r\n }\r\n\r\n runCalcFormulae(obj, id, data) {\r\n let element = data[id];\r\n // Targeted Cumulative calculation \r\n element.TagetKpi_Q1 = element.SE_Targeted_Q1;\r\n element.TagetKpi_Q2 = (element.TagetKpi_Q1 == undefined ? 0 : element.TagetKpi_Q1) + (element.SE_Targeted_Q2 == undefined ? 0 : element.SE_Targeted_Q2);\r\n element.TagetKpi_Q3 = (element.TagetKpi_Q2 == undefined ? 0 : element.TagetKpi_Q2) + (element.SE_Targeted_Q3 == undefined ? 0 : element.SE_Targeted_Q3);\r\n element.TagetKpi_Q4 = (element.TagetKpi_Q3 == undefined ? 0 : element.TagetKpi_Q3) + (element.SE_Targeted_Q4 == undefined ? 0 : element.SE_Targeted_Q4);\r\n element.TagetKpi_Q5 = (element.TagetKpi_Q4 == undefined ? 0 : element.TagetKpi_Q4) + (element.SE_Targeted_Q5 == undefined ? 0 : element.SE_Targeted_Q5);\r\n element.TagetKpi_Q6 = (element.TagetKpi_Q5 == undefined ? 0 : element.TagetKpi_Q5) + (element.SE_Targeted_Q6 == undefined ? 0 : element.SE_Targeted_Q6);\r\n element.TagetKpi_Q7 = (element.TagetKpi_Q6 == undefined ? 0 : element.TagetKpi_Q6) + (element.SE_Targeted_Q7 == undefined ? 0 : element.SE_Targeted_Q7);\r\n element.TagetKpi_Q8 = (element.TagetKpi_Q7 == undefined ? 0 : element.TagetKpi_Q7) + (element.SE_Targeted_Q8 == undefined ? 0 : element.SE_Targeted_Q8);\r\n element.TagetKpi_Q9 = (element.TagetKpi_Q8 == undefined ? 0 : element.TagetKpi_Q8) + (element.SE_Targeted_Q9 == undefined ? 0 : element.SE_Targeted_Q9);\r\n element.TagetKpi_Q10 = (element.TagetKpi_Q9 == undefined ? 0 : element.TagetKpi_Q9) + (element.SE_Targeted_Q10 == undefined ? 0 : element.SE_Targeted_Q10);\r\n element.TagetKpi_Q11 = (element.TagetKpi_Q10 == undefined ? 0 : element.TagetKpi_Q10) + (element.SE_Targeted_Q11 == undefined ? 0 : element.SE_Targeted_Q11);\r\n element.TagetKpi_Q12 = (element.TagetKpi_Q11 == undefined ? 0 : element.TagetKpi_Q11) + (element.SE_Targeted_Q12 == undefined ? 0 : element.SE_Targeted_Q12);\r\n\r\n this.setState({ tableData: data })\r\n }\r\n\r\n\r\n shouldComponentUpdate(nextProps) {\r\n if ((nextProps.isSaveClicked !== this.props.isSaveClicked\r\n || nextProps.isResourceParamterSaved !== this.props.isResourceParamterSaved)\r\n //|| this.nextProps.saveKPIOnRedirect !== this.props.saveKPIOnRedirect\r\n && nextProps.isSaveClicked\r\n && nextProps.isResourceParamterSaved\r\n ) {\r\n setTimeout(() => {\r\n this.props.EnablementStrategyKPIChanges();\r\n this.onSave();\r\n // if (this.state.selectedKPIButton == 5)\r\n // this.onKPIManualDashboardSave();\r\n // else\r\n // this.saveEnabalementStrategyWave();\r\n }, 2000)\r\n }\r\n return true\r\n }\r\n\r\n\r\n saveEnabalementStrategyWave(isLoad) {\r\n // let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n // let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n // let user = this.props.user.user.Email;\r\n\r\n // this.props.updateEnablementStrategyWaveData(dmcId, vsId, user)\r\n // .then((response) => {\r\n // if (response.data.Result.length > 0) { \r\n // let spData = response.data.Result;\r\n // let tableData = this.createTableData(spData);\r\n // this.setState({ tableData: tableData, isError: 'No', errorMsg: '', responseMsg: '', isLoading: false })\r\n // }\r\n\r\n let kpiButtonCallBackVal = this.state.selectedKPIButton;\r\n if (this.state.selectedKPIButton == 5)\r\n kpiButtonCallBackVal = 0;\r\n this.props.EnablementStrategyKPIButtonClick(kpiButtonCallBackVal);\r\n //this.props.EnablementStrategyrefreshResourceTable(true);\r\n this.props.UpdateResourceParamDataLoaded(true);\r\n //this.props.EnablementStrategyrefreshPriorityTable(true);\r\n this.props.pendingChanges(false);\r\n this.props.handleIsResourceParamterSaved(true);\r\n this.props.saveKPIOnRedirect(null);\r\n this.props.deleteIntermediateKPIOnRedirect(null);\r\n if(!isLoad)\r\n this.props.EnablementStrategyShouldCallWaveCalc(true);\r\n\r\n this.setState({ errorMsg: '', isError: 'No', responseMsg: '' });\r\n // }).catch((error) => {\r\n // if (error.stack.includes('Network Error')) {\r\n // this.props.defineScopeLoading(false)\r\n // this.setState({ errorMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n // }\r\n // else {\r\n // this.props.defineScopeLoading(false)\r\n // this.setState({ errorMsg: this.props.content.error, isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n // }\r\n // this.props.handleIsResourceParamterSaved(true);\r\n // })\r\n }\r\n\r\n onKPIManualDashboardSave() {\r\n let data = []\r\n //let editedRowsIds = this.state.editedRowsIds;\r\n let editedRowsIds = [0, 1, 2, 3, 4];\r\n let tableData = this.state.tableData;\r\n for (let i = 0; i < editedRowsIds.length; i++) {\r\n data.push(tableData[editedRowsIds[i]])\r\n }\r\n\r\n let records = []\r\n let userEmail = this.props.user.user.Email;\r\n let BENCHMARK_METRICS = this.props.kpiFilters !== undefined ? this.props.kpiFilters.metric : this.state.kpiBenchMarkFilters.metric; //this.props.kpiFilters.metric;\r\n let BENCHMARK_TYPE = this.props.kpiFilters !== undefined ? this.props.kpiFilters.type : this.state.kpiBenchMarkFilters.type; //this.props.kpiFilters.type;\r\n let ACTUAL_FLAG = 2;\r\n for (let i = 0; i < data.length; i++) {\r\n for (let j = 1; j <= 13; j++) {\r\n let obj = {}\r\n obj[\"VS_ID\"] = data[i].VS_ID;\r\n obj[\"DMC_ID\"] = data[i].DMC_ID;\r\n obj[\"USER_ID\"] = userEmail;\r\n obj[\"BENCHMARK_METRICS\"] = BENCHMARK_METRICS;\r\n obj[\"BENCHMARK_TYPE\"] = BENCHMARK_TYPE;\r\n obj[\"ACTUAL_FLAG\"] = ACTUAL_FLAG;\r\n obj[\"QUARTER_NO\"] = 'Q' + j;\r\n //obj[\"METRIC_ID\"] = kpiNameMetricLookup[data[i].kpi];\r\n obj[\"KPI_NAME\"] = data[i].kpi;\r\n //obj[\"ACTUAL_VALUE\"] = data[i]['srNo'] % 2 == 0 ? data[i]['Actual_Q' + j] * 1000000 : data[i]['Actual_Q' + j];\r\n //obj[\"ACTUAL_VALUE\"] = kpiFormatRowWithThousandMillion[kpiRowCustomOrder[data[i]['srNo']]] == 'Million' ? data[i]['Actual_Q' + j] * 1000000 : data[i]['Actual_Q' + j];\r\n obj[\"SE_TARGETED\"] = kpiFormatRowWithThousandMillion[kpiRowCustomOrder[data[i]['srNo']]] == 'Million' ? data[i]['SE_Targeted_Q' + j] : data[i]['SE_Targeted_Q' + j];\r\n obj[\"SE_TARGETED_CUMULATIVE\"] = kpiFormatRowWithThousandMillion[kpiRowCustomOrder[data[i]['srNo']]] == 'Million' ? data[i]['TagetKpi_Q' + j] : data[i]['TagetKpi_Q' + j];\r\n obj[\"KPI_MODEL\"] = this.state.selectedKPIButton;\r\n obj[\"GO_LIVE_DATE\"] = this.state.goLiveDate;\r\n obj[\"PROJECT_START_DATE\"] = this.state.startdate;\r\n\r\n records.push(obj)\r\n }\r\n }\r\n this.setState({ isLoading: true, isSaveInProgress: true, responseMsg: '' })\r\n // this.props.defineScopeLoading(true)\r\n\r\n this.props.updateEnablementKPIDashBoardTabData(records)\r\n .then((response) => {\r\n //this.loadData()\r\n let spData = response.data.Result.Table1;\r\n let tableData = this.createTableData(spData);\r\n\r\n let goLiveDate = spData[0][\"GO_LIVE_DATE\"] !== null ? new Date(spData[0][\"GO_LIVE_DATE\"]) : null;\r\n let projectStartDate = spData[0][\"PROJECT_START_DATE\"] !== null ? new Date(spData[0][\"PROJECT_START_DATE\"]) : null;\r\n\r\n this.setState({ tableData: tableData, isLoading: false, selectedKPIButton: kpiModel[spData[0].KPI_MODEL], goLiveDate: goLiveDate, startdate: projectStartDate })\r\n this.setState({ responseMsg: 'Record/s has been updated successfully', isError: 'No', isLoading: false, isSaveInProgress: false, editedRowsIds: [] })\r\n //this.props.defineScopeLoading(false)\r\n this.props.pendingChanges(null);\r\n // let kpiButtonCallBackVal = this.state.selectedKPIButton;\r\n this.saveEnabalementStrategyWave(false);\r\n\r\n // if (this.state.selectedKPIButton == 5)\r\n // kpiButtonCallBackVal = 0;\r\n // this.props.EnablementStrategyKPIButtonClick(kpiButtonCallBackVal);\r\n // this.props.EnablementStrategyrefreshResourceTable(true);\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ errorMsg: this.props.content.error, isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n }\r\n })\r\n }\r\n\r\n onSave() {\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let user = this.props.user.user.Email;\r\n let kpiSelectedButton = 1;\r\n let flag = this.state.KPIModelDB != this.props.kpiSelectedModel ? 'W' : 'R';\r\n this.props.defineScopeLoading(true);\r\n this.props.getUpdateEnablementKPIModel(dmcId, vsId, user, flag, this.props.kpiSelectedModel)\r\n .then((response) => {\r\n this.props.kpiModelChanged(response.data.Result[0].KPI_MODEL);\r\n this.setState({ KPIModelDB: response.data.Result[0].KPI_MODEL });\r\n kpiSelectedButton = this.props.kpiSelectedModel == 1 ? 1 : response.data.Result[0].KPI_BUTTON;\r\n\r\n //if (this.state.selectedKPIButton == 5)\r\n this.onKPIManualDashboardSave();\r\n //else\r\n this.saveEnabalementStrategyWave(false);\r\n //this.onKPIManualDashboardSave();\r\n //this.setState({ selectedModel: response.data.Result[0].KPI_MODEL, kpiSelectedButton: kpiSelectedButton });\r\n });\r\n\r\n }\r\n\r\n onExpandClick(e) {\r\n this.setState({ isExpand: !this.state.isExpand })\r\n }\r\n\r\n onKPIButtonsClick(value) {\r\n if (this.state.selectedKPIButton == 5 && value != 5) {\r\n this.showModal(\"alert\");\r\n this.setState({ selectedKPIButtonBeforeAlert: value });\r\n }\r\n else\r\n this.setState({ selectedKPIButton: value }, function () {\r\n this.afterKPIButtonsClick();\r\n });\r\n }\r\n\r\n afterKPIButtonsClick() {\r\n this.loadData(false);\r\n }\r\n\r\n showModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n this.refs[action].hide();\r\n if (action == 'alert')\r\n this.setState({ selectedKPIButton: 5 });\r\n }\r\n\r\n continueNavigation(action) {\r\n this.setState({ selectedKPIButton: this.state.selectedKPIButtonBeforeAlert }, function () {\r\n this.afterKPIButtonsClick(); this.refs[action].hide();\r\n });\r\n }\r\n\r\n onKPIPercentCalcSave() {\r\n\r\n let tableData = this.state.tableData;\r\n this.state.KPItableData.map((el, index) => {\r\n tableData[index].SE_Targeted_Q1 = el.HQ13\r\n tableData[index].SE_Targeted_Q2 = el.HQ23\r\n tableData[index].SE_Targeted_Q3 = el.HQ33\r\n tableData[index].SE_Targeted_Q4 = el.HQ43\r\n tableData[index].SE_Targeted_Q5 = el.HQ53\r\n tableData[index].SE_Targeted_Q6 = el.HQ63\r\n tableData[index].SE_Targeted_Q7 = el.HQ73\r\n tableData[index].SE_Targeted_Q8 = el.HQ83\r\n tableData[index].SE_Targeted_Q9 = el.HQ93\r\n tableData[index].SE_Targeted_Q10 = el.HQ103\r\n tableData[index].SE_Targeted_Q11 = el.HQ113\r\n tableData[index].SE_Targeted_Q12 = el.HQ123\r\n tableData[index].SE_Targeted_Q13 = el.HQ133\r\n tableData[index].TagetKpi_Q1 = el.HQ14\r\n tableData[index].TagetKpi_Q2 = el.HQ24\r\n tableData[index].TagetKpi_Q3 = el.HQ34\r\n tableData[index].TagetKpi_Q4 = el.HQ44\r\n tableData[index].TagetKpi_Q5 = el.HQ54\r\n tableData[index].TagetKpi_Q6 = el.HQ64\r\n tableData[index].TagetKpi_Q7 = el.HQ74\r\n tableData[index].TagetKpi_Q8 = el.HQ84\r\n tableData[index].TagetKpi_Q9 = el.HQ94\r\n tableData[index].TagetKpi_Q10 = el.HQ104\r\n tableData[index].TagetKpi_Q11 = el.HQ114\r\n tableData[index].TagetKpi_Q12 = el.HQ124\r\n tableData[index].TagetKpi_Q13 = el.HQ134\r\n\r\n tableData[index].PER_VAL_Q1 = el.HQ11\r\n tableData[index].PER_VAL_Q2 = el.HQ21\r\n tableData[index].PER_VAL_Q3 = el.HQ31\r\n tableData[index].PER_VAL_Q4 = el.HQ41\r\n tableData[index].PER_VAL_Q5 = el.HQ51\r\n tableData[index].PER_VAL_Q6 = el.HQ61\r\n tableData[index].PER_VAL_Q7 = el.HQ71\r\n tableData[index].PER_VAL_Q8 = el.HQ81\r\n tableData[index].PER_VAL_Q9 = el.HQ91\r\n tableData[index].PER_VAL_Q10 = el.HQ101\r\n tableData[index].PER_VAL_Q11 = el.HQ111\r\n tableData[index].PER_VAL_Q12 = el.HQ121\r\n tableData[index].PER_VAL_Q13 = el.HQ131\r\n\r\n tableData[index].CUMU_PER_VAL_Q1 = el.HQ12\r\n tableData[index].CUMU_PER_VAL_Q2 = el.HQ22\r\n tableData[index].CUMU_PER_VAL_Q3 = el.HQ32\r\n tableData[index].CUMU_PER_VAL_Q4 = el.HQ42\r\n tableData[index].CUMU_PER_VAL_Q5 = el.HQ52\r\n tableData[index].CUMU_PER_VAL_Q6 = el.HQ62\r\n tableData[index].CUMU_PER_VAL_Q7 = el.HQ72\r\n tableData[index].CUMU_PER_VAL_Q8 = el.HQ82\r\n tableData[index].CUMU_PER_VAL_Q9 = el.HQ92\r\n tableData[index].CUMU_PER_VAL_Q10 = el.HQ102\r\n tableData[index].CUMU_PER_VAL_Q11 = el.HQ112\r\n tableData[index].CUMU_PER_VAL_Q12 = el.HQ122\r\n\r\n tableData[index].AGG_INV_PO_SUPP_TOTAL = el.spend\r\n\r\n //this.setState({ selectedKPIButton: 6 });\r\n })\r\n\r\n this.setState({ tableData: tableData });\r\n this.hideModal(\"KPI\")\r\n\r\n\r\n let data = []\r\n //let editedRowsIds = this.state.editedRowsIds;\r\n let editedRowsIds = [0, 1, 2, 3, 4];\r\n for (let i = 0; i < editedRowsIds.length; i++) {\r\n data.push(tableData[editedRowsIds[i]])\r\n }\r\n\r\n let records = []\r\n let userEmail = this.props.user.user.Email;\r\n let ACTUAL_FLAG = 2;\r\n for (let i = 0; i < data.length; i++) {\r\n for (let j = 1; j <= 13; j++) {\r\n let obj = {}\r\n obj[\"VS_ID\"] = data[i].VS_ID;\r\n obj[\"DMC_ID\"] = data[i].DMC_ID;\r\n obj[\"USER_ID\"] = userEmail;\r\n // obj[\"ACTUAL_FLAG\"] = ACTUAL_FLAG;\r\n obj[\"QUARTER_NO\"] = 'Q' + j;\r\n obj[\"KPI_NAME\"] = data[i].kpi;\r\n obj[\"SE_TARGETED\"] = kpiFormatRowWithThousandMillion[kpiRowCustomOrder[data[i]['srNo']]] == 'Million' ? data[i]['SE_Targeted_Q' + j] : data[i]['SE_Targeted_Q' + j];\r\n obj[\"SE_TARGETED_CUMULATIVE\"] = kpiFormatRowWithThousandMillion[kpiRowCustomOrder[data[i]['srNo']]] == 'Million' ? data[i]['TagetKpi_Q' + j] : data[i]['TagetKpi_Q' + j];\r\n obj[\"KPI_MODEL\"] = this.state.selectedKPIButton;\r\n obj[\"PER_VAL\"] = data[i]['PER_VAL_Q' + j]\r\n obj[\"CUMU_PER_VAL\"] = data[i]['CUMU_PER_VAL_Q' + j]\r\n obj[\"AGG_INV_PO_SUPP_TOTAL\"] = data[i]['AGG_INV_PO_SUPP_TOTAL']\r\n records.push(obj)\r\n }\r\n }\r\n\r\n this.props.saveIntermediateEnablementKPIDashBoardTabData(records)\r\n .then((response) => {\r\n\r\n\r\n });\r\n }\r\n\r\n render() {\r\n let currencySymbol = this.state.currencySymbol;\r\n const userInputPrefix = currencySymbol;\r\n\r\n const userInputSuffix = 'M';\r\n\r\n const numberMask = createNumberMask({\r\n prefix: userInputPrefix + '',\r\n //suffix: ' ' + userInputSuffix,\r\n suffix: '',\r\n allowDecimal: false\r\n })\r\n const numberMaskForThousands = createNumberMask({\r\n prefix: '',\r\n suffix: '',\r\n allowDecimal: false\r\n })\r\n const numberMaskPercentage = createNumberMask({\r\n prefix: '',\r\n suffix: ' ' + '%',\r\n allowDecimal: true\r\n })\r\n\r\n return (\r\n \r\n
\r\n {this.state.isExpand ?\r\n {this.props.content.subTitle}\r\n\r\n
\r\n \r\n {this.props.content.headerIcon}\r\n
\r\n \r\n\r\n this.onExpandClick(e)} >{this.state.isExpand ? \"-\" : \"+\"}
\r\n \r\n \r\n {this.state.resourceHeaders.map((el, index) =>\r\n index == 0 ?\r\n
\r\n
\r\n : null}\r\n \r\n {(this.state.isError === 'Yes') ?\r\n
\r\n {this.state.errorMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n | {el} | )}\r\n||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| this.showHideRow()}>{el.RESOURCE_TYPE} {this.state.showHideRow ? \"-\" : \"+\"} | \r\n : index == 1 ?{el.RESOURCE_TYPE} | \r\n : index == 2 ? null\r\n :{el.RESOURCE_TYPE} | \r\n } */}\r\n\r\n {(index == 0 && this.state.showHideRow) ?this.showHideRow()}>{el.RESOURCE_TYPE} {this.state.showHideRow ? \"-\" : \"+\"} | \r\n : (index == 0 && !this.state.showHideRow) ?this.showHideRow()}>{el.RESOURCE_TYPE} {this.state.showHideRow ? \"-\" : \"+\"} | \r\n : ((index == 1 || index == 2) && this.state.showHideRow) ? null\r\n //: index == 2 ? \r\n :{el.RESOURCE_TYPE} | \r\n }\r\n\r\n {\r\n el.ACCOUNT_TYPE\r\n }\r\n {(!this.state.showHideRow && (index == 0 || index == 1)) || (this.state.showHideRow && index == 2) ?\r\n \r\n {this.props.content.kpiTotalHeaderIcon}\r\n \r\n \r\n : null}\r\n | \r\n {roundFix(el.RESOURCE_VALUE_Q1, 3)} | \r\n{roundFix(el.RESOURCE_VALUE_Q2, 3)} | \r\n{roundFix(el.RESOURCE_VALUE_Q3, 3)} | \r\n{roundFix(el.RESOURCE_VALUE_Q4, 3)} | \r\n{roundFix(el.RESOURCE_VALUE_Q5, 3)} | \r\n{roundFix(el.RESOURCE_VALUE_Q6, 3)} | \r\n{roundFix(el.RESOURCE_VALUE_Q7, 3)} | \r\n{roundFix(el.RESOURCE_VALUE_Q8, 3)} | \r\n{roundFix(el.RESOURCE_VALUE_Q9, 3)} | \r\n{roundFix(el.RESOURCE_VALUE_Q10, 3)} | \r\n{roundFix(el.RESOURCE_VALUE_Q11, 3)} | \r\n{roundFix(el.RESOURCE_VALUE_Q12, 3)} | \r\n\r\n
\r\n
\r\n\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n ui: state.content.ui,\r\n userData: state.valueStory,\r\n user: state.default,\r\n content: state.content.spendAnalysis.worldMap,\r\n focusLabel: state.content.spendAnalysis.enablement.focusLabel,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n kpiFilters: state.kpis.kpiBenchMarkFilters,\r\n kpiLables: state.content.kpiTab,\r\n isDeleteKPITable: state.deleteIntermediateKPIOnRedirect.changes,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n resetError: error => dispatch(resetError(error)),\r\n defineScopeLoading: bool => dispatch(defineScopeLoading(bool)),\r\n getKPIDashBoardLoadData: (DMCId, VSId, userEmail, metric, type) => dispatch(getKPIDashBoardLoadData(DMCId, VSId, userEmail, metric, type)),\r\n updateEnablementKPIDashBoardTabData: (records) => dispatch(updateEnablementKPIDashBoardTabData(records)),\r\n pendingChanges: changes => dispatch(pendingChanges(changes)),\r\n getManualKPIDashBoardLoadData: (DMCId, VSId, userEmail, kpi_strategy_model, model) => dispatch(getManualKPIDashBoardLoadData(DMCId, VSId, userEmail, kpi_strategy_model, model)),\r\n //getManualKPIResourceTypeLoadData: (DMCId, VSId, userEmail) => dispatch(getManualKPIResourceTypeLoadData(DMCId, VSId, userEmail)),\r\n updateEnablementStrategyWaveData: (DMCId, VSId, userEmail) => dispatch(updateEnablementStrategyWaveData(DMCId, VSId, userEmail)),\r\n getUpdateEnablementKPIModel: (DMCId, VSId, userEmail, ReadWriteFlag, EnablementKPIModel) => dispatch(getUpdateEnablementKPIModel(DMCId, VSId, userEmail, ReadWriteFlag, EnablementKPIModel)),\r\n deleteIntermediateEnablementKPIDashBoardTabData: (DMCId, VSId, userEmail) => dispatch(deleteIntermediateEnablementKPIDashBoardTabData(DMCId, VSId, userEmail)),\r\n saveKPIOnRedirect: changes => dispatch(saveKPIOnRedirect(changes)),\r\n deleteIntermediateKPIOnRedirect: changes => dispatch(deleteIntermediateKPIOnRedirect(changes)),\r\n //getManualKPIManualTargetFetch: (DMCId, VSId, userEmail, model, kpiModel) => dispatch(getManualKPIManualTargetFetch(DMCId, VSId, userEmail, model, kpiModel)),\r\n GetManualKPIDashBoardLoadDataPercentCalc: (DMCId, VSId, userEmail) => dispatch(GetManualKPIDashBoardLoadDataPercentCalc(DMCId, VSId, userEmail)),\r\n saveIntermediateEnablementKPIDashBoardTabData: (records) => dispatch(saveIntermediateEnablementKPIDashBoardTabData(records)),\r\n kpiModelChanged: (val) => dispatch(kpiModelChanged(val)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EnablementStrategyKPI)","import EnablementResourceParameters from 'components/Spend/YourSpendFile/EnablementResourceParameters'\r\nimport React, { Component } from 'react'\r\nimport EnablementStrategyWizard from './EnablementStrategyWizard'\r\nimport KPIContainer from 'components/Kpi/KPIContainer'\r\nimport { ControlTextE } from 'UI/CustomComponents/Controls';\r\nimport { connect } from 'react-redux';\r\nimport Popup from \"reactjs-popup\";\r\nimport Modal from 'reboron/OutlineModal'\r\nimport Button from 'UI/Button'\r\nimport Select from 'react-select'\r\nimport { BreakLine } from 'utils/Utils'\r\nimport EnablementStrategyKPI from './EnablementStrategyKPI'\r\n\r\nimport {\r\n pendingChanges,\r\n kpiModelChanged,\r\n //saveKPIOnRedirect\r\n} from 'actions/spendActions'\r\nimport EnablementKPITable from './EnablementKPITable'\r\n\r\nimport { changeModalStyle, changeModalContentStyle, backdropStyle, path } from 'Constants'\r\n\r\nconst changeBackdropStyle = Object.assign({}, backdropStyle);\r\nchangeBackdropStyle.zIndex = '1050';\r\n\r\nconst alertModalStyle = Object.assign({}, changeModalStyle);\r\nalertModalStyle.zIndex = '1060';\r\nalertModalStyle.width = '33%';\r\n\r\nclass EnablementStrategyWizardContainer extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isLoading: false,\r\n isSaveClicked: false,\r\n isResourceParamterSaved: false,\r\n selectedModel: 1,\r\n modelClicked : false,\r\n refreshResourceTable: false,\r\n refreshPriorityTable: false,\r\n shouldCallWaveCalc : false,\r\n model: [\r\n { label: 'Intelligent Strategy Model', value: 1 },\r\n { label: 'KPI Strategy Model', value: 2 }\r\n ],\r\n kpiSelectedButton: 3,\r\n enablementResourceParameters: [],\r\n isKPIDataLoaded: false,\r\n isResourceParamDataLoaded: false,\r\n }\r\n\r\n }\r\n\r\n componentDidUpdate(nextProps) {\r\n if((nextProps.isKPIPageRedirect != this.props.isKPIPageRedirect) && this.props.isKPIPageRedirect) {\r\n this.setState({ isSaveClicked: true, isWizardSaveClicked: true});\r\n }\r\n }\r\n\r\n handleStrategyWizardChanges(data) {\r\n this.setState({ isWizardSaveClicked: false })\r\n }\r\n\r\n handleResourceParameterChanges(data) {\r\n this.setState({ isSaveClicked: false })\r\n }\r\n\r\n EnablementStrategyKPIChanges(data) {\r\n this.setState({ isSaveClicked: false })\r\n }\r\n\r\n EnablementStrategyKPIButtonClick(data) {\r\n this.setState({ kpiSelectedButton: data })\r\n }\r\n\r\n handleIsResourceParamterSaved(data) {\r\n this.setState({ isResourceParamterSaved: data });\r\n }\r\n\r\n EnablementStrategyModelUpdate(data) {\r\n this.setState({ selectedModel: data })\r\n }\r\n\r\n getEnablementResourceParameters(data) {\r\n this.setState({ enablementResourceParameters: data })\r\n }\r\n\r\n EnablementStrategyrefreshResourceTable(data) {\r\n this.setState({ refreshResourceTable: data })\r\n if(!data)\r\n this.setState({isLoading : false})\r\n }\r\n\r\n EnablementStrategyrefreshPriorityTable(data) {\r\n this.setState({ refreshPriorityTable: data })\r\n }\r\n \r\n EnablementStrategyShouldCallWaveCalc(data) {\r\n this.setState({ shouldCallWaveCalc: data })\r\n } \r\n\r\n UpdateKPIDataLoaded(data) {\r\n this.setState({ isKPIDataLoaded: data })\r\n }\r\n\r\n UpdateResourceParamDataLoaded(data) {\r\n this.setState({ isResourceParamDataLoaded: data })\r\n } \r\n\r\n onSaveClicked() {\r\n this.setState({ isSaveClicked: true })\r\n }\r\n\r\n showModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n this.refs[action].hide()\r\n }\r\n\r\n continueNavigation(action) {\r\n this.refs[action].hide();\r\n this.setState({ isLoading :true });\r\n this.props.kpiModelChanged(this.state.selectedModel);\r\n //var kpiSelectedButtonOldVal = this.state.kpiSelectedButton\r\n //this.setState({ kpiSelectedButton: 0},this.setState({ kpiSelectedButton: kpiSelectedButtonOldVal}));\r\n if (this.state.kpiSelectedButton == 0)\r\n this.setState({ kpiSelectedButton: 5 });\r\n this.setState({ isSaveClicked: true, isWizardSaveClicked: true });\r\n\r\n }\r\n\r\n handleModelChange(value) {\r\n // this.props.kpiModelChanged(value.value);\r\n let selectedKPIButton = value.value == 1 ? 1 : 3;\r\n this.setState({ modelClicked : true ,selectedModel: value.value, kpiSelectedButton: selectedKPIButton, isKPIDataLoaded: false,isResourceParamDataLoaded : false });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {/*
\r\n\r\n {this.state.isExpand ?\r\n {BreakLine(this.props.content.title)}
*/}\r\n \r\n {this.props.kpiSelectedModel == 2 ?\r\n this.props.kpiLables.kpiEnablementHeader :\r\n this.props.kpiLables.intelligentEnablementHeader}\r\n\r\n \r\n
\r\n \r\n {this.props.kpiSelectedModel == 2 ?\r\n this.props.kpiLables.kpiEnablementHeaderIcon\r\n : this.props.kpiLables.inteliEnablementHeaderIcon\r\n }\r\n
\r\n \r\n \r\n\r\n this.onExpandClick(e)} >{this.state.isExpand ? \"-\" : \"+\"}
\r\n \r\n
\r\n : null}\r\n\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n {this.state.errorMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n\r\n\r\n
\r\n {/* \r\n \r\n
*/}\r\n\r\n {this.props.kpiSelectedModel == 2 ?\r\n \r\n\r\n {/*
\r\n : null}\r\n \r\n\r\n \r\n this.onKPIButtonsClick(1)}\r\n />\r\n
*/}\r\n \r\n this.onKPIButtonsClick(2)}\r\n />\r\n
\r\n \r\n this.onKPIButtonsClick(3)}\r\n />\r\n
\r\n \r\n this.onKPIButtonsClick(4)}\r\n />\r\n
\r\n \r\n this.onKPIButtonsClick(5)}\r\n />\r\n
\r\n \r\n this.onKPIButtonsClick(6)}\r\n />\r\n
\r\n \r\n {this.state.tableData ?\r\n \r\n {this.state.headers.map((el, index) =>\r\n index == 0 ?\r\n
\r\n : null}\r\n
\r\n | {el} | )}\r\n||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {kpiTargetShortNames[el.kpi]} | \r\nTarget KPI Cumulative Target KPI in Quarter | \r\n {kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q1, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q1, 0))} \t{this.state.selectedKPIButton == 5 ? | \r\n {kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q2, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q2, 0))} \t{this.state.selectedKPIButton == 5 ? | \r\n {kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q3, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q3, 0))} \t{this.state.selectedKPIButton == 5 ? | \r\n {kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q4, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q4, 0))} \t{this.state.selectedKPIButton == 5 ? | \r\n {kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q5, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q5, 0))} \t{this.state.selectedKPIButton == 5 ? | \r\n {kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q6, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q6, 0))} \t{this.state.selectedKPIButton == 5 ? | \r\n {kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q7, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q7, 0))} \t{this.state.selectedKPIButton == 5 ? | \r\n {kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q8, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q8, 0))} \t{this.state.selectedKPIButton == 5 ? | \r\n {kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q9, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q9, 0))} \t{this.state.selectedKPIButton == 5 ? | \r\n {kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q10, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q10, 0))} {this.state.selectedKPIButton == 5 ? | \r\n {kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q11, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q11, 0))} {this.state.selectedKPIButton == 5 ? | \r\n {kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q12, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q12, 0))} {this.state.selectedKPIButton == 5 ? | \r\n {el.TagetKpi_Q13 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.TagetKpi_Q13, 0)) : currencySymbol + formatThousands(roundFix(el.TagetKpi_Q13, 0))} {el.SE_Targeted_Q13 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Thousand' ? formatThousands(roundFix(el.SE_Targeted_Q13, 0)) : currencySymbol + formatThousands(roundFix(el.SE_Targeted_Q13, 0))} | \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n All your changes will be lost\r\n
\r\n \r\n
\r\n \r\n this.continueNavigation(\"alert\")}\r\n color /> \r\n this.hideModal(\"alert\")}\r\n color /> \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n {this.state.dataLoaded ?\r\n <>\r\n
\r\n \r\n \r\n {/* {this.state.KPIheaders2.map(el =>
\r\n
\r\n \r\n : null}\r\n \r\n
\r\n\r\n\r\n\r\n {this.state.kpiPopupError.length > 0 ?\r\n <>\r\n {\r\n this.state.kpiPopupError.map((el, index) =>\r\n (el.isPopupError === 'Warning') ?\r\n {el.popupErrorMsg}
\r\n : null\r\n )\r\n }\r\n\r\n {\r\n this.state.kpiPopupError.map((el, index) =>\r\n (el.isPopupError === 'Yes') ?\r\n {el.popupErrorMsg}
\r\n : null\r\n )\r\n }\r\n \r\n : null}\r\n\r\n | : this.state.selectedSpanValue == 'Half' ? | {el.value} | :{el.value} | )}\r\n|||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {el} | :{el} | )}\r\n||||||||||||||
| {kpiTargetShortNames[el.kpi]} | \r\n{kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.spend, true) : formatThousands(round(el.spend, 0))} | \r\n(%) Cumulative (%) Target KPI Cumulative Target KPI in Quarter | \r\n {{el.HQ12 == 0 ? '0' : el.HQ12} % {el.HQ14 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ14, true) : formatThousands(round(el.HQ14, 0))} {el.HQ13 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ13, true) : formatThousands(round(el.HQ13, 0))} | \r\n {el.HQ22 == 0 ? '0' : el.HQ22} % {el.HQ24 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ24, true) : formatThousands(round(el.HQ24, 0))} {el.HQ23 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ23, true) : formatThousands(round(el.HQ23, 0))} | \r\n {el.HQ32 == 0 ? '0' : el.HQ32} % {el.HQ34 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ34, true) : formatThousands(round(el.HQ34, 0))} {el.HQ33 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ33, true) : formatThousands(round(el.HQ33, 0))} | \r\n {el.HQ42 == 0 ? '0' : el.HQ42} % {el.HQ44 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ44, true) : formatThousands(round(el.HQ44, 0))} {el.HQ43 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ43, true) : formatThousands(round(el.HQ43, 0))} | \r\n {el.HQ52 == 0 ? '0' : el.HQ52} % {el.HQ54 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ54, true) : formatThousands(round(el.HQ54, 0))} {el.HQ53 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ53, true) : formatThousands(round(el.HQ53, 0))} | \r\n {el.HQ62 == 0 ? '0' : el.HQ62} % {el.HQ64 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ64, true) : formatThousands(round(el.HQ64, 0))} {el.HQ63 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ63, true) : formatThousands(round(el.HQ63, 0))} | \r\n {el.HQ72 == 0 ? '0' : el.HQ72} % {el.HQ74 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ74, true) : formatThousands(round(el.HQ74, 0))} {el.HQ73 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ73, true) : formatThousands(round(el.HQ73, 0))} | \r\n {el.HQ82 == 0 ? '0' : el.HQ82} % {el.HQ84 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ84, true) : formatThousands(round(el.HQ84, 0))} {el.HQ83 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ83, true) : formatThousands(round(el.HQ83, 0))} | \r\n {el.HQ92 == 0 ? '0' : el.HQ92} % {el.HQ94 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ94, true) : formatThousands(round(el.HQ94, 0))} {el.HQ93 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ93, true) : formatThousands(round(el.HQ93, 0))} | \r\n {el.HQ102 == 0 ? '0' : el.HQ102} % {el.HQ104 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ104, true) : formatThousands(round(el.HQ104, 0))} {el.HQ103 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ103, true) : formatThousands(round(el.HQ103, 0))} | \r\n {el.HQ112 == 0 ? '0' : el.HQ112} % {el.HQ114 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ114, true) : formatThousands(round(el.HQ114, 0))} {el.HQ113 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ113, true) : formatThousands(round(el.HQ113, 0))} | \r\n {el.HQ122 == 0 ? '0' : el.HQ122} % {el.HQ124 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ124, true) : formatThousands(round(el.HQ124, 0))} {el.HQ123 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ123, true) : formatThousands(round(el.HQ123, 0))} | \r\n \r\n {/* \r\n {/* {el.HQ122 == 0 ? '-' : el.HQ132} % */}\r\n \r\n {el.HQ134 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ134, true) : formatThousands(round(el.HQ134, 0))} {el.HQ133 == 0 ? '-' : kpiFormatRowWithThousandMillion[index] == 'Million' ? currencySymbol + convertToMillion(el.HQ133, true) : formatThousands(round(el.HQ133, 0))} | \r\n
| \r\n \r\n \r\n \r\n \r\n \r\n | \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n : null\r\n }\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n // language: state.language,\r\n userData: state.valueStory,\r\n user: state.default,\r\n accountParameters: state.content.spendAnalysis.accountParameters,\r\n wizard: state.content.spendAnalysis.prioritizationWizard,\r\n validation: state.content.validation,\r\n spendDetails: state.spendDetails,\r\n formContent: state.content.discovery.form,\r\n content: state.content.spendAnalysis.enablementResourceParamaeters,\r\n isKPIPageRedirect: state.saveKPIOnRedirect.changes,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n pendingChanges: (changes) => dispatch(pendingChanges(changes)),\r\n //saveKPIOnRedirect: changes => dispatch(saveKPIOnRedirect(changes)),\r\n //getUpdateEnablementKPIModel: (DMCId, VSId, userEmail, ReadWriteFlag, EnablementKPIModel) => dispatch(getUpdateEnablementKPIModel(DMCId, VSId, userEmail, ReadWriteFlag, EnablementKPIModel)),\r\n kpiModelChanged: (val) => dispatch(kpiModelChanged(val)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EnablementStrategyWizardContainer)","import React, { PureComponent } from 'react'\r\nimport { connect } from 'react-redux'\r\n\r\n// Actions\r\nimport { updateOrganization, addRevenue, updateCurrency, updateCurrencyCode, capIQFetchData, updateBPID, updateANID } from 'actions/discoveryActions'\r\n\r\nimport {\r\n\tgetSPCapitalIQData,\r\n\tgetSPCapitalIQLoading,\r\n\tgetSPCapitalIQSuccess,\r\n\tgetSPCapitalIQFailure,\r\n\tgetCapIQDataBlank\r\n} from 'actions/spendActions'\r\nimport {\r\n\tfetchUserValueStories,\r\n\tfetchValueStories,\r\n\tfetchUserSharedValueStories,\r\n\tfetchValueStoriesLoading,\r\n\tfetchValueStoriesSuccess,\r\n\tfetchValueStoriesFailure,\r\n} from 'actions/userActions'\r\nimport {\r\n\ttoggleValueDriver,\r\n\ttoggleSubLever\r\n} from 'actions/valueDriverActions'\r\nimport { updateUserInput } from 'actions/subLeverCalculationActions'\r\n\r\n// Settings\r\n\r\nimport { modalStyle } from 'Constants'\r\nimport { ScreenE } from 'UI/CustomComponents/Controls';\r\n\r\nimport LoadRequest from '../Spend/YourSpendFile/LoadRequest';\r\nimport AccountParameters from 'components/Spend/YourSpendFile/AccountParameters'\r\n\r\nconst autoHeightModalStyle = Object.assign({}, modalStyle)\r\nautoHeightModalStyle.height = 'auto'\r\nautoHeightModalStyle.width = '30%'\r\n\r\nconst defaultOptions = [\r\n\t{ value: 0, label: \"\" }];\r\n\r\nexport class MatchAndClassificationContainer extends PureComponent {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t\tthis.state = {\r\n\t\t\tisParamExpand: true\r\n }\r\n }\r\n\r\n onExpandClick(e){\r\n switch(e.target.id){\r\n case \"loadReq\":\r\n this.setState({ isExpand: ! this.state.isExpand})\r\n break;\r\n case \"spendParam\":\r\n this.setState({ isParamExpand: ! this.state.isParamExpand})\r\n break;\r\n case \"customerSpend\":\r\n this.setState({ isCustomerSpendExpand: ! this.state.isCustomerSpendExpand})\r\n break;\r\n }\r\n }\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n
\r\n\r\n {(this.state.isLoading) ?\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.props.wizard.solutionScopeHover}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.props.wizard.industryHover}\r\n
\r\n \r\n \r\n \r\n
\r\n\r\n Model :
\r\n \r\n option.value === this.state.selectedModel)}\r\n onChange={(value) => this.handleModelChange(value)}\r\n options={this.state.model}\r\n isSearchable={false}\r\n //isDisabled={true}\r\n />\r\n
\r\n \r\n
\r\n\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n\r\n\r\n {/* Recast popup */}\r\n \r\n this.handleResourceParameterChanges(e)}\r\n isSaveClicked ={this.state.isSaveClicked}\r\n modelClicked ={this.state.modelClicked}\r\n kpiSelectedModel={this.state.selectedModel}\r\n isResourceParamDataLoaded ={this.state.isResourceParamDataLoaded}\r\n callbackEnablementResourceParameters={(e) => this.getEnablementResourceParameters(e)}\r\n handleIsResourceParamterSaved={(e) => this.handleIsResourceParamterSaved(e)}\r\n UpdateResourceParamDataLoaded={(e) => this.UpdateResourceParamDataLoaded(e)}\r\n EnablementStrategyrefreshPriorityTable ={(e) => this.EnablementStrategyrefreshPriorityTable(e)}\r\n > \r\n
\r\n \r\n
\r\n {/* {this.state.selectedModel == 2 ? */}\r\n \r\n this.EnablementStrategyrefreshResourceTable(e)}\r\n //EnablementStrategyrefreshPriorityTable ={(e) => this.EnablementStrategyrefreshPriorityTable(e)}\r\n isRefresh={this.state.refreshResourceTable}\r\n enablementResourceParameters={this.state.enablementResourceParameters}\r\n > \r\n
\r\n \r\n this.EnablementStrategyKPIChanges(e)}\r\n EnablementStrategyKPIButtonClick={(e) => this.EnablementStrategyKPIButtonClick(e)}\r\n EnablementStrategyModelUpdate={(e) => this.EnablementStrategyModelUpdate(e)}\r\n UpdateResourceParamDataLoaded={(e) => this.UpdateResourceParamDataLoaded(e)}\r\n EnablementStrategyrefreshResourceTable={(e) => this.EnablementStrategyrefreshResourceTable(e)} \r\n // EnablementStrategyrefreshPriorityTable ={(e) => this.EnablementStrategyrefreshPriorityTable(e)}\r\n UpdateKPIDataLoaded={(e) => this.UpdateKPIDataLoaded(e)}\r\n handleIsResourceParamterSaved={(e) => this.handleIsResourceParamterSaved(e)}\r\n EnablementStrategyShouldCallWaveCalc={(e) => this.EnablementStrategyShouldCallWaveCalc(e)}\r\n isResourceParamterSaved={this.state.isResourceParamterSaved}\r\n isSaveClicked={this.state.isSaveClicked}\r\n kpiSelectedModel={this.state.selectedModel}\r\n kpiSelectedButton={this.state.kpiSelectedButton}\r\n isKPIDataLoaded={this.state.isKPIDataLoaded}\r\n shouldCallWaveCalc = {this.state.shouldCallWaveCalc}\r\n > \r\n
\r\n {/* : null} */}\r\n \r\n this.EnablementStrategyrefreshResourceTable(e)} \r\n handleStrategyWizardChanges={(e) => this.handleStrategyWizardChanges(e)} \r\n isWizardSaveClicked={this.state.isWizardSaveClicked} \r\n EnablementStrategyrefreshPriorityTable ={(e) => this.EnablementStrategyrefreshPriorityTable(e)}\r\n isRefresh = {this.state.refreshPriorityTable}\r\n shouldCallWaveCalc = {this.state.shouldCallWaveCalc}\r\n UpdateKPIDataLoaded={(e) => this.UpdateKPIDataLoaded(e)}\r\n >\r\n
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.state.selectedModel == 1 ? \r\n this.props.wizard.applyPriorityChanges\r\n : this.props.wizard.applyPriorityChangesKPI\r\n }\r\n
\r\n \r\n
\r\n \r\n this.continueNavigation(\"alert\")}\r\n color /> \r\n this.hideModal(\"alert\")}\r\n color /> \r\n
\r\n \r\n{/* \r\n\t\t\t\t
\r\n\t\t\t\r\n
*/}\r\n\t\t\t\t\r\n\r\n\t\t\t\r\n
\r\n {\"Collect Customer Spend\"}
\r\n \r\n\t\t\t\t\t
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {\"Match & Classification File\"}
\r\n {/* this.onExpandClick(e)} >{this.state.isExpand ? \"-\": \"+\"}
*/}\r\n \r\n
\r\n\r\n {/* \r\n
\r\n \r\n {this.state.isParamExpand ?\r\n \r\n
\r\n {\"Spend Parameter\"}
\r\n this.onExpandClick(e)} >{this.state.isParamExpand ? \"-\": \"+\"}
\r\n \r\n
\r\n : null } */}\r\n\r\n\t\t\t\r\n \r\n {/*
\r\n
\r\n )\r\n }\r\n}\r\n\r\nclass Rows extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n {\r\n this.state = {\r\n helpText: '',\r\n }\r\n }\r\n this.getHelpText = this.getHelpText.bind(this);\r\n\r\n }\r\n\r\n getHelpText(value) {\r\n var hoverText = \"\";\r\n switch (value.target.innerText) {\r\n case this.props.content.enablementWaveDetails.entSupplierDedicatedSpecialist:\r\n hoverText = this.props.content.enablementWaveDetails.entSupplierDedicatedSpecialistHelpText\r\n break;\r\n\r\n case this.props.content.enablementWaveDetails.entIntegraReadyCataCandidate:\r\n hoverText = this.props.content.enablementWaveDetails.entIntegraReadyCataCandidateHelpText\r\n break;\r\n\r\n case this.props.content.enablementWaveDetails.entIntegraCataCandidate:\r\n hoverText = this.props.content.enablementWaveDetails.entIntegraCataCandidateHelpText\r\n break;\r\n\r\n case this.props.content.enablementWaveDetails.entIntegraReadyCandidate:\r\n hoverText = this.props.content.enablementWaveDetails.entIntegraReadyCandidateHelpText\r\n break;\r\n\r\n case this.props.content.enablementWaveDetails.entIntegraCandidate:\r\n hoverText = this.props.content.enablementWaveDetails.entIntegraCandidateHelpText\r\n break;\r\n\r\n case this.props.content.enablementWaveDetails.entPortalCataCandidate:\r\n hoverText = this.props.content.enablementWaveDetails.entPortalCataCandidateHelpText\r\n break;\r\n\r\n case this.props.content.enablementWaveDetails.entPortal:\r\n hoverText = this.props.content.enablementWaveDetails.entPortalHelpText\r\n break;\r\n\r\n case this.props.content.enablementWaveDetails.managedStandardInteractiveEmail:\r\n hoverText = this.props.content.enablementWaveDetails.managedStandardInteractiveEmailHelpText\r\n break;\r\n\r\n case this.props.content.enablementWaveDetails.onGoingStandardInteractiveEmail:\r\n hoverText = this.props.content.enablementWaveDetails.onGoingStandardInteractiveEmailHelpText\r\n break;\r\n\r\n }\r\n this.setState({ helpText: hoverText })\r\n return hoverText;\r\n }\r\n\r\n render() {\r\n return (\r\n | {this.props.tableName} | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {this.state.firstColumnName} | \r\n\r\n{this.props.content.supplierColumn} | \r\n{this.props.content.supplierPerColumn} | \r\n\r\n {/* {this.props.tableName === \"Enablement Recommendation\" ?\r\n{this.props.content.uniqueANIDsColumn} | \r\n : null} */}\r\n\r\n {this.props.metricsType === \"Invoice & PO\" ?\r\n{this.props.content.invoicePoSpendColumn} | \r\n : this.props.metricsType === \"Invoice Only\" ?\r\n{this.props.content.spendColumn} | \r\n : this.props.metricsType === \"PO Only\" ?\r\n{this.props.content.poSpendColumn} | \r\n :{this.props.content.spendProxyColumn} | \r\n }\r\n\r\n {this.props.metricsType === \"Invoice & PO\" ?\r\n{this.props.content.invoicePoSpendPerColumn} | \r\n : this.props.metricsType === \"Invoice Only\" ?\r\n{this.props.content.spendPerColumn} | \r\n : this.props.metricsType === \"PO Only\" ?\r\n{this.props.content.poSpendPerColumn} | \r\n :{this.props.content.spendProxyPerColumn} | \r\n }\r\n\r\n {this.props.metricsType === \"Invoice & PO\" ?\r\n{this.props.content.invoicePoDocumentColumn} | \r\n : this.props.metricsType === \"Invoice Only\" ?\r\n{this.props.content.invoiceDocumentColumn} | \r\n : this.props.metricsType === \"PO Only\" ?\r\n{this.props.content.poDocumentColumn} | \r\n :{this.props.content.documentColumn} | \r\n }\r\n\r\n {this.props.metricsType === \"Invoice & PO\" ?\r\n{this.props.content.invoicePoDocumentPerColumn} | \r\n :this.props.metricsType === \"Invoice Only\" ?\r\n{this.props.content.invoiceDocumentPerColumn} | \r\n : this.props.metricsType === \"PO Only\" ?\r\n{this.props.content.poDocumentPerColumn} | \r\n :{this.props.content.documentPerColumn} | \r\n }\r\n {/*{this.props.content.poCount} | */}\r\n
| {this.props.content.grandTotal} | \r\n{this.props.grandTotal[0] !== undefined ? formatThousands(this.props.grandTotal[0].TOTAL_VENDOR_CNT) : null} | \r\n{this.props.grandTotal[0] !== undefined ? this.props.grandTotal[0].VENDOR_PER + \"%\" : null} | \r\n\r\n {/* {this.props.tableName === \"Enablement Recommendation\" ?\r\n{this.props.grandTotal && this.props.grandTotal[0] !== undefined ? formatThousands(this.props.grandTotal[0].TOTAL_UNIQUE_VENDOR_AN_ID) : null} | \r\n : null} */}\r\n\r\n{this.props.grandTotal[0] !== undefined ? this.state.currencySymbol + convertToMillion(this.props.grandTotal[0].TOTAL_AGGR_SPEND, true) : null} | \r\n{this.props.grandTotal[0] !== undefined ? this.props.grandTotal[0].AGGR_SPEND_PER + \"%\" : null} | \r\n\r\n{this.props.grandTotal[0] !== undefined ? formatThousands(this.props.grandTotal[0].TOTAL_DOC_PROXY) : null} | \r\n{this.props.grandTotal[0] !== undefined ? this.props.grandTotal[0].DOC_PROXY_PER + \"%\" : null} | \r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\n\r\nconst mapStateToProps = state => {\r\n\treturn {\r\n content: state.content.enablementInsight,\r\n //content: state.content.subLeverCalculations,\r\n\t\tui: state.content.ui,\r\n\t\tcurrency: decodeURIComponent(state.valueStory.Currency),\r\n\t\tuserData: state.valueStory,\r\n\t\tspendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n\t\tbenchMarkCalculations: state.benchMarksData,\r\n\t\tallContent: state.content,\r\n language: state.language,\r\n spendDetails: state.spendDetails,\r\n user: state.default \r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n\treturn {\r\n enablementInsightSuccess: message => dispatch(enablementInsightSuccess(message)),\r\n enablementInsightFailure: error => dispatch(enablementInsightFailure(error)),\r\n enablementInsightLoading: bool => dispatch(enablementInsightLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n getEnablementDetails: (data) => dispatch(getEnablementDetails(data)),\r\n getEnablementFiltersDetails: (data) => dispatch(getEnablementFiltersDetails(data))\r\n\t}\r\n}\r\n\r\nexport default connect(\tmapStateToProps, mapDispatchToProps)(EnablementRecommendations)\r\n\r\n","import React, { Fragment } from 'react';\r\nimport { connect } from 'react-redux'\r\nimport SpendYourFileContainer from 'components/Spend/YourSpendFile/SpendYourFileContainer'\r\nimport ClassificationSummary from 'components/Spend/ClassificationAndTopDetails/ClassificationSummary'\r\nimport TopDetailsContainer from 'components/Spend/ClassificationAndTopDetails/TopDetailsContainer'\r\nimport ProgramEnablementAnalysis from 'components/Spend/ProgramEnablementSummary/ProgramEnablementAnalysis'\r\nimport AribaNetworkEnablementAnalysis from 'components/Spend/ProgramEnablementSummary/AribaNetworkEnablementAnalysis'\r\nimport GanntChartContainer from 'components/Spend/GantChart/GanntChartContainer'\r\nimport EnablementWavesTable from 'components/Spend/EnablementInsight/EnablementWavesTable'\r\nimport AccountParameters from 'components/Spend/YourSpendFile/AccountParameters'\r\nimport SubTabsPanel from '../Tabs/SubTabsPanel'\r\n//import EnablementStrategyWizard from 'components/Spend/YourSpendFile/EnablementStrategyWizard'\r\n//import EnablementResourceParameters from 'components/Spend/YourSpendFile/EnablementResourceParameters'\r\nimport { redirectFromEnablementTab } from 'actions/spendActions'\r\nimport KPIContainer from 'components/Kpi/KPIContainer'\r\nimport KPIDashboard from 'components/Kpi/KPIDashboard'\r\nimport KPIDashboardV2 from 'components/Kpi/KPIDashboardV2'\r\nimport KPIDashboardManualV2 from 'components/Kpi/KPIDashboardManualV2'\r\nimport KPIChartsV2 from 'components/Kpi/KPIChartsV2'\r\nimport EnablementStrategyWizardContainer from './YourSpendFile/EnablementStrategyWizardContainer';\r\nimport CollectCustomerSpend from '../Discovery/CollectCustomerSpend';\r\nimport MatchClassificationContainer from '../Discovery/Match&ClassificationContainer';\r\nimport EnablementRecommendations from 'components/Spend/EnablementInsight/EnablementRecommendations';\r\nimport {\r\n\tsetSubTabMenu\r\n}\r\n\tfrom 'actions/userActions'\r\n\r\nclass SubTabsContainer extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.myRef = React.createRef()\r\n this.state = {\r\n isRequestFileActive: true,\r\n tabId: 1,\r\n tabs: []\r\n }\r\n this.dispatchTabChange = this.dispatchTabChange.bind(this)\r\n this.intializeSupplierTabs = this.intializeSupplierTabs.bind(this)\r\n }\r\n componentWillReceiveProps(nextProps) {\r\n if (this.props !== nextProps) {\r\n if (this.props.param === this.props.content.yourFile.title) {\r\n if (this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined && this.props.spendDetails.currentActiveRequest !== \"\")\r\n this.setState({ isRequestFileActive: true })\r\n else\r\n this.setState({ isRequestFileActive: false })\r\n this.intializeSupplierTabs();\r\n }\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.intializeSupplierTabs();\r\n }\r\n\r\n intializeSupplierTabs() {\r\n let tabs = []\r\n if (this.props.param === this.props.content.yourFile.title) {\r\n if (this.state.isRequestFileActive) {\r\n tabs = [{\r\n id: 1,\r\n label: \"Value Story\",//this.props.content.yourFile.companyTitle,\r\n component: (\r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n \r\n \r\n {/* {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n
*/}\r\n\r\n \r\n
\r\n \r\n \r\n {this.state.enablementTypesJson !== undefined && this.state.enablementTypesJson !== null ?\r\n
\r\n {this.props.content.noDataFound}
} \r\n \r\n
\r\n \r\n\r\n \r\n
\r\n \r\n {this.state.enablementTypeData !== undefined && this.state.enablementTypeData !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n \r\n {this.refs.enablementSupplier ? this.state.openPopup ?\r\n this.refs.enablementSupplier.show() :\r\n this.refs.enablementSupplier.hide() : ''} \r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n spendDetails: state.spendDetails,\r\n content: state.content.spendAnalysis,\r\n user: state.default,\r\n ganntTexts: state.content.ganntChartTab,\r\n redirectFlag: state.spendDetails.isRedirected,\r\n subTabMenu: state.setSubTabMenu\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n redirectFromEnablementTab: (flag) => dispatch(redirectFromEnablementTab(flag)),\r\n setSubTabMenu:(val)=>dispatch(setSubTabMenu(val))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SubTabsContainer); ","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport moment from 'moment'\r\n// Utils\r\nimport { BreakLine } from 'utils/Utils'\r\n// UI\r\nimport Button from 'UI/Button'\r\nimport Confirmation from 'UI/CustomeConfirmation'\r\n// Settings\r\nimport { validators } from 'Constants'\r\nimport Select from 'react-select'\r\nimport { getCurrancyDetails, formatThousands } from 'utils/Utils'\r\nimport {\r\n getYourFileSuccess,\r\n getYourFileLoading,\r\n resetError,\r\n getYourFileFailure,\r\n setResultSummaryDetails,\r\n setTopDetails,\r\n LoadRequestDetails,\r\n GetAllRequestsAgainstValueStory,\r\n getYourRequestsDetails,\r\n ActivetDeactiveCurrentRequest,\r\n CleanRequestData,\r\n UpdateComment,\r\n currentActiveRequest,\r\n setValueStoryDmciDetails,\r\n setYourFileRequestDetails,\r\n GetAllMappedColumn,\r\n setMappedColumn,\r\n getUserSpendSelections,\r\n trackUserSpendSelections,\r\n solutionScopeChanged\r\n} from 'actions/spendActions'\r\n\r\n//import AccountParameters from 'components/Spend/AccountParameters'\r\nimport VideoHelp from 'components/UI/VideoHelp'\r\nimport Screen from 'UI/CustomComponents/Screen';\r\n\r\nimport { ControlTextE, SelectE, ScreenE, RadioButtonNativeE, ButtonE, ButtonNativeE, TextAreaE } from 'UI/CustomComponents/Controls';\r\n\r\nclass YourFileContainer extends Component {\r\n _isMounted = false;\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n RequestIds: [],\r\n selectedRequestId: '',\r\n fileDetails: [],\r\n commentsRequest: '',\r\n allRequestOfVSIDnDMCID: [],\r\n currentActiveRequest: '',\r\n isSharedValueStory: false,\r\n sharedByDetails: ''\r\n }\r\n this.handleRequestChange = this.handleRequestChange.bind(this)\r\n this.redirect = this.redirect.bind(this)\r\n this.onChange = this.onChange.bind(this)\r\n this.handleOptionChange = this.handleOptionChange.bind(this)\r\n this.handleLoadButton = this.handleLoadButton.bind(this)\r\n this.deleteRequest = this.deleteRequest.bind(this)\r\n this.showModal = this.showModal.bind(this)\r\n this.modelRef = React.createRef()\r\n this.modelDelete = []\r\n }\r\n\r\n componentDidMount() {\r\n this._isMounted = true;\r\n this.loadData()\r\n window.scrollTo(0, 0);\r\n }\r\n componentWillUnmount() {\r\n this._isMounted = false;\r\n this.props.resetError();\r\n // update comment for current active request\r\n if (this.props.spendDetails.currentActiveRequest && this.props.spendDetails.currentActiveRequest.UPDATED_COMMENTS !== '') {\r\n this.props.UpdateComment(this.props.spendDetails.currentActiveRequest).then(res => {\r\n //\r\n })\r\n }\r\n this.formDispatch(actions.reset('yourFile'))\r\n }\r\n // To find the message from Json containt just pass the status code and find the message\r\n getMessage(keyToFindMessage) {\r\n return this.props.content[keyToFindMessage];\r\n }\r\n\r\n showModal(model) {\r\n\r\n model.current.show()\r\n\r\n }\r\n\r\n hideModal(model) {\r\n model.current.hide()\r\n this.props.getYourFileSuccess(\"\");\r\n }\r\n\r\n\r\n onChange(e) {\r\n var requestDetails = this.state.currentActiveRequest;\r\n //var currentActiveIndex = requestDetails.findIndex(a => a.ACTIVE_FLAG === true);\r\n //if(currentActiveIndex > -1)\r\n //{\r\n requestDetails.UPDATED_COMMENTS = e.target.value;\r\n\r\n this.setState({ currentActiveRequest: requestDetails })\r\n this.props.currentActiveRequest(requestDetails);\r\n //}\r\n\r\n //alert(date);\r\n }\r\n\r\n loadData() {\r\n var userId = this.props.user.user.Id;\r\n this.props.getYourFileLoading(true)\r\n if (this.props.userData.Id !== this.props.user.user.Id) {\r\n userId = this.props.userData.Id\r\n this.setState({ isSharedValueStory: true })\r\n\r\n }\r\n\r\n if (this.props.spendDetails.requestFileDetails.length === 0) {\r\n if (this.state.RequestIds === undefined || this.state.RequestIds.length === 0) {\r\n this.props.getYourRequestsDetails(this.props.user.user.Email)\r\n .then(response => {\r\n this.setState({ fileDetails: response.data.Result })\r\n this.props.setYourFileRequestDetails(response.data.Result);\r\n this.setDropDownData(response.data.Result)\r\n }).catch(res => {\r\n this.props.setYourFileRequestDetails([]);\r\n this.props.getYourFileFailure(this.getMessage('notFound'))\r\n })\r\n }\r\n }\r\n else {\r\n this.setDropDownData(this.props.spendDetails.requestFileDetails)\r\n this.setState({ fileDetails: this.props.spendDetails.requestFileDetails }, () => this.props.getYourFileSuccess());\r\n }\r\n\r\n if (userId !== undefined && userId !== \"\") {\r\n this.GetAllRequestsAgainstValueStory(userId);\r\n this.getAllMappedColumn(this.props.user.user.Id);\r\n }\r\n\r\n }\r\n\r\n setDropDownData(data) {\r\n var RequestIds = []\r\n\r\n\r\n // Needs to chnage location of code in above response once get data from API\r\n data.forEach(element => {\r\n var result = {\r\n label:\r\n (element.Buyer_Name + \" | Request Id: \" + element.DMC_ID +\r\n \"| \" + element.File_Name + \" | \" +\r\n moment(element.CREATE_TIMESTAMP).format('MMM DD,YYYY'))\r\n , value: element.DMC_ID\r\n };\r\n RequestIds.push(result);\r\n });\r\n\r\n\r\n this.setState({ RequestIds: RequestIds }, () => this.props.getYourFileSuccess());\r\n }\r\n\r\n GetAllRequestsAgainstValueStory(userId) {\r\n if (this.props.spendDetails.valueStoryRequestDetails.length === 0) {\r\n if (this.props.userData.VSId !== undefined && this.props.userData.VSId > 0) {\r\n this.props.GetAllRequestsAgainstValueStory(userId, this.props.userData.VSId).\r\n then(response => {\r\n if (response.data.StatusCode === 200) {\r\n this.setState({ allRequestOfVSIDnDMCID: response.data.Result }, () => this.setActiveRequest())\r\n }\r\n else {\r\n this.setState({ allRequestOfVSIDnDMCID: [] }, () => this.setActiveRequest())\r\n }\r\n this.props.setValueStoryDmciDetails(response.data.Result);\r\n // first time loaded and need not to show any message\r\n }).catch(res => {\r\n this.props.getYourFileFailure(this.getMessage('error'));\r\n })\r\n\r\n this.setActiveRequest();\r\n }\r\n } else {\r\n this.setState({ allRequestOfVSIDnDMCID: this.props.spendDetails.valueStoryRequestDetails },\r\n () => this.setActiveRequest())\r\n }\r\n }\r\n\r\n setActiveRequest() {\r\n var activeRequest = this.state.allRequestOfVSIDnDMCID.filter((element) => (element.ACTIVE_FLAG === true));\r\n if (activeRequest !== null) {\r\n this.setState({ currentActiveRequest: activeRequest[0] });\r\n this.props.spendDetails.currentActiveRequest = activeRequest[0]\r\n this.props.currentActiveRequest(activeRequest[0]);\r\n this.props.solutionScopeChanged(activeRequest[0]['SOLUTION_IN_SCOPE']);\r\n //Get dropdown values selected by users from database.\r\n if (activeRequest[0] !== null && activeRequest[0] !== undefined) {\r\n this.props.getUserSpendSelections(activeRequest[0].VS_ID, activeRequest[0].DMC_ID)\r\n .then(response => {\r\n this.props.trackUserSpendSelections(response.data.Result)\r\n }).catch(error => {\r\n this.props.getYourFileFailure(this.getMessage('error'));\r\n })\r\n }\r\n } else {\r\n this.setState({ currentActiveRequest: '' });\r\n this.props.spendDetails.currentActiveRequest = ''\r\n this.props.currentActiveRequest('');\r\n }\r\n }\r\n\r\n handleRequestChange(value) {\r\n this.props.getYourFileSuccess(''); // To remove the error/success message\r\n var fileProcessingDate = this.state.fileDetails.filter((element) => (element.DMC_ID === value.value));\r\n this.formDispatch(actions.change('yourFile.RequestId', value.value.toString()));\r\n this.setState({ selectedRequestId: value.value })\r\n }\r\n\r\n redirect() {\r\n this.props.history.push(`/subTabsContainer`)\r\n }\r\n\r\n handleLoadButton(formValues) {\r\n this.props.getYourFileLoading(true);\r\n var index = this.state.allRequestOfVSIDnDMCID.findIndex(a => a.DMC_ID === this.state.selectedRequestId);\r\n if (index === -1) {\r\n this.getRequestData(this.state.selectedRequestId, true);\r\n }\r\n else {\r\n this.showModal(this.modelRef)\r\n // if (this.showModal(this.modelRef))) {\r\n // this.getRequestData(this.state.selectedRequestId, true);\r\n // }\r\n // else {\r\n // this.props.getYourFileLoading(false);\r\n // }\r\n }\r\n\r\n }\r\n\r\n getRequestData(selectedRequestId, isNewRequest) {\r\n if (selectedRequestId !== '') {\r\n var selectedRequest = selectedRequestId;\r\n var selectedRequestDetails = this.state.fileDetails.filter((element) =>\r\n (element.DMC_ID === selectedRequest));\r\n selectedRequestDetails[0].VS_ID = this.props.userData.VSId;\r\n selectedRequestDetails[0].User_Id = this.props.user.user.Id;\r\n selectedRequestDetails[0].SAPRequester = this.props.user.user.Email\r\n this.props.LoadRequestDetails(selectedRequestDetails[0], isNewRequest).then((response) => {\r\n //console.log(response.data.StatusCode===200);\r\n if (response.data.StatusCode === 200) {\r\n this.props.setValueStoryDmciDetails(response.data.Result);\r\n this.setState({ allRequestOfVSIDnDMCID: response.data.Result }, () => this.setActiveRequest())\r\n }\r\n else {\r\n this.props.setValueStoryDmciDetails([]);\r\n this.setState({ allRequestOfVSIDnDMCID: '' }, () => this.setActiveRequest())\r\n }\r\n this.props.getYourFileSuccess(this.getMessage(\"200\"));\r\n }).catch(res => {\r\n\r\n this.props.getYourFileFailure(this.getMessage('error'));\r\n })\r\n } else {\r\n this.props.getYourFileFailure(\"\");\r\n this.formDispatch(actions.setErrors('yourFile.RequestId', true));\r\n this.formDispatch(actions.reset('yourFile.RequestId'));\r\n }\r\n if (isNewRequest) {\r\n this.modelRef.current.hide()\r\n }\r\n }\r\n\r\n deleteRequest(deleteRequestId) {\r\n var _inst = this;\r\n // if (window.confirm(this.getMessage(\"deleteConfirmation\"))) {\r\n var index = this.state.allRequestOfVSIDnDMCID.findIndex((element) =>\r\n (element.APP_CNTRL_REQUEST_DATAId == deleteRequestId.currentTarget.id));\r\n var deleteRequestDetails = this.state.allRequestOfVSIDnDMCID.filter((element) =>\r\n (element.APP_CNTRL_REQUEST_DATAId == deleteRequestId.currentTarget.id));\r\n if (deleteRequestDetails !== undefined && deleteRequestDetails.length > 0) {\r\n this.props.CleanRequestData(deleteRequestDetails[0]).then((resp) => {\r\n if (resp.data.StatusCode === 200) {\r\n this.props.setValueStoryDmciDetails(resp.data.Result);\r\n this.setState({ allRequestOfVSIDnDMCID: resp.data.Result }, () => this.setActiveRequest())\r\n }\r\n else {\r\n this.props.setValueStoryDmciDetails([]);\r\n this.setState({ allRequestOfVSIDnDMCID: '' }, () => this.setActiveRequest())\r\n }\r\n\r\n this.props.getYourFileSuccess(this.getMessage(\"deleteSuccess\"));\r\n }).catch(res => {\r\n this.props.getYourFileFailure(this.getMessage('error'));\r\n })\r\n } else {\r\n this.props.getYourFileFailure(this.getMessage('error'));\r\n }\r\n _inst.modelDelete[index].current.hide();\r\n //}\r\n }\r\n\r\n handleOptionChange(value) {\r\n this.props.getYourFileLoading(true);\r\n var requestDetails = this.state.allRequestOfVSIDnDMCID;\r\n var currentActiveIndex = requestDetails.findIndex(a => a.ACTIVE_FLAG === true);\r\n\r\n //Case when there is no any active request index will be -1\r\n if (currentActiveIndex > -1) {\r\n //update comment for current request and then deactivate the current request\r\n if (this.props.spendDetails.currentActiveRequest.UPDATED_COMMENTS !== '') {\r\n this.props.UpdateComment(this.props.spendDetails.currentActiveRequest).then(res => {\r\n //\r\n })\r\n }\r\n requestDetails[currentActiveIndex].ACTIVE_FLAG = false;\r\n }\r\n\r\n\r\n var newActiveIndex = requestDetails.findIndex(item => item.APP_CNTRL_REQUEST_DATAId == value.target.value)\r\n if (newActiveIndex > -1) {\r\n requestDetails[newActiveIndex].ACTIVE_FLAG = value.target.checked;\r\n\r\n }\r\n\r\n this.setState({ allRequestOfVSIDnDMCID: requestDetails }, () => this.setActiveRequest())\r\n this.props.ActivetDeactiveCurrentRequest(requestDetails[newActiveIndex]).then(resp => {\r\n this.setState({ allRequestOfVSIDnDMCID: resp.data.Result }, () => this.setActiveRequest())\r\n this.props.setResultSummaryDetails([]);\r\n this.props.setTopDetails([]);\r\n this.props.getYourFileSuccess();\r\n\r\n }).catch(res => {\r\n this.props.getYourFileFailure(this.getMessage('error'));\r\n })\r\n this.setState({ RequestSelect: value.target.value });\r\n }\r\n\r\n getAllMappedColumn(userId) {\r\n if (userId !== undefined) {\r\n this.props.getAllMappedColumn(userId).\r\n then(response => {\r\n this.props.setMappedColumn(response.data.Result);\r\n }).catch(res => {\r\n this.props.getYourFileFailure(this.getMessage('error'));\r\n })\r\n }\r\n else {\r\n //\r\n }\r\n }\r\n\r\n render() {\r\n var okButtonFlag = true\r\n //this.modelDelete = React.createRef();\r\n var fileDetails = (instance) => {\r\n\r\n var allDataToBind = this.state.allRequestOfVSIDnDMCID;\r\n var allRows = [];\r\n for (let index = 0; index < allDataToBind.length; index++) {\r\n const element = allDataToBind[index];\r\n instance.modelDelete[index] = React.createRef()\r\n var deleteMsg = ''\r\n if (element.Created_By === instance.props.user.user.Id) {\r\n deleteMsg = instance.getMessage(\"deleteConfirmation\")\r\n okButtonFlag = true\r\n } else {\r\n deleteMsg = instance.getMessage(\"deleteReqOriginatorMsg\")\r\n okButtonFlag = false\r\n }\r\n allRows.push(\r\n \r\n {
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n // language: state.language,\r\n userData: state.valueStory,\r\n user: state.default,\r\n content: state.content.spendAnalysis.yourFile,\r\n validation: state.content.validation,\r\n spendDetails: state.spendDetails,\r\n currencyCodes: state.content.discovery.form.currencyCodes,\r\n currencySymbols: state.content.CurrencySymbols,\r\n // validation: state.content.validation\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n getYourFileSuccess: message => dispatch(getYourFileSuccess(message)),\r\n getYourFileFailure: error => dispatch(getYourFileFailure(error)),\r\n LoadRequestDetails: (requestDetails, isNewRequest) => dispatch(LoadRequestDetails(requestDetails, isNewRequest)),\r\n getYourRequestsDetails: (email) => dispatch(getYourRequestsDetails(email)),\r\n getYourFileLoading: bool => dispatch(getYourFileLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n GetAllRequestsAgainstValueStory: (userId, valueStoryId) => dispatch(GetAllRequestsAgainstValueStory(userId, valueStoryId)),\r\n ActivetDeactiveCurrentRequest: requestDetails => dispatch(ActivetDeactiveCurrentRequest(requestDetails)),\r\n CleanRequestData: requestDetails => dispatch(CleanRequestData(requestDetails)),\r\n UpdateComment: requestDetails => dispatch(UpdateComment(requestDetails)),\r\n\r\n currentActiveRequest: (requestDetails) => dispatch(currentActiveRequest(requestDetails)),\r\n setResultSummaryDetails: data => dispatch(setResultSummaryDetails(data)),\r\n setTopDetails: data => dispatch(setTopDetails(data)),\r\n setValueStoryDmciDetails: (data) => dispatch(setValueStoryDmciDetails(data)),\r\n setYourFileRequestDetails: (requests) => dispatch(setYourFileRequestDetails(requests)),\r\n getAllMappedColumn: (userId) => dispatch(GetAllMappedColumn(userId)),\r\n setMappedColumn: (data) => dispatch(setMappedColumn(data)),\r\n getUserSpendSelections: (VSId, DMCId) => dispatch(getUserSpendSelections(VSId, DMCId)),\r\n trackUserSpendSelections: (userSelections) => dispatch(trackUserSpendSelections(userSelections)),\r\n solutionScopeChanged: (val) => dispatch(solutionScopeChanged(val))\r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(YourFileContainer)\r\n","\r\n\r\nimport React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n defineScopeLoading,\r\n defineScopeSuccess,\r\n defineScopeFailure,\r\n getTopDetails\r\n //, getSupplierScopeDetails\r\n} from 'actions/spendActions'\r\nimport Select from 'react-select'\r\nimport { convertToMillion, formatThousands } from 'utils/Utils'\r\n\r\nclass SupplierScopeDetails extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n {\r\n this.state = {\r\n industry: '',\r\n industryOption: [],\r\n supplierData: [],\r\n supplierDetails: [],\r\n currencySymbol: ''\r\n\r\n }\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n //this.loadInitialData()\r\n window.scrollTo(0, 0);\r\n this.setState({\r\n currencySymbol: this.props.spendDetails.currentActiveRequest !== undefined ?\r\n this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()] : ''\r\n });\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n //if (nextProps.data !== this.props.data) {\r\n //Perform some operation\r\n this.setState({ supplierData: nextProps.data, supplierDetails: nextProps.data.sort((a, b) => a.RANK - b.RANK).slice(0, 20) });\r\n //}\r\n }\r\n\r\n // loadInitialData () {\r\n // var array = [\r\n // { label: 'Top 10 Supplier', value: '10' },\r\n // { label: 'Top 20 Supplier', value: '20' }\r\n // ]\r\n // this.setState({ industryOption: array, industry: array[1].label })\r\n // }\r\n\r\n // handleIndustryChange (event) {\r\n // var sortData = this.props.data.sort((a,b) => a.RANK-b.RANK).slice(0, event.value); \r\n\r\n // this.setState({ industry: event.label, supplierDetails: sortData })\r\n // }\r\n\r\n render() {\r\n var _this = this;\r\n if (this.state.supplierDetails != undefined) {\r\n var currencySymbol = this.state.currencySymbol\r\n var rows = this.state.supplierDetails.map(function (row) {\r\n return (\r\n \r\n
\r\n \r\n {/* this.loadData()} currencySymbol={currentActiveRequest !== undefined ? this.props.currencySymbols[currentActiveRequest.Currency.trim()] : ''} parametersData={currentActiveRequest} closePopup={() => this.hideModal('AccountParameters')} /> */}\r\n {/*
\r\n {(this.props.content.title)}{
\r\n {this.props.content.subTitle}
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.mNcTitle}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.props.content.requester}
\r\n {currentActiveRequest !== undefined && currentActiveRequest.SAPRequester !== undefined ? (currentActiveRequest.SAPRequester) : ''}
\r\n \r\n
\r\n {this.props.content.processDate}
\r\n \r\n {currentActiveRequest !== undefined && currentActiveRequest.CREATE_TIMESTAMP !== undefined ? moment(currentActiveRequest.CREATE_TIMESTAMP).format('MMM DD,YYYY') : ''}\r\n
\r\n \r\n
\r\n {this.props.content.LastEditDate}
\r\n \r\n {currentActiveRequest !== undefined && currentActiveRequest.UPDATED_TIMESTAMP !== undefined ? moment(currentActiveRequest.UPDATED_TIMESTAMP).format('MMM DD,YYYY') : ''}\r\n
\r\n \r\n
\r\n {this.props.content.commentsRequest}
\r\n \r\n this.onChange(e)}\r\n id='yourFile.commentsRequest'\r\n //label={this.props.content.commentsRequest}\r\n value={currentActiveRequest !== undefined && currentActiveRequest.UPDATED_COMMENTS !== undefined ? currentActiveRequest.UPDATED_COMMENTS : ''}\r\n />\r\n
\r\n \r\n \r\n \r\n
\r\n {/*
\r\n | \r\n | {this.props.content.tblCol1} | \r\n{this.props.content.tblCol2} | \r\n{this.props.content.tblCol3} | \r\n{this.props.content.tblCol4} | \r\n{this.props.content.tblCol5} | \r\n\r\n |
|---|
\r\n this.handleNextPage(values)}\r\n color\r\n float\r\n disabled={this.props.spendDetails.isLoading}\r\n />\r\n
*/}\r\n \r\n \r\n \r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nclass Rows extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n {\r\n }\r\n }\r\n render() {\r\n return (\r\n | {this.props.content.suppliers} | \r\n{this.props.content.invoiceSpend} | \r\n{this.props.content.invoiceCount} | \r\n{this.props.content.poCount} | \r\n
|---|
\" + instance.format(instance.getMetricsTypeDetails(d.data), true).concat(\" (\",\r\n // instance.getPercentageValue(d.data.invoiceSpend < 0 ? 0 : d.value, props.totalInvoicSpend)).concat(\"%)\"))\r\n div.html(d.data.name + \"
\" + instance.format(instance.getMetricsTypeDetails(d.data), true).concat(\" (\",\r\n instance.getPercentageValue(instance.getMetricsTypeDetails(d.data) < 0 ? 0 : instance.getMetricsTypeDetails(d.data), instance.getSelectedMetricsTotalValue(props.totalValues))).concat(\"%)\"))\r\n .style(\"left\", (d3.event.pageX) + \"px\")\r\n .style(\"top\", (d3.event.pageY - 28) + \"px\")\r\n .style(\"z-index\", 1);\r\n })\r\n .on(\"mouseout\", function (d) {\r\n div.transition()\r\n .duration(100)\r\n .style(\"opacity\", 0);\r\n });\r\n\r\n\r\n leaf\r\n .append('clipPath')\r\n .attr('id', d => (d.clipUid = uid('clip')).id)\r\n .append('use')\r\n .attr('xlink:href', d => d.leafUid.href).attr(\"fill\", \"pink\")\r\n\r\n leaf\r\n .append('text')\r\n .style('font-size', function (d) {\r\n let width = d.x1 - d.x0;\r\n let height = d.y1 - d.y0;\r\n if (width < 100 || height < 100) return \"0.8rem\"\r\n else return \"1.5rem\"\r\n })\r\n .attr('clip-path', d => d.clipUid)\r\n\r\n .selectAll('tspan')\r\n .data(d =>\r\n d.data.name.split(\" \").concat(instance.format(instance.getMetricsTypeDetails(d.data)).\r\n concat(\" (\",\r\n instance.getPercentageValue(instance.getMetricsTypeDetails(d.data) < 0 ? 0 : instance.getMetricsTypeDetails(d.data), instance.getSelectedMetricsTotalValue(props.totalValues))).concat(\"%)\"))\r\n )\r\n .join('tspan')\r\n .attr('x', 3)\r\n .attr(\r\n 'y',\r\n (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`\r\n )\r\n .attr('fill-opacity', (d, i, nodes) =>\r\n i === nodes.length - 1 ? 0.7 : null\r\n ).text(d => d).style('cursor','pointer')\r\n\r\n var p = d3.selectAll(\"tspan\");\r\n p.style(\"fill\", \"white\");\r\n\r\n var txt = d3.selectAll(\"text\")\r\n .on(\"mouseover\", function (d) {\r\n div.transition()\r\n .duration(200)\r\n .style(\"opacity\", 1);\r\n if (d.data !== undefined && d.data.name !== undefined) {\r\n div.html(d.data.name + \"
\" + instance.format(instance.getMetricsTypeDetails(d.data), true).concat(\" (\",\r\n //instance.getPercentageValue(d.value, props.totalInvoicSpend)).concat(\"%)\"))\r\n instance.getPercentageValue(instance.getMetricsTypeDetails(d.data) < 0 ? 0 :\r\n instance.getMetricsTypeDetails(d.data), instance.getSelectedMetricsTotalValue(props.totalValues))).concat(\"%)\"))\r\n .style(\"left\", (d3.event.pageX) + \"px\")\r\n .style(\"top\", (d3.event.pageY - 28) + \"px\");\r\n }\r\n\r\n })\r\n .on(\"mouseout\", function (d) {\r\n div.transition()\r\n .duration(100)\r\n .style(\"opacity\", 0);\r\n })\r\n //console.log(svg.node())\r\n\r\n return svg.node()\r\n }\r\n\r\n render() {\r\n return \r\n }\r\n}\r\n\r\nexport default TreeMap\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport PopupButton from 'UI/PopupButton'\r\nimport Select from 'react-select'\r\nimport * as d3 from 'd3'\r\nimport StackedBarChart from 'components/UI/StackedBarChart'\r\nimport SupplierScopeDetails from './SupplierScopeDetails'\r\nimport TreeMap from './TreemapD3'\r\nimport ZoomModal from 'components/UI/ZoomModal'\r\nimport _ from 'lodash';\r\nimport Modal from 'reboron/OutlineModal'\r\nimport {\r\n\tdefineScopeSuccess,\r\n\tdefineScopeLoading,\r\n\tresetError,\r\n\tdefineScopeFailure,\r\n\tcurrentActiveRequest,\r\n\tgetIndustrySupplierDetails,\r\n\tgetTopDetails,\r\n\tgetSupplierCountryCodes,\r\n\tgetSummaryScopeSolution,\r\n\tgetSupplierScopeDetails,\r\n\tstoreSupplierSKEY,\r\n\tstoreIndustryGICS_ID,\r\n\ttrackSupplierDrillDownChanges,\r\n\ttrackSupplierDrillDownSave,\r\n\ttrackIndustryDrillScopeChanges\r\n\t//getDefineScopesDetails\r\n} from 'actions/spendActions'\r\nimport { convertToMillion, formatThousands } from 'utils/Utils'\r\nimport { object } from 'prop-types';\r\nimport {\r\n\tsuggestedValueModalStyle,\r\n\tsuggestedValueContentStyle,\r\n\tpath, backdropStyle\r\n} from 'Constants'\r\nimport { modalStyle, modalContentStyle, changeModalStyle, changeModalContentStyle } from 'Constants'\r\nimport SupplierDrillDownPopup from '../SupplierDrillDownPopup'\r\nimport SupplierIndustriesPopup from '../SupplierIndustriesPopup'\r\nimport Button from 'UI/Button'\r\nimport VideoHelp from 'components/UI/VideoHelp'\r\nimport { MultiSelect } from 'primereact/multiselect';\r\n\r\nconst changeBackdropStyle = Object.assign({}, backdropStyle);\r\nchangeBackdropStyle.zIndex = '1050';\r\n\r\nconst alertModalStyle = Object.assign({}, changeModalStyle);\r\nalertModalStyle.zIndex = '1060';\r\n\r\n//@withStyles(styles)\r\nclass IndustryBreakdownContainer extends Component {\r\n\t_isMounted = false;\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t\tthis.state = {\r\n\t\t\tRequestIds: [],\r\n\t\t\tselectedScopes: '',\r\n\t\t\tfileDetails: [],\r\n\t\t\tscopes: [],\r\n\t\t\tcurrentActiveRequest: '',\r\n\t\t\tallCountries: [],\r\n\t\t\tallBuyerRegion: [],\r\n\t\t\tallBusinessUnit: [],\r\n\t\t\ttopCount: [],\r\n\t\t\tsummaryScopeData: [],\r\n\t\t\tsupplierData: [],\r\n\t\t\tindustrySupplierDetailsAllData: '',\r\n\t\t\tindustrySupplierDetailsFilterData: '',\r\n\t\t\tisFilterChanges: false,\r\n\t\t\tindustryLevelList: [\r\n\t\t\t\t{ label: '2', value: 'L2_INDUSTRY_NAME' },\r\n\t\t\t\t{ label: '3', value: 'L3_INDUSTRY_NAME' },\r\n\t\t\t\t{ label: '4', value: 'L4_INDUSTRY_NAME' },\r\n\t\t\t\t{ label: '5', value: 'L5_INDUSTRY_NAME' },\r\n\t\t\t\t{ label: '6', value: 'L6_INDUSTRY_NAME' },\r\n\t\t\t\t{ label: '7', value: 'L7_INDUSTRY_NAME' }\r\n\t\t\t],\r\n\t\t\tdefineScopeFilters: {\r\n\t\t\t\tcountry: ['all'],\r\n\t\t\t\tindustryLevel: \"L3_INDUSTRY_NAME\",\r\n\t\t\t\tindustryName: '',\r\n\t\t\t\tsolution: ['No Filter'],\r\n\t\t\t\toutSolution: ['No Filter'],\r\n\t\t\t\tsolutionConfirmation: 'all',\r\n\t\t\t\tbuyerRegion: ['all'],\r\n\t\t\t\tbusinessUnit: ['all'],\r\n\t\t\t\tgoods: 'all',\r\n\t\t\t\tdirectSpend: 'all',\r\n\t\t\t\tmetricsType: \"Invoice Spend\",\r\n\t\t\t\taribaNetwork: \"all\",\r\n\t\t\t\tsapAribaBuyProcess: \"all\",\r\n\t\t\t\ttopRecords: 20,\r\n\t\t\t\tGICS_ID: ''\r\n\t\t\t},\r\n\r\n\t\t\tindustryLeveldrpdwn: \"L3_INDUSTRY_NAME\",\r\n\t\t\tdefineScope: {\r\n\t\t\t\tDMC_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.DMC_ID : 0\r\n\t\t\t\t, VS_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.VS_ID : 0,\r\n\t\t\t\tUser_Email: '',\r\n\t\t\t\tSolution: ['No Filter'],\r\n\t\t\t\tCountry: ['all'],\r\n\t\t\t\tSolutionConfirmation: 'all',\r\n\t\t\t\tGICS_ID: 'all',\r\n\t\t\t\tBuyer_Region: ['all'],\r\n\t\t\t\tBusiness_Unit: ['all'],\r\n\t\t\t\tGoods: 'all',\r\n\t\t\t\tDirectSpend: 'all',\r\n\t\t\t\tMetricsType: \"Invoice Spend\",\r\n\t\t\t\tAribaNetwork: \"all\",\r\n\t\t\t},\r\n\t\t\tallSolutions: [\r\n\t\t\t\t{ label: \"No Filter\", value: \"No Filter\" },\r\n\t\t\t\t{ label: \"Sourcing\", value: \"Sourcing\" },\r\n\t\t\t\t{ label: \"Commerce Automation\", value: \"Commerce Automation\" },\r\n\t\t\t\t{ label: \"Discount/SCF\", value: \"Discount/SCF\" },\r\n\t\t\t\t{ label: \"Concur\", value: \"Concur\" },\r\n\t\t\t\t{ label: \"Fieldglass\", value: \"Fieldglass\" },\r\n\t\t\t\t{ label: \"Supply Chain Collaboration\", value: \"Supply Chain Collaboration\" },\r\n\t\t\t\t{ label: \"Buying and Invoicing\", value: \"Buying and Invoicing\" },\r\n\t\t\t\t{ label: \"Contract Invoicing\", value: \"Contract Invoicing\" },\r\n\t\t\t\t{ label: \"Spot Buy\", value: \"Spot Buy\" },\r\n\t\t\t\t{ label: \"No solutions\", value: \"No solutions\" },\r\n\t\t\t\t{ label: \"Any solutions\", value: \"Any solutions\" }\r\n\t\t\t],\r\n\t\t\tallSolutionsOut: [\r\n\t\t\t\t{ label: \"No Filter\", value: \"No Filter\" },\r\n\t\t\t\t{ label: \"Sourcing\", value: \"Out Sourcing\" },\r\n\t\t\t\t{ label: \"Commerce Automation\", value: \"Out Commerce Automation\" },\r\n\t\t\t\t{ label: \"Discount/SCF\", value: \"Out Discount/SCF\" },\r\n\t\t\t\t{ label: \"Concur\", value: \"Out Concur\" },\r\n\t\t\t\t{ label: \"Fieldglass\", value: \"Out Fieldglass\" },\r\n\t\t\t\t{ label: \"Supply Chain Collaboration\", value: \"Out Supply Chain Collaboration\" },\r\n\t\t\t\t{ label: \"Buying and Invoicing\", value: \"Out Buying and Invoicing\" },\r\n\t\t\t\t{ label: \"Contract Invoicing\", value: \"Out Contract Invoicing\" },\r\n\t\t\t\t{ label: \"Spot Buy\", value: \"Out Spot Buy\" },\r\n\t\t\t],\r\n\t\t\toptionSolutionConfirmation: [\r\n\t\t\t\t{ label: \"Not Confirmed\", value: \"No\" },\r\n\t\t\t\t{ label: \"Confirmed\", value: \"Yes\" },\r\n\t\t\t\t{ label: \"All\", value: \"all\" }\r\n\t\t\t],\r\n\t\t\tdirectSpendOptions: [\r\n\t\t\t\t{ label: \"All\", value: \"all\" },\r\n\t\t\t\t{ label: \"Yes\", value: \"Yes\" },\r\n\t\t\t\t{ label: \"No\", value: \"No\" }\r\n\t\t\t],\r\n\t\t\tgoodsOptions: [\r\n\t\t\t\t{ label: \"All\", value: \"all\" },\r\n\t\t\t\t{ label: \"Goods\", value: \"Goods\" },\r\n\t\t\t\t{ label: \"Services\", value: \"Services\" },\r\n\t\t\t\t{ label: \"Both\", value: \"Both\" },\r\n\t\t\t\t{ label: \"Unclassified\", value: \"Unclassified\" },\r\n\t\t\t],\r\n\t\t\tmetricsOptions: [\r\n\t\t\t\t{ label: \"Invoice Spend\", value: \"Invoice Spend\" },\r\n\t\t\t\t{ label: \"Invoice Count\", value: \"Invoice Count\" },\r\n\t\t\t\t{ label: \"PO Spend\", value: \"PO Spend\" },\r\n\t\t\t\t{ label: \"PO Count\", value: \"PO Count\" },\r\n\t\t\t],\r\n\t\t\taribaNetworkOptions: [\r\n\t\t\t\t{ label: \"All\", value: \"all\" },\r\n\t\t\t\t{ label: \"Matched\", value: \"Matched\" },\r\n\t\t\t\t{ label: \"Matched & Transacting\", value: \"Matched & Transacting\" },\r\n\t\t\t\t{ label: \"Not Matched\", value: \"Not Matched\" }\r\n\t\t\t],\r\n\t\t\tsapAribaBuyProcessOptions: [\r\n\t\t\t\t{ label: \"All\", value: \"all\" },\r\n\t\t\t\t{ label: \"Consultancy/SOW Services: Active Mgmt, otherwise Invoice Against Contract\", value: \"Consultancy/SOW Services: Active Mgmt, otherwise Invoice Against Contract\" },\r\n { label: \"Direct/MRO: Plan Driven PO\", value: \"Direct/MRO: Plan Driven PO\" },\r\n { label: \"Invoice Against Contract\", value: \"Invoice Against Contract\" },\r\n { label: \"Non-PO Invoice\", value: \"Non-PO Invoice\" },\r\n { label: \"Other Services: Active Mgmt, otherwise Invoice Against Contract\", value: \"Other Services: Active Mgmt, otherwise Invoice Against Contract\" },\r\n { label: \"Requisition: Non-Catalog or Tactical Sourcing\", value: \"Requisition: Non-Catalog or Tactical Sourcing\" },\r\n { label: \"Requisition: External Talent\", value: \"Requisition: External Talent\" },\r\n { label: \"Requisition: Catalog, Spot-Buy or Release Contract\", value: \"Requisition: Catalog, Spot-Buy or Release Contract\" },\r\n { label: \"Travel and Expense\", value: \"Travel and Expense\" }\r\n\t\t\t],\r\n\t\t\tbreadCrumbsArray: [],\r\n\t\t\taggregatedAmount: {\r\n\t\t\t\tinvoice_spend: 0,\r\n\t\t\t\tinvoice_count: 0,\r\n\t\t\t\tpo_spend: 0,\r\n\t\t\t\tpo_count: 0,\r\n\t\t\t\tunique_supplier: 0\r\n\t\t\t},\r\n\t\t\tcurrencySymbol: '',\r\n\t\t\topen: false,\r\n\t\t\topenIndustryPopup: false,\r\n\t\t\tclickedIndustryDetails: [],\r\n\t\t\tshowFlag: false,\r\n\t\t\tsolutionFilter: 'No Filter',\r\n\t\t\toutSolutionFilter: 'No Filter',\r\n\t\t\tcountryFilter: 'all',\r\n\t\t\tbusinessUnitFilter: 'all',\r\n\t\t\tbuyerRegionFilter: 'all',\r\n\t\t\tlevelDisabled: false,\r\n\t\t\tisDataExists: true\r\n\t\t}\r\n\t\tthis.handlelangChange = this.handlelangChange.bind(this)\r\n\t\tthis.filterAndGroupData = this.filterAndGroupData.bind(this)\r\n\t\tthis.onClick_TreeMap = this.onClick_TreeMap.bind(this)\r\n\t\tthis.onDoubleClickTreeMap = this.onDoubleClickTreeMap.bind(this)\r\n\t\tthis.handleIndustryLevelChange = this.handleIndustryLevelChange.bind(this)\r\n\t\tthis.handleTopCountChange = this.handleTopCountChange.bind(this)\r\n\t\tthis.removeIndustryFilter = this.removeIndustryFilter.bind(this)\r\n\t\tthis.isClickableTile = this.isClickableTile.bind(this);\r\n\t\tthis.getRankColumnName = this.getRankColumnName.bind(this)\r\n\t\tthis.showSupplierDrilldownModal = this.showSupplierDrilldownModal.bind(this)\r\n\t\tthis.setVisibility = this.setVisibility.bind(this)\r\n\t\tthis.outsidePopupClick = this.outsidePopupClick.bind(this)\r\n\t\tthis.showAlertModal = this.showAlertModal.bind(this)\r\n\t\tthis.hideAlertModal = this.hideAlertModal.bind(this)\r\n\t\tthis.continueNavigation = this.continueNavigation.bind(this)\r\n\t\tthis.showSupplierIndustriesModal = this.showSupplierIndustriesModal.bind(this)\r\n\t\tthis.setFilter = this.setFilter.bind(this)\r\n\t\tthis.toggleShow = this.toggleShow.bind(this)\r\n\t\tthis.triggerAllMethod = this.triggerAllMethod.bind(this)\r\n\t\tthis.clickedOutside = this.clickedOutside.bind(this)\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tthis._isMounted = true;\r\n\t\tthis.loadData()\r\n\t\twindow.scrollTo(0, 0);\r\n\t}\r\n\tcomponentWillUnmount() {\r\n\t\tthis._isMounted = false;\r\n\t\tthis.props.resetError();\r\n\t}\r\n\tgetMessage(keyToFindMessage) {\r\n\t\treturn this.props.content[keyToFindMessage];\r\n\t}\r\n\r\n\ttoggleShow() {\r\n\t\tthis.setState({ showFlag: !this.state.showFlag })\r\n\t}\r\n\r\n\tloadData() {\r\n\t\tthis.props.defineScopeLoading(true)\r\n\r\n\t\tthis.bindTopValues();\r\n\t\tthis.bindContryList();\r\n\r\n\t\tthis.getIndustrySupplierDetails();\r\n\t\tthis.getSummaryScopeSolution();\r\n\t\tthis.getSupplierScopeDetails();\r\n\t\tif (this._isMounted) {\r\n\t\t\tthis.setState({\r\n\t\t\t\tcurrencySymbol: this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency !== undefined \r\n\t\t\t\t\t&& this.props.spendDetails.currentActiveRequest.Currency.trim() !== '' \r\n\t\t\t\t\t&& this.props.spendDetails.currentActiveRequest.Currency.trim() !== \"0\" ?\r\n\t\t\t\t\tthis.props.spendDetails.currentActiveRequest.Currency.trim() : 'USD']\r\n\t\t\t})\r\n\t\t}\r\n\r\n\t}\r\n\r\n\tgetIndustrySupplierDetails(isTopRequest) {\r\n\t\tvar defineScope_obj = this.state.defineScope;\r\n\t\tdefineScope_obj.User_Email = this.props.spendDetails !== undefined &&\r\n\t\t\tthis.props.spendDetails.currentActiveRequest !== undefined ? (\r\n\t\t\t\tthis.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ?\r\n\t\t\t\t\tthis.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester) : '';\r\n\t\tdefineScope_obj.Country = this.state.countryFilter;\r\n\t\tdefineScope_obj.Solution = this.state.solutionFilter;\r\n\t\tdefineScope_obj.outSolution = this.state.outSolutionFilter;\r\n\t\tdefineScope_obj.SolutionConfirmation = this.state.defineScopeFilters.solutionConfirmation === '' ? defineScope_obj.SolutionConfirmation : this.state.defineScopeFilters.solutionConfirmation;\r\n\t\tdefineScope_obj.DirectSpend = this.state.defineScopeFilters.directSpend === '' ? defineScope_obj.DirectSpend : this.state.defineScopeFilters.directSpend;\r\n\t\tdefineScope_obj.Goods = this.state.defineScopeFilters.goods === '' ? defineScope_obj.Goods : this.state.defineScopeFilters.goods;\r\n\t\tdefineScope_obj.Business_Unit = this.state.businessUnitFilter;\r\n\t\tdefineScope_obj.Buyer_Region = this.state.buyerRegionFilter;\r\n\t\tdefineScope_obj.MetricsType = this.state.defineScopeFilters.metricsType === '' ? defineScope_obj.MetricsType : this.state.defineScopeFilters.metricsType;\r\n\t\tdefineScope_obj.AribaNetwork = this.state.defineScopeFilters.aribaNetwork === '' ? defineScope_obj.AribaNetwork : this.state.defineScopeFilters.aribaNetwork;\r\n\t\tdefineScope_obj.SAPAribaBuyProcess = this.state.defineScopeFilters.sapAribaBuyProcess === '' ? defineScope_obj.SAPAribaBuyProcess : this.state.defineScopeFilters.sapAribaBuyProcess;\r\n\r\n\t\tthis.props.getIndustrySupplierDetails(defineScope_obj)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tif (response.status === 200 && this._isMounted) {\r\n\t\t\t\t\tthis.setState({ industrySupplierDetailsAllData: response.data.Result },\r\n\t\t\t\t\t\t() => {\r\n\t\t\t\t\t\t\tthis.filterAndGroupData(isTopRequest)\r\n\t\t\t\t\t\t\t//this.props.defineScopeSuccess('')\r\n\t\t\t\t\t\t})\r\n\t\t\t\t\t//this.filterAndGroupData();\r\n\r\n\t\t\t\t}\r\n\r\n\t\t\t})\r\n\t\t\t.catch((exception) => {\r\n\t\t\t\tthis.props.defineScopeFailure(this.getMessage('noData'))\r\n\t\t\t})\r\n\t}\r\n\r\n\tbindTopValues() {\r\n\t\tvar topValuesArray = this.props.content.topValues.toString().split(',')\r\n\t\tvar listToBindTopValues = []\r\n\t\tfor (let index = 0; index < topValuesArray.length; index++) {\r\n\t\t\tconst element = topValuesArray[index]\r\n\t\t\tlistToBindTopValues.push({ label: element, value: element })\r\n\t\t}\r\n\r\n\t\tthis.setState({ topCount: listToBindTopValues })\r\n\t}\r\n\r\n\thandleIndustryLevelChange(value) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.industryLevel = value.value;\r\n\r\n\t\tif (defineScopeFilters.industryName !== \"\") {\r\n\t\t\t//pass GICS_ID to barchart and supplier grid to fecth data accordingly\r\n\t\t\tvar industryData = this.state.industrySupplierDetailsAllData.\r\n\t\t\t\tfilter((item) => item[defineScopeFilters.industryLevel] === defineScopeFilters.industryName);\r\n\t\t\tif (industryData !== undefined && industryData.length > 0) {\r\n\t\t\t\tdefineScopeFilters.GICS_ID = defineScopeFilters.industryLevel === \"L2_INDUSTRY_NAME\" ? 'all'\r\n\t\t\t\t\t: defineScopeFilters.industryLevel === \"L3_INDUSTRY_NAME\" ? industryData[0].L2_INDUSTRY_ID\r\n\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L4_INDUSTRY_NAME\" ? industryData[0].L3_INDUSTRY_ID\r\n\t\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L5_INDUSTRY_NAME\" ? industryData[0].L4_INDUSTRY_ID\r\n\t\t\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L6_INDUSTRY_NAME\" ? industryData[0].L5_INDUSTRY_ID : industryData[0].L6_INDUSTRY_ID\r\n\r\n\t\t\t\tdefineScopeFilters.industryName = defineScopeFilters.industryLevel === \"L2_INDUSTRY_NAME\" ? industryData[0].L2_INDUSTRY_NAME\r\n\t\t\t\t\t: defineScopeFilters.industryLevel === \"L3_INDUSTRY_NAME\" ? industryData[0].L3_INDUSTRY_NAME\r\n\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L4_INDUSTRY_NAME\" ? industryData[0].L4_INDUSTRY_NAME\r\n\t\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L5_INDUSTRY_NAME\" ? industryData[0].L5_INDUSTRY_NAME\r\n\t\t\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L6_INDUSTRY_NAME\" ? industryData[0].L6_INDUSTRY_NAME : industryData[0].L7_INDUSTRY_NAME\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tdefineScopeFilters.GICS_ID = 'all'\r\n\t\t\t\tdefineScopeFilters.industryName = ''\r\n\t\t\t}\r\n\t\t}\r\n\t\tvar breadCrumbsArray = this.state.breadCrumbsArray\r\n\t\tvar clickedIndustryDetails = this.state.clickedIndustryDetails\r\n\t\tif (value.label === \"2\") {\r\n\t\t\tdefineScopeFilters.industryName = \"\";\r\n\t\t\tbreadCrumbsArray = [];\r\n\t\t\tclickedIndustryDetails = []\r\n\t\t}\r\n\t\telse {\r\n\r\n\t\t}\r\n\t\t//this.state.breadCrumbsArray\r\n\r\n\t\tthis.setState({\r\n\t\t\tbreadCrumbsArray: breadCrumbsArray,\r\n\t\t\tclickedIndustryDetails: clickedIndustryDetails,\r\n\t\t\tdefineScopeFilters: defineScopeFilters,\r\n\t\t\tindustryLeveldrpdwn: value.value,\r\n\t\t\tisFilterChanges: true\r\n\t\t})//, () => this.triggerAllMethod(true, false))\r\n\t}\r\n\r\n\thandleTopCountChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.topRecords = data.value\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters }, () => this.filterAndGroupData(true))\r\n\t}\r\n\r\n\tremoveIndustryFilter(item, index, refreshPagefromPopUP) {\r\n\t\tvar breadCrumbsArray = this.state.breadCrumbsArray\r\n\t\t//var index = breadCrumbsArray.findIndex(industry => industry === item)\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\r\n\t\t//pass GICS_ID to barchart and supplier grid to fecth data accordingly\r\n\t\tvar industryData = this.state.industrySupplierDetailsAllData !== null ? this.state.industrySupplierDetailsAllData.filter((item) => item[defineScopeFilters.industryLevel] === defineScopeFilters.industryName): undefined;\r\n\r\n\t\tif (industryData !== undefined && industryData.length > 0) {\r\n\t\t\tdefineScopeFilters.GICS_ID = defineScopeFilters.industryLevel === \"L2_INDUSTRY_NAME\" ? 'all'\r\n\t\t\t\t: defineScopeFilters.industryLevel === \"L3_INDUSTRY_NAME\" ? industryData[0].L2_INDUSTRY_ID\r\n\t\t\t\t\t: defineScopeFilters.industryLevel === \"L4_INDUSTRY_NAME\" ? industryData[0].L3_INDUSTRY_ID\r\n\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L5_INDUSTRY_NAME\" ? industryData[0].L4_INDUSTRY_ID\r\n\t\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L6_INDUSTRY_NAME\" ? industryData[0].L5_INDUSTRY_ID : industryData[0].L6_INDUSTRY_ID\r\n\t\t} else {\r\n\t\t\tdefineScopeFilters.GICS_ID = 'all'\r\n\t\t}\r\n\t\tvar breadCrumbsArray_new = []\r\n\t\tvar col = 'L3_INDUSTRY_NAME'\r\n\t\tvar previousLevelColName = this.state.industryLevelList.findIndex((item) => item.value === this.state.industryLeveldrpdwn);\r\n\t\tcol = previousLevelColName >= 1 ? this.state.industryLevelList[previousLevelColName - 1].value : this.state.industryLevelList[previousLevelColName].value\r\n\t\t// defineScopeFilters.industryLevel = col\r\n\t\tif (index > 0) {\r\n\t\t\tbreadCrumbsArray_new = breadCrumbsArray.filter((a, ind) =>\r\n\r\n\t\t\t\tind !== index\r\n\t\t\t);\r\n\r\n\t\t\tdefineScopeFilters.industryName = breadCrumbsArray_new[breadCrumbsArray_new.length - 1].industryName\r\n\t\t\tdefineScopeFilters.industryLevel = breadCrumbsArray_new[breadCrumbsArray_new.length - 1].industryLevel\r\n\t\t\t// var previousLevelColName = this.state.industryLevelList.findIndex((item) => item.value === this.state.industryLeveldrpdwn);\r\n\t\t\t// col = this.state.industryLevelList[previousLevelColName - 1].value\r\n\t\t}\r\n\t\telse {\r\n\t\t\tdefineScopeFilters.industryName = ''\r\n\t\t\tdefineScopeFilters.GICS_ID = 'all'\r\n\t\t}\r\n\r\n\t\tlet levelFlag = breadCrumbsArray_new.length > 0 ? true : false;\r\n\t\tif (refreshPagefromPopUP === true) {\r\n\t\t\tthis.setState({ breadCrumbsArray: breadCrumbsArray_new, defineScopeFilters: defineScopeFilters, industryLeveldrpdwn: col, levelDisabled: levelFlag })\r\n\t\t\tObject.assign(this.state, { breadCrumbsArray: breadCrumbsArray_new })\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.state.clickedIndustryDetails.splice(this.state.clickedIndustryDetails.length - 1, 1)\r\n\t\t\tvar finalBreadcrumbs = this.state.clickedIndustryDetails\r\n\t\t\tthis.setState({\r\n\t\t\t\tbreadCrumbsArray: breadCrumbsArray_new, defineScopeFilters: defineScopeFilters, industryLeveldrpdwn: col,\r\n\t\t\t\tclickedIndustryDetails: finalBreadcrumbs, levelDisabled: levelFlag\r\n\t\t\t},\r\n\t\t\t\t() => this.triggerAllMethod(true, false))\r\n\t\t\tObject.assign(this.state, { breadCrumbsArray: breadCrumbsArray_new, clickedIndustryDetails: finalBreadcrumbs })\r\n\t\t}\r\n\t}\r\n\r\n\r\n\tbindContryList() {\r\n\t\tvar defineScope = this.state.defineScope\r\n\t\tthis.props.getSupplierCountryCodes(defineScope).then((response) => {\r\n\t\t\tvar allCountries = [{ label: \"All countries\", value: \"all\" }];\r\n\t\t\tlet allBusinessUnit = [{ label: \"All Business Units\", value: \"all\" }];\r\n\t\t\tlet allBuyerRegion = [{ label: \"All Buyer Regions\", value: \"all\" }];\r\n\t\t\tif (response.status === 200 && response.data.Result !== null) {\r\n\t\t\t\tif (response.data.Result.Table !== null) {\r\n\t\t\t\t\tresponse.data.Result.Table.forEach(itemCN => {\r\n\t\t\t\t\t\tlet value = Object.values(itemCN)\r\n\t\t\t\t\t\tallCountries.push({ label: value[0], value: value[0] });\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif (response.data.Result.Table2 !== null) {\r\n\t\t\t\t\tresponse.data.Result.Table2.forEach(itemBU => {\r\n\t\t\t\t\t\tlet value = Object.values(itemBU)\r\n\t\t\t\t\t\tallBusinessUnit.push({ label: value[0], value: value[0] });\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif (response.data.Result.Table1 !== null) {\r\n\t\t\t\t\tresponse.data.Result.Table1.forEach(itemBR => {\r\n\t\t\t\t\t\tlet value = Object.values(itemBR)\r\n\t\t\t\t\t\tallBuyerRegion.push({ label: value[0], value: value[0] });\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\r\n\t\t\t}\r\n\t\t\tthis.setState({ allCountries: allCountries, allBusinessUnit: allBusinessUnit, allBuyerRegion: allBuyerRegion });\r\n\r\n\r\n\t\t}).catch((exception) => {\r\n\t\t\t//console.log(exception);\r\n\t\t})\r\n\t}\r\n\r\n\thandleCountryChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.country = data.value.length > 0 ? data.value : ['all'];\r\n\t\tif (data.value.length > 1 && data.value[0] == 'all') {\r\n\t\t\tdata.value.shift()\r\n\t\t\tdefineScopeFilters.country = data.value\r\n\t\t}\r\n\t\tif (data.value.length > 1 && data.value.includes('all')) {\r\n\t\t\tdefineScopeFilters.country = [];\r\n\t\t\tdefineScopeFilters.country = ['all'];\r\n\t\t}\r\n\t\tlet str = defineScopeFilters.country.toString()\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, countryFilter: str, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleSolutionChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.solution = data.value.length > 0 ? data.value : ['No Filter'];\r\n\t\tif (data.value.length > 1 && data.value[0] == 'No Filter') {\r\n\t\t\tdata.value.shift()\r\n\t\t\tdefineScopeFilters.solution = data.value\r\n\t\t}\r\n\t\tif (data.value.length > 1 && data.value.includes('No Filter')) {\r\n\t\t\tdefineScopeFilters.solution = [];\r\n\t\t\tdefineScopeFilters.solution = ['No Filter'];\r\n\t\t}\r\n\t\tif (data.value.includes('No solutions') && data.value.includes('Any solutions')) {\r\n\t\t\tdefineScopeFilters.solution = []\r\n\t\t\tdefineScopeFilters.solution = [data.value[1]]\r\n\t\t} else if (data.value.includes('No solutions')) {\r\n\t\t\tdefineScopeFilters.solution = []\r\n\t\t\tdefineScopeFilters.solution = ['No solutions']\r\n\t\t}\r\n\t\telse if (data.value.includes('Any solutions')) {\r\n\t\t\tdefineScopeFilters.solution = []\r\n\t\t\tdefineScopeFilters.solution = ['Any solutions']\r\n\t\t}\r\n\t\tlet str = defineScopeFilters.solution.toString()\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, solutionFilter: str, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleOutSolutionChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.outSolution = data.value.length > 0 ? data.value : ['No Filter'];\r\n\t\tif (data.value.length > 1 && data.value[0] == 'No Filter') {\r\n\t\t\tdata.value.shift()\r\n\t\t\tdefineScopeFilters.outSolution = data.value\r\n\t\t}\r\n\t\tif (data.value.length > 1 && data.value.includes('No Filter')) {\r\n\t\t\tdefineScopeFilters.outSolution = [];\r\n\t\t\tdefineScopeFilters.outSolution = ['No Filter'];\r\n\t\t}\r\n\t\tif (data.value.includes('No solutions') && data.value.includes('Any solutions')) {\r\n\t\t\tdefineScopeFilters.outSolution = []\r\n\t\t\tdefineScopeFilters.outSolution = [data.value[1]]\r\n\t\t} else if (data.value.includes('No solutions')) {\r\n\t\t\tdefineScopeFilters.outSolution = []\r\n\t\t\tdefineScopeFilters.outSolution = ['No solutions']\r\n\t\t}\r\n\t\telse if (data.value.includes('Any solutions')) {\r\n\t\t\tdefineScopeFilters.outSolution = []\r\n\t\t\tdefineScopeFilters.outSolution = ['Any solutions']\r\n\t\t}\r\n\t\tlet str = defineScopeFilters.outSolution.toString()\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, outSolutionFilter: str, isFilterChanges:true })\r\n\t}\r\n\r\n\tclickedOutside() {\r\n\t\tthis.triggerAllMethod(true, true)\r\n\t\tthis.setState({isFilterChanges:false})\r\n\t}\r\n\r\n\r\n\tclickedResetFilter() {\r\n\t\tvar reset_defineScopeFilters = this.state.defineScopeFilters;\r\n\t\treset_defineScopeFilters.country = ['all'];\r\n\t\treset_defineScopeFilters.industryLevel = \"L3_INDUSTRY_NAME\";\r\n\t\treset_defineScopeFilters.industryName = '';\r\n\t\treset_defineScopeFilters.solution = ['No Filter'];\r\n\t\treset_defineScopeFilters.outSolution = ['No Filter'];\r\n\t\treset_defineScopeFilters.solutionConfirmation = 'all';\r\n\t\treset_defineScopeFilters.buyerRegion = ['all'];\r\n\t\treset_defineScopeFilters.businessUnit = ['all'];\r\n\t\treset_defineScopeFilters.goods = 'all';\r\n\t\treset_defineScopeFilters.directSpend = 'all';\r\n\t\treset_defineScopeFilters.metricsType = \"Invoice Spend\";\r\n\t\treset_defineScopeFilters.aribaNetwork = \"all\";\r\n\t\treset_defineScopeFilters.sapAribaBuyProcess = \"all\";\r\n\t\treset_defineScopeFilters.topRecords = 20;\r\n\t\treset_defineScopeFilters.GICS_ID = ''\r\n\t\tthis.removeIndustryFilter('all', 0, false)\r\n\t\tthis.setState({\r\n\t\t\tdefineScopeFilters: reset_defineScopeFilters, industryLeveldrpdwn: \"L3_INDUSTRY_NAME\",\r\n\t\t\tsolutionFilter: 'No Filter', outSolutionFilter: 'No Filter', countryFilter: 'all', businessUnitFilter: 'all', buyerRegionFilter: 'all'\r\n\t\t}, () => this.clickedOutside());\r\n\t\t//this.clickedOutside();\r\n\t}\r\n\r\n\thandleSolutionConfirmationChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.solutionConfirmation = data.value\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleBusinessChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.businessUnit = data.value.length > 0 ? data.value : ['all'];\r\n\t\tif (data.value.length > 1 && data.value[0] == 'all') {\r\n\t\t\tdata.value.shift()\r\n\t\t\tdefineScopeFilters.businessUnit = data.value\r\n\t\t}\r\n\t\tif (data.value.length > 1 && data.value.includes('all')) {\r\n\t\t\tdefineScopeFilters.businessUnit = [];\r\n\t\t\tdefineScopeFilters.businessUnit = ['all'];\r\n\t\t}\r\n\t\tlet str = defineScopeFilters.businessUnit.toString();\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, businessUnitFilter: str, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleBuyerChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.buyerRegion = data.value.length > 0 ? data.value : ['all'];\r\n\t\tif (data.value.length > 1 && data.value[0] == 'all') {\r\n\t\t\tdata.value.shift()\r\n\t\t\tdefineScopeFilters.buyerRegion = data.value\r\n\t\t}\r\n\t\tif (data.value.length > 1 && data.value.includes('all')) {\r\n\t\t\tdefineScopeFilters.buyerRegion = [];\r\n\t\t\tdefineScopeFilters.buyerRegion = ['all'];\r\n\t\t}\r\n\t\tlet str = defineScopeFilters.buyerRegion.toString();\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, buyerRegionFilter: str, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleDirectSpendChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.directSpend = data.value == \"\" ? \"all\" : data.value;\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleGoodsChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.goods = data.value\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleMetricsChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.metricsType = data.value\r\n\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleAribaNetworkChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.aribaNetwork = data.value\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, isFilterChanges:true })\r\n\t}\r\n\r\n\thandleSAPAribaBuyProcessChange(data) {\r\n\t\tvar defineScopeFilters = this.state.defineScopeFilters\r\n\t\tdefineScopeFilters.sapAribaBuyProcess = data.value\r\n\t\tthis.setState({ defineScopeFilters: defineScopeFilters, isFilterChanges:true })\r\n\t}\r\n\r\n\tfilterAndGroupData(isTopRequest) {\r\n\t\tvar _instance = this;\r\n\t\tif (this.state.industrySupplierDetailsAllData !== null && this.state.industrySupplierDetailsAllData !== undefined && this._isMounted) {\r\n\t\t\tvar allData = this.state.industrySupplierDetailsAllData;\r\n\t\t\tvar treeFormatData = [];\r\n\t\t\tvar allotherInvoiceSpend = 0\r\n\t\t\tvar topRecords = [];\r\n\t\t\tvar industryLeveldrpdwn = this.state.industryLeveldrpdwn\r\n\t\t\tvar defineScopeFilters = this.state.defineScopeFilters;\r\n\t\t\tvar breadCrumbs = this.state.breadCrumbsArray;\r\n\t\t\tObject.keys(defineScopeFilters).map((filter) => {\r\n\t\t\t\tswitch (filter) {\r\n\r\n\t\t\t\t\tcase \"industryLevel\": {\r\n\t\t\t\t\t\tvar removeNullEntries = allData.filter(item => item[defineScopeFilters[filter]] !== null)\r\n\t\t\t\t\t\tvar groups = _.groupBy(removeNullEntries, defineScopeFilters[filter]);\r\n\r\n\t\t\t\t\t\tif (defineScopeFilters.industryName === \"\") {\r\n\r\n\t\t\t\t\t\t\tObject.keys(groups).map((element) => {\r\n\t\t\t\t\t\t\t\tvar isclick = false\r\n\t\t\t\t\t\t\t\tvar child_INVOICE_SPEND = 0;\r\n\t\t\t\t\t\t\t\tvar child_INVOICE_COUNT = 0;\r\n\t\t\t\t\t\t\t\tvar child_PO_SPEND = 0;\r\n\t\t\t\t\t\t\t\tvar child_PO_COUNT = 0;\r\n\t\t\t\t\t\t\t\tvar child_UNIQUE_SUPPLIER = 0;\r\n\t\t\t\t\t\t\t\tvar rank = 0\r\n\t\t\t\t\t\t\t\tfor (let index = 0; index < groups[element].length; index++) {\r\n\t\t\t\t\t\t\t\t\tisclick = this.isClickableTile(\"L2_INDUSTRY_NAME\", groups[element][index])\r\n\t\t\t\t\t\t\t\t\tconst childElement = groups[element][index];\r\n\t\t\t\t\t\t\t\t\tchild_INVOICE_SPEND = child_INVOICE_SPEND + childElement.INVOICE_SPEND;\r\n\t\t\t\t\t\t\t\t\tchild_INVOICE_COUNT = child_INVOICE_COUNT + childElement.INVOICE_COUNT;\r\n\t\t\t\t\t\t\t\t\tchild_PO_SPEND = child_PO_SPEND + childElement.PO_SPEND;\r\n\t\t\t\t\t\t\t\t\tchild_PO_COUNT = child_PO_COUNT + childElement.PO_COUNT;\r\n\t\t\t\t\t\t\t\t\tchild_UNIQUE_SUPPLIER = child_UNIQUE_SUPPLIER + childElement.UNIQUE_SUPPLIERS;\r\n\t\t\t\t\t\t\t\t\trank = childElement[_instance.getRankColumnName(defineScopeFilters[filter])]\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\tif (treeFormatData.findIndex((ele) => ele.name === element) < 0) {\r\n\t\t\t\t\t\t\t\t\ttreeFormatData.push({\r\n\t\t\t\t\t\t\t\t\t\tname: element, value: child_INVOICE_SPEND, clickable: isclick,\r\n\t\t\t\t\t\t\t\t\t\tinvoiceSpend: (child_INVOICE_SPEND), invoiceCount: (child_INVOICE_COUNT),\r\n\t\t\t\t\t\t\t\t\t\tpoSpend: (child_PO_SPEND), poCount: (child_PO_COUNT),\r\n\t\t\t\t\t\t\t\t\t\tuniqueSupplier: (child_UNIQUE_SUPPLIER),\r\n\t\t\t\t\t\t\t\t\t\trank: rank\r\n\t\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\t\tvar existingEntry = treeFormatData.filter((ele) => ele.name === element);\r\n\t\t\t\t\t\t\t\t\tvar updatedEntry = [{\r\n\t\t\t\t\t\t\t\t\t\tname: element,\r\n\t\t\t\t\t\t\t\t\t\tvalue: existingEntry[0].value + (child_INVOICE_SPEND),\r\n\t\t\t\t\t\t\t\t\t\tclickable: isclick,\r\n\t\t\t\t\t\t\t\t\t\tinvoiceSpend: existingEntry[0].invoiceSpend + (child_INVOICE_SPEND),\r\n\t\t\t\t\t\t\t\t\t\tinvoiceCount: existingEntry[0].invoiceCount + (child_INVOICE_COUNT),\r\n\t\t\t\t\t\t\t\t\t\tpoSpend: existingEntry[0].poSpend + (child_PO_SPEND),\r\n\t\t\t\t\t\t\t\t\t\tpoCount: existingEntry[0].poCount + (child_PO_COUNT),\r\n\t\t\t\t\t\t\t\t\t\tuniqueSupplier: existingEntry[0].uniqueSupplier + (child_UNIQUE_SUPPLIER),\r\n\t\t\t\t\t\t\t\t\t\trank: rank\r\n\t\t\t\t\t\t\t\t\t}]\r\n\t\t\t\t\t\t\t\t\tvar index = treeFormatData.findIndex((ele) => ele.name === element)\r\n\t\t\t\t\t\t\t\t\ttreeFormatData[index] = updatedEntry;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\ttreeFormatData = groups;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\tcase \"industryName\":\r\n\t\t\t\t\t\tvar col = ''\r\n\t\t\t\t\t\tvar nextLevelColName = this.state.industryLevelList.findIndex((item) => item.value === this.state.industryLeveldrpdwn);\r\n\t\t\t\t\t\tif (!isTopRequest) {\r\n\t\t\t\t\t\t\tcol = this.state.industryLevelList[nextLevelColName + 1]\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\tcol = this.state.industryLevelList[nextLevelColName]\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tif (defineScopeFilters[filter] !== \"\" && col !== undefined) {\r\n\t\t\t\t\t\t\tvar groups = treeFormatData[defineScopeFilters[filter]];\r\n\t\t\t\t\t\t\tif (groups === undefined) {\r\n\t\t\t\t\t\t\t\tgroups = []\r\n\t\t\t\t\t\t\t\tObject.values(treeFormatData).map((ele) => {\r\n\r\n\t\t\t\t\t\t\t\t\tfor (let index = 0; index < ele.length; index++) {\r\n\t\t\t\t\t\t\t\t\t\tconst element = ele[index];\r\n\t\t\t\t\t\t\t\t\t\tif (element[breadCrumbs[breadCrumbs.length - 1].industryLevel] ===\r\n\t\t\t\t\t\t\t\t\t\t\tbreadCrumbs[breadCrumbs.length - 1].industryName) {\r\n\t\t\t\t\t\t\t\t\t\t\tgroups.push(element)\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\tif (groups !== undefined) {\r\n\t\t\t\t\t\t\t\ttreeFormatData = [];\r\n\t\t\t\t\t\t\t\tindustryLeveldrpdwn = col.value\r\n\t\t\t\t\t\t\t\tthis.setState({ industryLeveldrpdwn: industryLeveldrpdwn })\r\n\t\t\t\t\t\t\t\tObject.keys(groups).map((element) => {\r\n\t\t\t\t\t\t\t\t\tif (groups[element][col.value] !== null && groups[element][col.value] !== undefined) {\r\n\t\t\t\t\t\t\t\t\t\tvar _rank = groups[element][_instance.getRankColumnName(col.value)]\r\n\t\t\t\t\t\t\t\t\t\tif (treeFormatData.findIndex((ele) => ele.name === groups[element][col.value]) < 0) {\r\n\t\t\t\t\t\t\t\t\t\t\ttreeFormatData.push({\r\n\t\t\t\t\t\t\t\t\t\t\t\tname: groups[element][col.value],\r\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: (groups[element].INVOICE_SPEND),\r\n\t\t\t\t\t\t\t\t\t\t\t\tclickable: _instance.isClickableTile(col.value, groups[element]),\r\n\t\t\t\t\t\t\t\t\t\t\t\tinvoiceSpend: (groups[element].INVOICE_SPEND), invoiceCount: (groups[element].INVOICE_COUNT),\r\n\t\t\t\t\t\t\t\t\t\t\t\tpoSpend: (groups[element].PO_SPEND), poCount: (groups[element].PO_COUNT),\r\n\t\t\t\t\t\t\t\t\t\t\t\tuniqueSupplier: (groups[element].UNIQUE_SUPPLIERS),\r\n\t\t\t\t\t\t\t\t\t\t\t\trank: _rank\r\n\t\t\t\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\t\t\t\tvar existingEntry = treeFormatData.filter((ele) => ele.name === groups[element][col.value]);\r\n\t\t\t\t\t\t\t\t\t\t\tvar updatedEntry = {\r\n\t\t\t\t\t\t\t\t\t\t\t\tname: groups[element][col.value],\r\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: Number(existingEntry[0].value) + Number(groups[element].INVOICE_SPEND),\r\n\t\t\t\t\t\t\t\t\t\t\t\tclickable: _instance.isClickableTile(col.value, groups[element]),\r\n\t\t\t\t\t\t\t\t\t\t\t\tinvoiceSpend: existingEntry[0].invoiceSpend + ((groups[element].INVOICE_SPEND)),\r\n\t\t\t\t\t\t\t\t\t\t\t\tinvoiceCount: existingEntry[0].invoiceCount + (groups[element].INVOICE_COUNT),\r\n\t\t\t\t\t\t\t\t\t\t\t\tpoSpend: existingEntry[0].poSpend + ((groups[element].PO_SPEND)),\r\n\t\t\t\t\t\t\t\t\t\t\t\tpoCount: existingEntry[0].poCount + ((groups[element].PO_COUNT)),\r\n\t\t\t\t\t\t\t\t\t\t\t\tuniqueSupplier: existingEntry[0].uniqueSupplier + ((groups[element].UNIQUE_SUPPLIERS)),\r\n\t\t\t\t\t\t\t\t\t\t\t\trank: _rank\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\tvar index = treeFormatData.findIndex((ele) => ele.name === groups[element][col.value])\r\n\t\t\t\t\t\t\t\t\t\t\ttreeFormatData[index] = updatedEntry;\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\tcase \"topRecords\":\r\n\t\t\t\t\t\tvar sortByColumn = this.state.defineScopeFilters.metricsType === 'Invoice Spend' ? 'invoiceSpend' :\r\n\t\t\t\t\t\t\tthis.state.defineScopeFilters.metricsType === 'Invoice Count' ? 'invoiceCount' :\r\n\t\t\t\t\t\t\t\tthis.state.defineScopeFilters.metricsType === 'PO Spend' ? 'poSpend' : 'poCount';\r\n\t\t\t\t\t\tvar sortedByInvoice = _.map(_.orderBy(treeFormatData, sortByColumn, ['desc']));\r\n\t\t\t\t\t\tif (sortedByInvoice.length > defineScopeFilters[filter]) {\r\n\t\t\t\t\t\t\ttopRecords = _.take(sortedByInvoice, defineScopeFilters[filter]);\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\ttopRecords = sortedByInvoice\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tvar invoiceSpend = 0;\r\n\t\t\t\t\t\tvar invoiceCount = 0;\r\n\t\t\t\t\t\tvar poSpend = 0;\r\n\t\t\t\t\t\tvar poCount = 0;\r\n\t\t\t\t\t\tvar uniqueSupplier = 0;\r\n\t\t\t\t\t\tsortedByInvoice.slice(defineScopeFilters[filter]).map((item) => {\r\n\t\t\t\t\t\t\tallotherInvoiceSpend = parseFloat(allotherInvoiceSpend) + parseFloat(item.value);\r\n\t\t\t\t\t\t\tinvoiceSpend = parseFloat(invoiceSpend) + parseFloat(item.invoiceSpend);\r\n\t\t\t\t\t\t\tinvoiceCount = parseFloat(invoiceCount) + parseFloat(item.invoiceCount);\r\n\t\t\t\t\t\t\tpoSpend = parseFloat(poSpend) + parseFloat(item.poSpend);\r\n\t\t\t\t\t\t\tpoCount = parseFloat(poCount) + parseFloat(item.poCount);\r\n\t\t\t\t\t\t\tuniqueSupplier = parseFloat(uniqueSupplier) + parseFloat(item.uniqueSupplier)\r\n\r\n\t\t\t\t\t\t})\r\n\r\n\t\t\t\t\t\tif (allotherInvoiceSpend != 0) {\r\n\t\t\t\t\t\t\tallotherInvoiceSpend = allotherInvoiceSpend < 0 ? (allotherInvoiceSpend * -1) : allotherInvoiceSpend;\r\n\t\t\t\t\t\t\ttopRecords.push({\r\n\t\t\t\t\t\t\t\tname: \"All other suppliers\",\r\n\t\t\t\t\t\t\t\tvalue: (allotherInvoiceSpend),\r\n\t\t\t\t\t\t\t\tclickable: true,\r\n\t\t\t\t\t\t\t\tinvoiceSpend: (invoiceSpend), invoiceCount: (invoiceCount),\r\n\t\t\t\t\t\t\t\tpoSpend: (poSpend),\r\n\t\t\t\t\t\t\t\tpoCount: (poCount),\r\n\t\t\t\t\t\t\t\tuniqueSupplier: (uniqueSupplier),\r\n\t\t\t\t\t\t\t\trank: (Number(defineScopeFilters[filter]) + 1)\r\n\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t}\r\n\r\n\t\t\t})\r\n\t\t\tif (topRecords.length > 0) {\r\n\t\t\t\tvar industrySupplierDetailsFilterData = { name: industryLeveldrpdwn, children: topRecords }\r\n\t\t\t\tthis.setState({ industrySupplierDetailsFilterData: industrySupplierDetailsFilterData });\r\n\t\t\t\tthis.calculateAggreateSpend(topRecords);\r\n\t\t\t\t//console.log(topRecords)\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis.setState({ industrySupplierDetailsFilterData: '' })\r\n\t\t\t\tthis.calculateAggreateSpend();\r\n\t\t\t}\r\n\t\t}\r\n\t\telse if (this._isMounted) {\r\n\t\t\tthis.setState({ industrySupplierDetailsFilterData: '' })\r\n\t\t\tthis.calculateAggreateSpend();\r\n\t\t}\r\n\t}\r\n\tgetRankColumnName(levelId) {\r\n\r\n\t\tvar columeName = \"\"\r\n\t\tswitch (levelId) {\r\n\t\t\tcase (\"L2_INDUSTRY_NAME\"):\r\n\t\t\t\tcolumeName = \"L2_RANK\"\r\n\t\t\t\tbreak;\r\n\t\t\tcase (\"L3_INDUSTRY_NAME\"):\r\n\t\t\t\tcolumeName = \"L3_RANK\"\r\n\t\t\t\tbreak;\r\n\t\t\tcase (\"L4_INDUSTRY_NAME\"):\r\n\t\t\t\tcolumeName = \"L4_RANK\"\r\n\t\t\t\tbreak;\r\n\t\t\tcase (\"L5_INDUSTRY_NAME\"):\r\n\t\t\t\tcolumeName = \"L5_RANK\"\r\n\t\t\t\tbreak;\r\n\t\t\tcase (\"L6_INDUSTRY_NAME\"):\r\n\t\t\t\tcolumeName = \"L6_RANK\"\r\n\t\t\t\tbreak;\r\n\t\t\tcase (\"L7_INDUSTRY_NAME\"):\r\n\t\t\t\tcolumeName = \"L7_RANK\"\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t\treturn columeName;\r\n\t}\r\n\r\n\r\n\tcalculateAggreateSpend(topRecords) {\r\n\t\tvar spendData = topRecords;\r\n\t\tvar calAggregatedAmount = {\r\n\t\t\tinvoice_spend: 0,\r\n\t\t\tinvoice_count: 0,\r\n\t\t\tpo_spend: 0,\r\n\t\t\tpo_count: 0,\r\n\t\t\tunique_supplier: 0\r\n\t\t}\r\n\r\n\t\tif (spendData !== undefined && this._isMounted) {\r\n\r\n\t\t\tObject.keys(spendData).map((element) => {\r\n\t\t\t\tif (element !== undefined) {\r\n\t\t\t\t\tcalAggregatedAmount.invoice_spend = parseFloat(calAggregatedAmount.invoice_spend) + parseFloat(spendData[element].invoiceSpend);\r\n\t\t\t\t\tcalAggregatedAmount.invoice_count = parseFloat(calAggregatedAmount.invoice_count) + parseFloat(spendData[element].invoiceCount);\r\n\t\t\t\t\tcalAggregatedAmount.po_spend = parseFloat(calAggregatedAmount.po_spend) + parseFloat(spendData[element].poSpend);\r\n\t\t\t\t\tcalAggregatedAmount.po_count = parseFloat(calAggregatedAmount.po_count) + parseFloat(spendData[element].poCount);\r\n\t\t\t\t\tcalAggregatedAmount.unique_supplier = parseFloat(calAggregatedAmount.unique_supplier) + parseFloat(spendData[element].uniqueSupplier);\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t\t\tcalAggregatedAmount.invoice_count = Math.round(calAggregatedAmount.invoice_count);\r\n\t\t\tcalAggregatedAmount.po_count = Math.round(calAggregatedAmount.po_count);\r\n\t\t}\r\n\t\telse {\r\n\t\t\tcalAggregatedAmount.invoice_spend = 0;\r\n\t\t\tcalAggregatedAmount.invoice_count = 0;\r\n\t\t\tcalAggregatedAmount.po_spend = 0;\r\n\t\t\tcalAggregatedAmount.po_count = 0;\r\n\t\t\tcalAggregatedAmount.unique_supplier = 0;\r\n\t\t}\r\n\r\n\t\tthis.setState({ aggregatedAmount: calAggregatedAmount }, this.checkDataExists);\r\n\r\n\t}\r\n\r\n\tcheckDataExists(){\r\n\t\tvar isDataExists = true;\r\n\t\tswitch(this.state.defineScopeFilters.metricsType){\r\n\t\t\tcase \"Invoice Spend\" :\r\n\t\t\t\t\tisDataExists = this.state.aggregatedAmount.invoice_spend == 0 ? false : true;\r\n\t\t\tbreak;\r\n\t\t\tcase \"Invoice Count\" :\r\n\t\t\t\t\tisDataExists = this.state.aggregatedAmount.invoice_count == 0 ? false : true;\r\n\t\t\tbreak;\r\n\t\t\tcase \"PO Spend\" :\r\n\t\t\t\t\tisDataExists = this.state.aggregatedAmount.po_spend == 0 ? false : true;\r\n\t\t\tbreak;\r\n\t\t\tcase \"PO Count\" :\r\n\t\t\t\t\tisDataExists = this.state.aggregatedAmount.po_count == 0 ? false : true;\r\n\t\t\tbreak;\r\n\t\t\tdefault:\r\n\t\t\t\t\tisDataExists = true;\r\n\t\t}\r\n\t\tthis.setState({ isDataExists : isDataExists})\r\n\t}\r\n\r\n\tonClick_TreeMap(param) {\r\n\t\tvar clickedIndustryDetails = this.state.clickedIndustryDetails\r\n\t\tclickedIndustryDetails.push(param)\r\n\t\tthis.setState({ clickedIndustryDetails: clickedIndustryDetails })\r\n\t\tif (param.data.name !== \"All other suppliers\" && this._isMounted) {\r\n\t\t\tthis.props.defineScopeLoading(true)\r\n\t\t\tlet data = {}\r\n\t\t\tlet defineScopeFilters = this.setFilter(param);\r\n\t\t\tdata = {\r\n\t\t\t\tINVOICE_COUNT: param.data.invoiceCount,\r\n\t\t\t\tINVOICE_SPEND: param.data.invoiceSpend,\r\n\t\t\t\tPO_COUNT: param.data.poCount,\r\n\t\t\t\tPO_SPEND: param.data.poSpend,\r\n\t\t\t\tUNIQUE_SUPPLIERS: param.data.uniqueSupplier,\r\n\t\t\t}\r\n\r\n\t\t\tdata[defineScopeFilters.industryLevel] = defineScopeFilters.industryName //industry name\r\n\r\n\t\t\tlet indSplits = defineScopeFilters.industryLevel.split('_');\r\n\t\t\tdata['INDUSTRY_LEVEL'] = indSplits[0].substr(1);\r\n\t\t\tlet industryId = indSplits[0] + '_' + indSplits[1] + '_' + 'ID';\r\n\t\t\tdata[industryId] = defineScopeFilters.GICS_ID;\r\n\r\n\t\t\tvar breadCrumbsArray_new = this.state.breadCrumbsArray\r\n\t\t\tbreadCrumbsArray_new.push({ industryName: param.data.name, industryLevel: param.parent.data.name, data: data, level: data.INDUSTRY_LEVEL })\r\n\t\t\tthis.setState({\r\n\t\t\t\tdefineScopeFilters: defineScopeFilters, breadCrumbsArray: breadCrumbsArray_new, levelDisabled: true\r\n\t\t\t}, () => {\r\n\t\t\t\tthis.getSummaryScopeSolution();\r\n\t\t\t\tthis.getSupplierScopeDetails();\r\n\t\t\t\tthis.filterAndGroupData(false);\r\n\t\t\t})\r\n\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.refs.modal.show()\r\n\t\t}\r\n\t}\r\n\r\n\tonDoubleClickTreeMap(param) {\r\n\t\tif (param.data.name !== \"All other suppliers\" && this._isMounted) {\r\n\t\t\tlet data = {}\r\n\t\t\tlet defineScopeFilters = this.setFilter(param);\r\n\t\t\tdata = {\r\n\t\t\t\tINVOICE_COUNT: param.data.invoiceCount,\r\n\t\t\t\tINVOICE_SPEND: param.data.invoiceSpend,\r\n\t\t\t\tPO_COUNT: param.data.poCount,\r\n\t\t\t\tPO_SPEND: param.data.poSpend,\r\n\t\t\t\tUNIQUE_SUPPLIERS: param.data.uniqueSupplier,\r\n\t\t\t}\r\n\r\n\t\t\tdata[defineScopeFilters.industryLevel] = defineScopeFilters.industryName //industry name\r\n\r\n\t\t\tlet indSplits = defineScopeFilters.industryLevel.split('_');\r\n\t\t\tdata['INDUSTRY_LEVEL'] = indSplits[0].substr(1);\r\n\t\t\tlet industryId = indSplits[0] + '_' + indSplits[1] + '_' + 'ID';\r\n\t\t\tdata[industryId] = defineScopeFilters.GICS_ID;\r\n\r\n\t\t\t// var breadCrumbsArray_new = this.state.breadCrumbsArray\r\n\t\t\t// breadCrumbsArray_new.push({ industryName: param.data.name, industryLevel: param.parent.data.name, data: data, level: data.INDUSTRY_LEVEL })\r\n\t\t\t// this.setState({\r\n\t\t\t// \tdefineScopeFilters: defineScopeFilters, breadCrumbsArray: breadCrumbsArray_new, levelDisabled: true\r\n\t\t\t// }, () => {\r\n\t\t\t// \tthis.getSummaryScopeSolution();\r\n\t\t\t// \tthis.getSupplierScopeDetails();\r\n\t\t\t// \tthis.filterAndGroupData(false);})\r\n\r\n\t\t\t//params[defineScopeFilters.industryName] = defineScopeFilters.GICS_ID;\r\n\t\t\tthis.showSupplierIndustriesModal(data, defineScopeFilters.industryName, data.INDUSTRY_LEVEL)\r\n\t\t\t//this.setState({openIndustryPopup: true})\r\n\t\t} else {\r\n\t\t\tthis.refs.modal.show()\r\n\t\t}\r\n\t}\r\n\r\n\tsetFilter(param) {\r\n\t\tvar defineScopeFilters = Object.assign({}, this.state.defineScopeFilters);\r\n\t\tdefineScopeFilters.industryName = param.data.name\r\n\t\tdefineScopeFilters.industryLevel = param.parent.data.name\r\n\r\n\t\t//pass GICS_ID to barchart and supplier grid to fecth data accordingly\r\n\t\tvar industryData = this.state.industrySupplierDetailsAllData.filter((item) => item[param.parent.data.name] === param.data.name);\r\n\r\n\t\tdefineScopeFilters.GICS_ID = defineScopeFilters.industryLevel === \"L2_INDUSTRY_NAME\" ? industryData[0].L2_INDUSTRY_ID\r\n\t\t\t: defineScopeFilters.industryLevel === \"L3_INDUSTRY_NAME\" ? industryData[0].L3_INDUSTRY_ID\r\n\t\t\t\t: defineScopeFilters.industryLevel === \"L4_INDUSTRY_NAME\" ? industryData[0].L4_INDUSTRY_ID\r\n\t\t\t\t\t: defineScopeFilters.industryLevel === \"L5_INDUSTRY_NAME\" ? industryData[0].L5_INDUSTRY_ID\r\n\t\t\t\t\t\t: defineScopeFilters.industryLevel === \"L6_INDUSTRY_NAME\" ? industryData[0].L6_INDUSTRY_ID : industryData[0].L7_INDUSTRY_ID\r\n\r\n\t\treturn defineScopeFilters;\r\n\t}\r\n\r\n\thandlelangChange(value) {\r\n\t\tthis.setState({ selectedRequestId: value.label })\r\n\t}\r\n\r\n\thandleScopeCheckChanged(scope) {\r\n\t\tvar id = scope.target.id;\r\n\t\tif (this.state.selectedScopes.indexOf(id) === -1) {\r\n\t\t\tthis.setState(state => ({\r\n\t\t\t\tselectedScopes: [...state.selectedScopes, id]\r\n\t\t\t}));\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.setState({\r\n\t\t\t\tselectedScopes: this.state.selectedScopes.filter((item) => item !== id)\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n\r\n\ttriggerAllMethod = (isTopRequest, callHana) => {\r\n\t\tif (this._isMounted) {\r\n\r\n\t\t\tif (callHana) {\r\n\t\t\t\tthis.getIndustrySupplierDetails(isTopRequest);\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis.filterAndGroupData(isTopRequest)\r\n\t\t\t}\r\n\t\t\tthis.getSummaryScopeSolution();\r\n\t\t\tthis.getSupplierScopeDetails();\r\n\t\t}\r\n\t};\r\n\r\n\r\n\tgetSummaryScopeSolution() {\r\n\t\tvar defineScope_obj = this.state.defineScope;\r\n\t\tdefineScope_obj.User_Email = this.props.spendDetails !== undefined &&\r\n\t\t\tthis.props.spendDetails.currentActiveRequest !== undefined ? (\r\n\t\t\t\tthis.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ?\r\n\t\t\t\t\tthis.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester) : '';\r\n\r\n\t\tdefineScope_obj.Country = this.state.countryFilter;\r\n\t\tdefineScope_obj.Solution = this.state.solutionFilter;\r\n\t\tdefineScope_obj.outSolution = this.state.outSolutionFilter;\r\n\t\tdefineScope_obj.SolutionConfirmation = this.state.defineScopeFilters.solutionConfirmation === '' ? defineScope_obj.SolutionConfirmation : this.state.defineScopeFilters.solutionConfirmation;\r\n\t\tdefineScope_obj.GICS_ID = this.state.defineScopeFilters.GICS_ID === '' ? defineScope_obj.GICS_ID : this.state.defineScopeFilters.GICS_ID;\r\n\t\tdefineScope_obj.DirectSpend = this.state.defineScopeFilters.directSpend === '' ? defineScope_obj.DirectSpend : this.state.defineScopeFilters.directSpend;\r\n\t\tdefineScope_obj.Goods = this.state.defineScopeFilters.goods === '' ? defineScope_obj.Goods : this.state.defineScopeFilters.goods;\r\n\t\tdefineScope_obj.Business_Unit = this.state.businessUnitFilter;\r\n\t\tdefineScope_obj.Buyer_Region = this.state.buyerRegionFilter;\r\n\t\tdefineScope_obj.MetricsType = this.state.defineScopeFilters.metricsType === '' ? defineScope_obj.MetricsType : this.state.defineScopeFilters.metricsType;\r\n\t\tdefineScope_obj.AribaNetwork = this.state.defineScopeFilters.aribaNetwork === '' ? defineScope_obj.AribaNetwork : this.state.defineScopeFilters.aribaNetwork;\r\n\t\tdefineScope_obj.SAPAribaBuyProcess = this.state.defineScopeFilters.sapAribaBuyProcess === '' ? defineScope_obj.SAPAribaBuyProcess : this.state.defineScopeFilters.sapAribaBuyProcess;\r\n\r\n\t\tthis.props.getSummaryScopeSolution(defineScope_obj)\r\n\t\t\t.then((response) => {\r\n\t\t\t\t//this.props.defineScopeSuccess('')\r\n\t\t\t\t//var isValidData = false;\r\n\t\t\t\tif (response.data.Result != undefined && this._isMounted) {\r\n\t\t\t\t\t// for (var i = 0; i < response.data.Result.length; i++) {\r\n\t\t\t\t\t// \tif (response.data.Result[i]['IN_SCOPE_SPEND'] === null && response.data.Result[i]['OUT_SCOPE_SPEND'] === null) {\r\n\t\t\t\t\t// \t\tisValidData = false;\r\n\t\t\t\t\t// \t} else {\r\n\t\t\t\t\t// \t\tisValidData = true;\r\n\t\t\t\t\t// \t}\r\n\t\t\t\t\t// }\r\n\r\n\t\t\t\t\tlet data = response.data.Result;\r\n\r\n\t\t\t\t\tvar array = [];\r\n\t\t\t\t\tdata.forEach((element) => {\r\n\t\t\t\t\t\tif (element.IN_SCOPE_SPEND == null && element.OUT_SCOPE_SPEND == null) {\r\n\t\t\t\t\t\t\tarray = [];\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\tvar obj = {};\r\n\t\t\t\t\t\t\tobj.IN_SCOPE_SPEND = element.IN_SCOPE_SPEND;\r\n\t\t\t\t\t\t\tobj.OUT_SCOPE_SPEND = element.OUT_SCOPE_SPEND;\r\n\t\t\t\t\t\t\tobj.SOLUTION_TYPE = element.SOLUTION_TYPE;\r\n\t\t\t\t\t\t\tobj[\"InScopeValue\"] = element.IN_SCOPE_SPEND;\r\n\t\t\t\t\t\t\tobj[\"OutScopeValue\"] = element.OUT_SCOPE_SPEND;\r\n\t\t\t\t\t\t\tarray.push(obj);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t});\r\n\r\n\t\t\t\t\tthis.setState({ summaryScopeData: array });// (isValidData === false ? null : response.data.Result) });\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\tthis.props.defineScopeFailure('API service is down. Please contact administrator.')\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.props.defineScopeFailure(this.props.content.error)\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t}\r\n\r\n\r\n\tgetSupplierScopeDetails() {\r\n\t\tvar defineScope_obj = this.state.defineScope;\r\n\t\tdefineScope_obj.User_Email = this.props.spendDetails !== undefined &&\r\n\t\t\tthis.props.spendDetails.currentActiveRequest !== undefined ? (\r\n\t\t\t\tthis.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ?\r\n\t\t\t\t\tthis.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester) : '';\r\n\r\n\t\t// \tthis.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ?\r\n\t\t// this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester;\r\n\t\tdefineScope_obj.Country = this.state.countryFilter;\r\n\t\tdefineScope_obj.Solution = this.state.solutionFilter;\r\n\t\tdefineScope_obj.outSolution = this.state.outSolutionFilter;\r\n\t\tdefineScope_obj.SolutionConfirmation = this.state.defineScopeFilters.solutionConfirmation === '' ? defineScope_obj.SolutionConfirmation : this.state.defineScopeFilters.solutionConfirmation;\r\n\t\tdefineScope_obj.GICS_ID = this.state.defineScopeFilters.GICS_ID === '' ? defineScope_obj.GICS_ID : this.state.defineScopeFilters.GICS_ID;\r\n\t\tdefineScope_obj.DirectSpend = this.state.defineScopeFilters.directSpend === '' ? defineScope_obj.DirectSpend : this.state.defineScopeFilters.directSpend;\r\n\t\tdefineScope_obj.Goods = this.state.defineScopeFilters.goods === '' ? defineScope_obj.Goods : this.state.defineScopeFilters.goods;\r\n\t\tdefineScope_obj.Business_Unit = this.state.businessUnitFilter;\r\n\t\tdefineScope_obj.Buyer_Region = this.state.buyerRegionFilter;\r\n\t\tdefineScope_obj.MetricsType = this.state.defineScopeFilters.metricsType === '' ? defineScope_obj.MetricsType : this.state.defineScopeFilters.metricsType;\r\n\t\tdefineScope_obj.AribaNetwork = this.state.defineScopeFilters.aribaNetwork === '' ? defineScope_obj.AribaNetwork : this.state.defineScopeFilters.aribaNetwork;\r\n\t\tdefineScope_obj.SAPAribaBuyProcess = this.state.defineScopeFilters.sapAribaBuyProcess === '' ? defineScope_obj.SAPAribaBuyProcess : this.state.defineScopeFilters.sapAribaBuyProcess;\r\n\r\n\t\tthis.props.getSupplierScopeDetails(defineScope_obj)\r\n\t\t\t.then((response) => {\r\n\r\n\t\t\t\tif (response !== undefined && response.status === 200 && response.data.Result !== undefined) {\r\n\t\t\t\t\tsetTimeout(() => { this.props.defineScopeSuccess('') }, 2000)\r\n\r\n\t\t\t\t\tthis.setState({ supplierData: response.data.Result });\r\n\t\t\t\t}\r\n\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n\t\t\t\t\tthis.props.defineScopeFailure('API service is down. Please contact administrator.')\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.props.defineScopeFailure(this.props.content.error)\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t}\r\n\r\n\tisClickableTile(colvalue, data) {\r\n\t\tif (colvalue === \"L2_INDUSTRY_NAME\") {\r\n\t\t\treturn data[\"L3_INDUSTRY_NAME\"] !== null ? true : false\r\n\t\t}\r\n\t\tif (colvalue === \"L3_INDUSTRY_NAME\") {\r\n\t\t\treturn data[\"L4_INDUSTRY_NAME\"] !== null ? true : false\r\n\t\t}\r\n\t\tif (colvalue === \"L4_INDUSTRY_NAME\") {\r\n\t\t\treturn data[\"L5_INDUSTRY_NAME\"] !== null ? true : false\r\n\t\t}\r\n\t\tif (colvalue === \"L5_INDUSTRY_NAME\") {\r\n\t\t\treturn data[\"L6_INDUSTRY_NAME\"] !== null ? true : false\r\n\t\t}\r\n\t\tif (colvalue === \"L6_INDUSTRY_NAME\") {\r\n\t\t\treturn data[\"L7_INDUSTRY_NAME\"] !== null ? true : false\r\n\t\t}\r\n\t\tif (colvalue !== \"L7_INDUSTRY_NAME\") {\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\r\n\t}\r\n\tshowModal() {\r\n\t\tthis.refs.modal.show()\r\n\t}\r\n\r\n\thideModal() {\r\n\t\tthis.refs.modal.hide()\r\n\t}\r\n\r\n\tshowAlertModal(action) {\r\n\t\tthis.refs[action].show()\r\n\t}\r\n\r\n\thideAlertModal(action) {\r\n\t\tthis.refs[action].hide()\r\n\t\t//this.setState({ open: true })\r\n\t}\r\n\r\n\tcontinueNavigation(action) {\r\n\t\tthis.refs[action].hide()\r\n\t\tthis.props.trackSupplierDrillDownChanges(false)\r\n\t\tthis.props.trackIndustryDrillScopeChanges(false)\r\n\t\tif (this.props.spendDetails.supplierDrilldownSavedChanges === true) {\r\n\t\t\tthis.props.trackSupplierDrillDownSave(false)\r\n\t\t\tthis.setState({ open: false, openIndustryPopup: false })\r\n\t\t\tthis._isMounted = true;\r\n\t\t\tthis.loadData()\r\n\t\t\twindow.scrollTo(0, 0);\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.setState({ open: false, openIndustryPopup: false })\r\n\t\t}\r\n\t}\r\n\r\n\tshowSupplierDrilldownModal(SKEY, capIQId, parentCapIQId) {\r\n\t\tvar supplierDetails = { SKEY: SKEY, capIQId: capIQId, parentCapIQId: parentCapIQId }\r\n\t\tthis.props.storeSupplierSKEY(supplierDetails)\r\n\t\tthis.setState({\r\n\t\t\topen: true\r\n\t\t})\r\n\t}\r\n\r\n\tshowSupplierIndustriesModal(data, industry, level) {\r\n\t\tlet key = 'L' + level + '_' + 'INDUSTRY_ID'\r\n\t\tlet SKEY = data[key]\r\n\t\tdata['name'] = industry;\r\n\t\tvar industryGICS_Details = { SKEY: SKEY, industry: industry, level: level, industryData: { params: data, filters: this.state.defineScopeFilters } }\r\n\t\tthis.props.storeIndustryGICS_ID(industryGICS_Details)\r\n\r\n\t\t//var supplierDetails = { SKEY: SKEY, capIQId: capIQId, parentCapIQId: parentCapIQId, industryData: data }\r\n\t\t//this.props.storeSupplierSKEY(supplierDetails)\r\n\t\tthis.setState({\r\n\t\t\topenIndustryPopup: true\r\n\t\t})\r\n\t}\r\n\r\n\tsetVisibility(isVisible) {\r\n\t\tif (this.props.supplierDrilldownPendingChanges !== undefined && this.props.supplierDrilldownPendingChanges !== null\r\n\t\t\t&& this.props.supplierDrilldownPendingChanges === true) {\r\n\t\t\tthis.showAlertModal(\"alert\")\r\n\t\t} else if (this.props.industryDrillScopePendingChanges !== undefined && this.props.industryDrillScopePendingChanges !== null\r\n\t\t\t&& this.props.industryDrillScopePendingChanges === true) {\r\n\t\t\tthis.showAlertModal(\"alert\")\r\n\t\t}\r\n\t\telse {\r\n\t\t\tif (this.props.spendDetails.supplierDrilldownSavedChanges === true) {\r\n\t\t\t\tthis.props.trackSupplierDrillDownSave(false)\r\n\t\t\t\tthis.setState({ open: false, openIndustryPopup: false })\r\n\t\t\t\tthis._isMounted = true;\r\n\t\t\t\tif (this.state.breadCrumbsArray.length > 0) {\r\n\t\t\t\t\tthis.removeIndustryFilter(this.state.clickedIndustryDetails[this.state.breadCrumbsArray.length - 1].data.name, this.state.breadCrumbsArray.length - 1, true)\r\n\t\t\t\t\tthis.onClick_TreeMap(this.state.clickedIndustryDetails[this.state.breadCrumbsArray.length])\r\n\t\t\t\t\tthis.state.clickedIndustryDetails.splice(this.state.clickedIndustryDetails.length - 1, 1)\r\n\t\t\t\t\tvar finalBreadcrumbs = this.state.clickedIndustryDetails\r\n\t\t\t\t\tthis.setState({ clickedIndustryDetails: finalBreadcrumbs })\r\n\t\t\t\t\tObject.assign(this.state, { clickedIndustryDetails: finalBreadcrumbs })\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.loadData()\r\n\t\t\t\t}\r\n\t\t\t\twindow.scrollTo(0, 0);\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis.setState({ open: false, openIndustryPopup: false })\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\toutsidePopupClick() {\r\n\t\tthis.props.trackSupplierDrillDownChanges(false)\r\n\t\tthis.props.trackIndustryDrillScopeChanges(false)\r\n\t\tthis.setState({ open: false, openIndustryPopup: false })\r\n\t}\r\n\r\n\thideToolTip() {\r\n\t\td3.select('#tooltipdiv').remove();\r\n\t}\r\n\r\n\trender() {\r\n\t\tvar enableOnClick = this.state.industryLeveldrpdwn !== \"L7_INDUSTRY_NAME\"\r\n\t\tvar breadCrumbsArray = this.state.breadCrumbsArray;\r\n\t\tvar index = -1;\r\n\t\treturn (\r\n\t\t\t
\r\n\t\t\t\t this.callback()}\r\n\t\t\t\t\tmodalStyle={suggestedValueModalStyle}\r\n\t\t\t\t\tcontentStyle={suggestedValueContentStyle}>\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t{this.props.content.allOtherMessage}\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t this.refs.modal.hide()}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t{this.props.spendDetails.supplierDetails !== undefined ?\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t this.callback()}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{this.props.tabMessage}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t this.continueNavigation(\"alert\")}\r\n\t\t\t\t\t\t\t\t\t\tcolor /> \r\n\t\t\t\t\t\t\t\t\t this.hideAlertModal(\"alert\")}\r\n\t\t\t\t\t\t\t\t\t\tcolor /> \r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t{(this.props.content.title)}{
\r\n\t\t\t\t\t\t{this.props.content.subTitle}
\r\n\t\t\t\t\t\t{this.props.content.summaryOfIndustryView}
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t{this.props.content.uniqueSuppliers + \":\"}
\r\n\t\t\t\t\t\t\t\t\t\t {formatThousands(this.state.aggregatedAmount.unique_supplier)}
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t{this.props.content.invoiceSpend + \":\"}
\r\n\t\t\t\t\t\t\t\t\t\t {this.state.currencySymbol}{convertToMillion(this.state.aggregatedAmount.invoice_spend, true)}
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t{this.props.content.poSpend + \":\"}
\r\n\t\t\t\t\t\t\t\t\t\t {this.state.currencySymbol}{convertToMillion(this.state.aggregatedAmount.po_spend, true)}
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t{this.props.content.invoiceCount + \":\"}
\r\n\t\t\t\t\t\t\t\t\t\t{formatThousands(this.state.aggregatedAmount.invoice_count)}
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t{this.props.content.poCount + \":\"}
\r\n\t\t\t\t\t\t\t\t\t\t{formatThousands(this.state.aggregatedAmount.po_count)}
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{this.state.isFilterChanges===true ?{this.props.content.pendingChanges}:''}\r\n\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{/*
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t option.label == this.state.defineScopeFilters.topRecords\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\tonChange={value => this.handleTopCountChange(value)}\r\n\t\t\t\t\t\t\t\t\toptions={this.state.topCount}\r\n\t\t\t\t\t\t\t\t\tisSearchable={false} isDisabled={this.props.spendDetails.isLoading}\r\n\t\t\t\t\t\t\t\t\tnoOptionsMessage={() => null}\r\n\t\t\t\t\t\t\t\t/>\r\n\r\n\r\n\t\t\t\t\t\t\t
*/}\r\n\t\t\t\t\t\t\t{this.props.content.top}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t option.value === this.state.industryLeveldrpdwn\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\tonChange={value => this.handleIndustryLevelChange(value)}\r\n\t\t\t\t\t\t\t\t\toptions={this.state.industryLevelList}\r\n\t\t\t\t\t\t\t\t\tisSearchable={false} isDisabled={this.props.spendDetails.isLoading || this.state.levelDisabled}\r\n\t\t\t\t\t\t\t\t\tnoOptionsMessage={() => null} />\r\n\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t{this.props.content.industryLevel}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t option.value === this.state.defineScopeFilters.metricsType\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\tonChange={value => this.handleMetricsChange(value)}\r\n\t\t\t\t\t\t\t\t\toptions={this.state.metricsOptions}\r\n\t\t\t\t\t\t\t\t\tisDisabled={this.props.spendDetails.isLoading}\r\n\t\t\t\t\t\t\t\t\tisSearchable={false}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t{this.props.content.metricsType}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t option.value === this.state.defineScopeFilters.solution\r\n\t\t\t\t\t\t\t\t\t// )}\r\n\t\t\t\t\t\t\t\t\tvalue={this.state.defineScopeFilters.solution}\r\n\t\t\t\t\t\t\t\t\tonChange={value => this.handleSolutionChange(value)}\r\n\t\t\t\t\t\t\t\t\toptions={this.state.allSolutions}\r\n\t\t\t\t\t\t\t\t\tisSearchable={false}\r\n\t\t\t\t\t\t\t\t\tnoOptionsMessage={() => null}\r\n\t\t\t\t\t\t\t\t\tdisabled={this.props.spendDetails.isLoading}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t{this.props.content.solutionLbl}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t option.value === this.state.defineScopeFilters.solution\r\n\t\t\t\t\t\t\t\t\t// )}\r\n\t\t\t\t\t\t\t\t\tvalue={this.state.defineScopeFilters.outSolution}\r\n\t\t\t\t\t\t\t\t\tonChange={value => this.handleOutSolutionChange(value)}\r\n\t\t\t\t\t\t\t\t\toptions={this.state.allSolutionsOut}\r\n\t\t\t\t\t\t\t\t\tisSearchable={false}\r\n\t\t\t\t\t\t\t\t\tnoOptionsMessage={() => null}\r\n\t\t\t\t\t\t\t\t\tdisabled={this.props.spendDetails.isLoading}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t{this.props.content.solutionOutLbl}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t option.value === this.state.defineScopeFilters.aribaNetwork\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\tonChange={value => this.handleAribaNetworkChange(value)}\r\n\t\t\t\t\t\t\t\t\toptions={this.state.aribaNetworkOptions}\r\n\t\t\t\t\t\t\t\t\tisDisabled={this.props.spendDetails.isLoading}\r\n\t\t\t\t\t\t\t\t\tisSearchable={false}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t{this.props.content.matchFilter}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t option.value === this.state.defineScopeFilters.sapAribaBuyProcess\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\tonChange={value => this.handleSAPAribaBuyProcessChange(value)}\r\n\t\t\t\t\t\t\t\t\toptions={this.state.sapAribaBuyProcessOptions}\r\n\t\t\t\t\t\t\t\t\tisDisabled={this.props.spendDetails.isLoading}\r\n\t\t\t\t\t\t\t\t\tisSearchable={false}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t{this.props.content.sapAribaBuyProcess}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t null}\r\n\t\t\t\t\t\t\t\t\tplaceholder={\"All countries\"}\r\n\t\t\t\t\t\t\t\t\t// value={this.state.allCountries.filter(\r\n\t\t\t\t\t\t\t\t\t// \toption => option.label === this.state.defineScopeFilters.country\r\n\t\t\t\t\t\t\t\t\t// )}\r\n\t\t\t\t\t\t\t\t\tvalue={this.state.defineScopeFilters.country}\r\n\t\t\t\t\t\t\t\t\tonChange={value => this.handleCountryChange(value)}\r\n\t\t\t\t\t\t\t\t\toptions={this.state.allCountries}\r\n\t\t\t\t\t\t\t\t\tdisabled={this.props.spendDetails.isLoading}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t{/* {this.props.content.countrylbl}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{!this.state.showFlag ? + : -}\r\n\r\n\t\t\t\t\t\t\t
*/}\r\n\t\t\t\t\t\t\t{/* {this.state.showFlag ? */}\r\n\r\n\t\t\t\t\t\t\t
: null} */}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t option.value === this.state.defineScopeFilters.buyerRegion\r\n\t\t\t\t\t\t\t\t\t// )}\r\n\t\t\t\t\t\t\t\t\tvalue={this.state.defineScopeFilters.buyerRegion}\r\n\t\t\t\t\t\t\t\t\tonChange={value => this.handleBuyerChange(value)}\r\n\t\t\t\t\t\t\t\t\toptions={this.state.allBuyerRegion}\r\n\t\t\t\t\t\t\t\t\tdisabled={this.props.spendDetails.isLoading}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t{this.props.content.buyerLbl}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t option.value === this.state.defineScopeFilters.businessUnit\r\n\t\t\t\t\t\t\t\t\t// )}\r\n\t\t\t\t\t\t\t\t\tvalue={this.state.defineScopeFilters.businessUnit}\r\n\t\t\t\t\t\t\t\t\tonChange={value => this.handleBusinessChange(value)}\r\n\t\t\t\t\t\t\t\t\toptions={this.state.allBusinessUnit}\r\n\t\t\t\t\t\t\t\t\tdisabled={this.props.spendDetails.isLoading}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t{this.props.content.businessLbl}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t option.value === this.state.defineScopeFilters.directSpend\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\tonChange={value => this.handleDirectSpendChange(value)}\r\n\t\t\t\t\t\t\t\t\toptions={this.state.directSpendOptions}\r\n\t\t\t\t\t\t\t\t\tisDisabled={this.props.spendDetails.isLoading}\r\n\t\t\t\t\t\t\t\t\tisSearchable={false}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t{this.props.content.directSpendLbl}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t option.value === this.state.defineScopeFilters.goods\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\tonChange={value => this.handleGoodsChange(value)}\r\n\t\t\t\t\t\t\t\t\toptions={this.state.goodsOptions}\r\n\t\t\t\t\t\t\t\t\tisDisabled={this.props.spendDetails.isLoading}\r\n\t\t\t\t\t\t\t\t\tisSearchable={false}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t{this.props.content.goodsLbl}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t option.value === this.state.defineScopeFilters.solutionConfirmation\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\tonChange={value => this.handleSolutionConfirmationChange(value)}\r\n\t\t\t\t\t\t\t\t\toptions={this.state.optionSolutionConfirmation}\r\n\t\t\t\t\t\t\t\t\tisDisabled={this.props.spendDetails.isLoading}\r\n\t\t\t\t\t\t\t\t\tisSearchable={false}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t{/* {this.props.content.confirmedLbl}
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t this.clickedResetFilter(e)}\r\n\t\t\t\t\t\t\t\t\tcolor />\r\n\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t this.onClick_TreeMap(e)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tonDoubleClick={e => this.onDoubleClickTreeMap(e)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tenableOnClick={enableOnClick}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tcurrencySymbols={this.state.currencySymbol}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tsortBy={\"rank\"}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\ttotalInvoicSpend={this.state.aggregatedAmount.invoice_spend}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\ttotalValues={this.state.aggregatedAmount}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedMetrics={this.state.defineScopeFilters.metricsType}\r\n\t\t\t\t\t\t\t\t\t\t\t\t/>\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t{this.props.content.supplierIndustries}
\r\n\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\tthis.state.industrySupplierDetailsFilterData !== '' && this.state.isDataExists ?\r\n\t\t\t\t\t\t\t\t\t\t(\r\n\t\t\t\t\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tObject.values(breadCrumbsArray).map((item) => {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex = index + 1\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t< div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t this.removeIndustryFilter(item.industryName, index, false)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>{item.industryName}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{this.props.content.footNote}
\r\n\t\t\t\t\t\t\t\t\t\t) :\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{this.hideToolTip()}\r\n\t\t\t\t\t\t\t\t\t\t\t{this.props.content.noDataFound}
\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{this.props.content.scopeSummary}\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t{this.state.summaryScopeData !== (null && '' && undefined) && this.state.summaryScopeData.length > 0 && this.state.isDataExists ?\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\t:
\r\n\t\t\t\t\t\t\t\t{this.state.summaryScopeData !== '' && this.state.summaryScopeData !== null ?\r\n\t\t\t\t\t\t\t\t\t{this.props.content.noDataFound}
\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t: null}\r\n\t\t\t\t\t\t\t {this.props.content.inScopeSpend}
\r\n\t\t\t\t\t\t\t\t\t\t {this.props.content.outScopeSpend}
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{this.props.content.topSupplier}\r\n\r\n\t\t\t\t\t\t\t\t\t\t this.showSupplierIndustriesModal(this.state.breadCrumbsArray[this.state.breadCrumbsArray.length - 1].data, this.state.breadCrumbsArray[this.state.breadCrumbsArray.length - 1].industryName, this.state.breadCrumbsArray[this.state.breadCrumbsArray.length - 1].level)}>\r\n\t\t\t\t\t\t\t\t\t\t\t{this.state.breadCrumbsArray.length > 0 && this.state.breadCrumbsArray[this.state.breadCrumbsArray.length - 1].industryName !== \"\" ? \" (\" + this.state.breadCrumbsArray[this.state.breadCrumbsArray.length - 1].industryName + \")\" : null}\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{this.state.supplierData !== undefined && this.state.supplierData !== null ?\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t\t{this.props.content.noDataFound}
}\r\n\t\t\t\t\t\t\t\t\tLoading...
\r\n }\r\n else {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content,\r\n search: state.searchResultData\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n searchResult: (result) => dispatch(searchResult(result)),\r\n searchText: (text) => dispatch(searchText(text)),\r\n searchData: (data) => dispatch(searchData(data)),\r\n fetchCrmResults: (value) => dispatch(fetchCrmResults(value)),\r\n crmSearchLoading: (bool) => dispatch(crmSearchLoading(bool)),\r\n crmSearchSuccess: (msg) => dispatch(crmSearchSuccess(msg)),\r\n crmSearchFailure: (error) => dispatch(crmSearchFailure(error)),\r\n fetchCapIqSearchResults: (value, type) => dispatch(fetchCapIqSearchResults(value, type)),\r\n capIqSearchSuccess: (msg) => dispatch(capIqSearchSuccess(msg)),\r\n capIqSearchFailure: (error) => dispatch(capIqSearchFailure(error))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SearchBar)\r\n\r\n","import React from 'react' \r\nexport const dropdownValues = [\"Yes\", \"No\"];\r\nexport const directSpendDropdown = [\"\", \"Yes\", \"No\"];\r\nexport const scopeValues = [\"Industry\", \"Override\"];\r\nexport const goodsValues = [\"Goods\", \"Services\", \"Both\", \"Neither\", \"Unclassified\"]\r\nexport const requesitionValues = [\"Catalog\", \"Adhoc (non-catalog)\", \"N/A\"]\r\nexport const aribaBuyProcessValues = ['Requisition: Catalog, Spot-Buy or Release Contract',\r\n 'Requisition: Non-Catalog or Tactical Sourcing',\r\n 'Requisition: External Talent',\r\n 'Consultancy/SOW Services: Active Mgmt, otherwise Invoice Against Contract',\r\n 'Other Services: Active Mgmt, otherwise Invoice Against Contract',\r\n 'Invoice Against Contract',\r\n 'Direct/MRO: Plan Driven PO',\r\n 'Direct/MRO: Asset Plan via Catalog',\r\n 'Non-PO Invoice',\r\n 'Travel and Expense']\r\nexport const workingCaptialSegmentationValues = ['Eligible Terms Rationalization',\r\n 'Eligible Terms Rationalization - Consulting',\r\n 'Eligible Terms Rationalization - Legal',\r\n 'Eligible Terms Rationalization - Marketing',\r\n 'Eligible Terms Rationalization - Unclassified',\r\n 'Eligible Discount',\r\n 'Eligible Discount - Consulting',\r\n 'Eligible Discount - Legal',\r\n 'Eligible Discount - Marketing',\r\n 'Eligible Discount - Unclassified',\r\n 'InEligible',\r\n 'InEligible - Associations',\r\n 'InEligible - Banking',\r\n 'InEligible - Corporate Cards',\r\n 'InEligible - Employee Payment',\r\n 'InEligible - Government',\r\n 'InEligible - HR/Benefit/Employee',\r\n 'InEligible - Insurance',\r\n 'InEligible - Real Estate',\r\n 'InEligible - Utilities',\r\n 'Negative / No Spend',\r\n 'Already Discounting',\r\n 'Duplicate Record',\r\n 'Intercompany Spend',\r\n 'Low DPO/Net Terms: <25']\r\nexport const VendorLinkFormatter = (value) => {\r\n const vendorName = value.row['VENDOR_NAME']\r\n const capIQCompanyId = value.row['CAPIQ_COMPANY_ID']\r\n if (value.row.isCapIQLicesend && capIQCompanyId !== \"\" && capIQCompanyId !== undefined) {\r\n const val = \"https://www.capitaliq.com/ciqdotnet/company.aspx?leftlink=true&companyId=\" + capIQCompanyId;\r\n return ()\r\n } else {\r\n return ({this.props.content.search.searchBarLabel}
\r\n\r\n \r\n
\r\n {this.props.search.error}
\r\n {vendorName}
)\r\n }\r\n }\r\n\r\nexport const IndustryLinkFormatter = (value) => {\r\n const finalIndustryDesc = value.row['FINAL_INDUSTRY_DESCRIPTION']\r\n const finalIndustryId = value.row['FINAL_INDUSTRY_ID']\r\n if (value.row.isCapIQLicesend && finalIndustryId !== \"\" && finalIndustryId >= 1000000) {\r\n const val = \"https://www.capitaliq.com/CIQDotNet/Lists/Constituents.aspx?subTypeId=\" + finalIndustryId;\r\n return ()\r\n } else {\r\n return ({finalIndustryDesc}
)\r\n }\r\n }\r\n\r\nexport const discountingVals = ['Eligible Discount', 'Eligible Discount - Consulting', 'Eligible Discount - Legal', 'Eligible Discount - Marketing',\r\n 'Eligible Discount - Unclassified', 'Duplicate Record', 'Already Discounting', 'Intercompany Spend', 'Low DPO/Net Terms: <25']\r\nexport const termRationalizationVals = ['Eligible Terms Rationalization', 'Eligible Terms Rationalization - Consulting', 'Eligible Terms Rationalization - Legal',\r\n 'Eligible Terms Rationalization - Marketing', 'Eligible Terms Rationalization - Unclassified', 'Duplicate Record', \r\n 'Already Discounting', 'Intercompany Spend', 'Low DPO/Net Terms: <25']\r\n ","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport Button from 'UI/Button'\r\nimport { getSupplierComments } from 'actions/spendActions'\r\nimport moment from 'moment'\r\n\r\nclass UserCommentsPopUp extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n characterCount: 150,\r\n isUserCommentTextboxClicked: 'No',\r\n warningMessage: '',\r\n remaingHistoricalCommentsLength: 150,\r\n historicalSupplierComments: ''\r\n }\r\n this.loadData = this.loadData.bind(this)\r\n this.addUserComments = this.addUserComments.bind(this)\r\n this.clearUserComments = this.clearUserComments.bind(this)\r\n this.onChange = this.onChange.bind(this)\r\n this.onBlur = this.onBlur.bind(this)\r\n this.onFocus = this.onFocus.bind(this)\r\n }\r\n\r\n loadData() {\r\n this.props.getSupplierComments(this.props.DMC_ID, this.props.VS_ID, this.props.SKEY, this.props.user.user.Email)\r\n .then((response) => {\r\n if (response.data.StatusCode === 200) {\r\n if (response.data.Result.length > 0) {\r\n var historicalCommentsLength = response.data.Result[0]['USER_COMMENT'].length\r\n var totalHistoricalComments = []\r\n totalHistoricalComments = response.data.Result[0]['USER_COMMENT'].split('\\r\\n')\r\n //Prefix Text for each new comment is -----> mm/dd/yyyy - email: @@@@ your comment @@@@\r\n var prefixTextlength = 15 + this.props.user.user.Email.length + totalHistoricalComments.length\r\n var historicalCommentsLengthWithPrefix = historicalCommentsLength + prefixTextlength\r\n if (2000 - historicalCommentsLengthWithPrefix > 0) {\r\n this.setState({\r\n historicalSupplierComments: response.data.Result[0]['USER_COMMENT'],\r\n remaingHistoricalCommentsLength: 2000 - historicalCommentsLengthWithPrefix\r\n })\r\n }\r\n else {\r\n this.setState({\r\n historicalSupplierComments: response.data.Result[0]['USER_COMMENT'],\r\n remaingHistoricalCommentsLength: 0\r\n })\r\n }\r\n }\r\n }\r\n })\r\n }\r\n\r\n onChange(e) {\r\n if (this.state.remaingHistoricalCommentsLength < 150) {\r\n if (this.state.remaingHistoricalCommentsLength > 0)\r\n document.getElementById(\"userComments\").maxLength = this.state.remaingHistoricalCommentsLength\r\n else\r\n document.getElementById(\"userComments\").maxLength = 0\r\n\r\n this.setState({\r\n warningMessage: this.props.supplierComments.historicalCharactersLeft,\r\n characterCount: this.state.remaingHistoricalCommentsLength - e.currentTarget.value.length, isUserCommentTextboxClicked: 'Yes'\r\n })\r\n }\r\n else {\r\n this.setState({ warningMessage: this.props.supplierComments.charactersLeft, characterCount: 150 - e.currentTarget.value.length, isUserCommentTextboxClicked: 'Yes' })\r\n }\r\n }\r\n\r\n onBlur(e) {\r\n this.setState({ isUserCommentTextboxClicked: 'No' })\r\n }\r\n\r\n onFocus(e) {\r\n if (this.state.remaingHistoricalCommentsLength < 150) {\r\n document.getElementById(\"userComments\").maxLength = this.state.remaingHistoricalCommentsLength\r\n this.setState({\r\n warningMessage: this.props.supplierComments.historicalCharactersLeft,\r\n characterCount: this.state.remaingHistoricalCommentsLength - e.currentTarget.value.length, isUserCommentTextboxClicked: 'Yes'\r\n })\r\n }\r\n else {\r\n this.setState({ warningMessage: this.props.supplierComments.charactersLeft, characterCount: 150 - e.currentTarget.value.length, isUserCommentTextboxClicked: 'Yes' })\r\n }\r\n }\r\n\r\n addUserComments() {\r\n var comments = document.getElementById(\"userComments\").value\r\n if (comments !== '')\r\n this.props.addUserComments(comments)\r\n }\r\n\r\n clearUserComments() {\r\n this.props.clearUserComments()\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData()\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n user: state.default,\r\n supplierComments: state.content.spendAnalysis.supplierDrilldown.supplierComments\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getSupplierComments: (DMCId, VSId, SKEY, userEmail) => dispatch(getSupplierComments(DMCId, VSId, SKEY, userEmail)),\r\n }\r\n}\r\nexport default connect(mapStateToProps, mapDispatchToProps)(UserCommentsPopUp)","import React from 'react';\r\nimport { connect } from 'react-redux'\r\nimport { Control, Form, Errors, actions } from 'react-redux-form'\r\nimport { RadioButton } from 'material-ui';\r\nimport ScrollArea from 'react-scrollbar'\r\n\r\nimport Button from 'UI/Button';\r\nimport ButtonWithoutLoader from 'UI/ButtonWithoutLoader'\r\nimport Select from 'react-select'\r\n\r\nimport { validators, dropdownColourStyles } from 'Constants'\r\nimport { formatThousands, BreakLine, round, mergeArrayByKey } from 'utils/Utils'\r\n\r\nimport {\r\n resetError\r\n} from 'actions/userActions'\r\n\r\nimport {\r\n searchResult,\r\n fetchCapIqSearchResults,\r\n capIqSearchSuccess,\r\n capIqSearchFailure\r\n}\r\n from 'actions/searchActions'\r\n\r\n import{\r\n selectedCapIqIdDetails\r\n }from 'actions/spendActions'\r\n\r\nimport { capIQFetchData } from 'actions/discoveryActions'\r\nimport { valueStoryFetchDataSuccess } from 'actions/fetchValueStory'\r\nimport {\r\n getSPCapitalIQData,\r\n getSPCapitalIQLoading,\r\n getSPCapitalIQSuccess,\r\n getSPCapitalIQFailure,\r\n getCapIQDataBlank\r\n} from 'actions/spendActions'\r\n\r\nimport { Checkbox } from 'material-ui';\r\n\r\nclass CapIQSearch extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: props.data,\r\n peArray: [],\r\n bpArray: [],\r\n flag: false,\r\n index: -1,\r\n checked: false,\r\n checkIndex: -1,\r\n // companyName: [],\r\n //companyName: '',\r\n capIQId: '',\r\n stockTicker: '',\r\n selectedData: null,\r\n searchOption: [{ label: 'CapIQ ID', value: 'CapIQ ID' }, { label: 'Company Name', value: 'Company Name' }, { label: 'Stock Ticker', value: 'Stock Ticker' }],\r\n selectedOption: 'Company Name',\r\n searchText: '',\r\n companyDetails: [],\r\n companyObj: [],\r\n isLoading: false,\r\n ultimateParentChecked: true,\r\n publicCompanyChecked: false,\r\n currencyCode: 'USD',\r\n capIQResult: [],\r\n errorMsg: '',\r\n searchFlag: false,\r\n searchMessage: '',\r\n countryArray: [],\r\n selectedCountry: 'All Countries'\r\n }\r\n this.loadPE_Data = this.loadPE_Data.bind(this)\r\n this.loadCompanyData = this.loadCompanyData.bind(this)\r\n this.createCompanyProfileArray = this.createCompanyProfileArray.bind(this)\r\n this.changeUltimateParentCheck = this.changeUltimateParentCheck.bind(this)\r\n this.changePublicCompanyCheck = this.changePublicCompanyCheck.bind(this)\r\n this.RadioButtonChecked = this.RadioButtonChecked.bind(this);\r\n this.onCapIQIdChangeEvent = this.onCapIQIdChangeEvent.bind(this);\r\n this.onSearchTextChangeEvent = this.onSearchTextChangeEvent.bind(this);\r\n this.onStockTickerChangeEvent = this.onStockTickerChangeEvent.bind(this);\r\n this.search = this.search.bind(this);\r\n this._handleKeyDown = this._handleKeyDown.bind(this);\r\n this.save = this.save.bind(this)\r\n this.addCurrencyMask = this.addCurrencyMask.bind(this)\r\n this.filterSearchData = this.filterSearchData.bind(this)\r\n this.clearCAPIQ = this.clearCAPIQ.bind(this);\r\n }\r\n\r\n addCurrencyMask(value) {\r\n const regex = /\\d*\\.?\\d{0,2}/g\r\n const filteredValue = regex.exec(value)\r\n let currencySymbol = this.props.currencySymbols[this.state.currencyCode];\r\n if (this.state.currencyCode === null) {\r\n currencySymbol = '$';\r\n }\r\n\r\n if (filteredValue[0] === '') {\r\n return currencySymbol + formatThousands(this.value) + ' M'\r\n } else {\r\n this.value = filteredValue[0]\r\n return currencySymbol + formatThousands(this.value) + ' M'\r\n }\r\n\r\n }\r\n\r\n\r\n save() {\r\n if (this.state.checked) {\r\n this.props.capIqRadioButtonClicked(this.state.selectedData) \r\n }\r\n this.props.close();\r\n }\r\n clearCAPIQ() {\r\n // let arr = [{\r\n // \tOrganization: '', Industry: '', Location: '0', AnnualRevenue: null, TotalSpend: '0', CapIQId: '',\r\n // \tCapIQCompany: '', GlobalUltimateId: '', GlobalUltimateCompany: '', BPId: '', BPCompany: '',\r\n // \tPEId: '', PECompany: '', CurrencyCode: 'USD'\r\n // }]\r\n const companyData = this.props.userData;\r\n companyData.Organization = '';\r\n companyData.Industry = '';\r\n companyData.Location = '0';\r\n companyData.AnnualRevenue = null;\r\n companyData.TotalSpend = '0';\r\n companyData.CapIQId = '';\r\n companyData.CurrencyCode = 'USD';\r\n this.props.valueStoryFetchDataSuccess(companyData)\r\n this.props.capIqDataCleared()\r\n this.props.getCapIQDataBlank(true)\r\n this.props.close(); \r\n \r\n }\r\n\r\n changeUltimateParentCheck() {\r\n this.setState({ ultimateParentChecked: !this.state.ultimateParentChecked })\r\n //this.setState({ ultimateParentChecked: !this.state.ultimateParentChecked }, this.filterSearchData)\r\n }\r\n\r\n changePublicCompanyCheck() {\r\n this.setState({ publicCompanyChecked: !this.state.publicCompanyChecked })\r\n //this.setState({ publicCompanyChecked: !this.state.publicCompanyChecked }, this.filterSearchData)\r\n }\r\n\r\n onCapIQIdChangeEvent(event) {\r\n this.setState({ capIQId: event.target.value !== undefined ? event.target.value : '' });\r\n }\r\n\r\n onSearchTextChangeEvent(event) {\r\n this.setState({ searchText: event.target.value !== undefined ? event.target.value : '', checked: false, searchFlag: event.target.value !== '' ? true : false });\r\n }\r\n\r\n onStockTickerChangeEvent(event) {\r\n this.setState({ stockTicker: event.target.value !== undefined ? event.target.value : '' });\r\n }\r\n\r\n _handleKeyDown(e) {\r\n if (e.key === 'Enter') {\r\n this.search()\r\n }\r\n }\r\n\r\n filterSearchData() {\r\n let data = this.state.capIQResult\r\n let filteredResult = []\r\n //check if the checkbox to include only ultimate parent companies checked\r\n if (this.state.ultimateParentChecked && this.state.publicCompanyChecked) {\r\n for (let i = 0; i < data.length; i++) {\r\n //Include only the results which have a parent id & type publi\r\n if (data[i].PARENT_COMPANY_ID == data[i].COMPANY_ID && data[i].COMPANY_TYPE == 'Public Company') {\r\n filteredResult.push(data[i])\r\n }\r\n }\r\n } else if (this.state.ultimateParentChecked && !this.state.publicCompanyChecked) {\r\n for (let i = 0; i < data.length; i++) {\r\n //Include only the results which have a parent id\r\n if (data[i].PARENT_COMPANY_ID == data[i].COMPANY_ID) {\r\n filteredResult.push(data[i])\r\n }\r\n }\r\n }\r\n else if (!this.state.ultimateParentChecked && this.state.publicCompanyChecked) {\r\n for (let i = 0; i < data.length; i++) {\r\n //Include only the results which have a company type public\r\n if (data[i].COMPANY_TYPE == 'Public Company') {\r\n filteredResult.push(data[i])\r\n }\r\n }\r\n }\r\n else {\r\n filteredResult = data;\r\n }\r\n this.setState({ searchResult: filteredResult }, this.loadPE_Data)\r\n }\r\n\r\n search() {\r\n let searchText = this.state.searchText;\r\n let searchType = 1;\r\n if (this.state.selectedOption == 'Stock Ticker') {\r\n searchType = 2;\r\n }\r\n\r\n if (searchText.trim().length === 0) {\r\n return;\r\n }\r\n let parentFlag = 1;\r\n if (this.state.ultimateParentChecked) {\r\n parentFlag = 2;\r\n }\r\n let publicFlag = 1;\r\n if (this.state.publicCompanyChecked) {\r\n publicFlag = 2;\r\n }\r\n let country = this.state.selectedCountry == 'All Countries' ? 'all' : this.state.selectedCountry;\r\n this.props.searchResult([])\r\n this.setState({ searchMessage: '', searchResult: [], companyDetails: [] }, this.loadPE_Data)\r\n this.props.fetchCapIqSearchResults(searchText, searchType, parentFlag, publicFlag, country)\r\n .then((result) => {\r\n this.props.capIqSearchSuccess(result)\r\n this.props.searchResult(result.data.Result)\r\n let searchResult = result.data.Result.SearchResult;\r\n let scoreResult = result.data.Result.ScoreResult;\r\n\r\n let data = mergeArrayByKey(scoreResult, searchResult, 'COMPANY_ID')\r\n let length = 0\r\n let error = ''\r\n let message = 'Search results: '\r\n if (data.length > 500) {\r\n length = 500\r\n } else {\r\n length = data.length\r\n this.setState({ errorMsg: error })\r\n }\r\n // let filteredResult = []\r\n // //check if the checkbox to include only ultimate parent companies checked\r\n // if (this.state.ultimateParentChecked && this.state.publicCompanyChecked) {\r\n // for (let i = 0; i < length; i++) {\r\n // //Include only the results which have a parent id & type publi\r\n // if (data[i].PARENT_COMPANY_ID == data[i].COMPANY_ID && data[i].COMPANY_TYPE == 'Public Company') {\r\n // filteredResult.push(data[i])\r\n // }\r\n // }\r\n // } else if (this.state.ultimateParentChecked && !this.state.publicCompanyChecked) {\r\n // for (let i = 0; i < length; i++) {\r\n // //Include only the results which have a parent id\r\n // if (data[i].PARENT_COMPANY_ID == data[i].COMPANY_ID) {\r\n // filteredResult.push(data[i])\r\n // }\r\n // }\r\n // }\r\n // else if (!this.state.ultimateParentChecked && this.state.publicCompanyChecked) {\r\n // for (let i = 0; i < length; i++) {\r\n // //Include only the results which have a company type public\r\n // if (data[i].COMPANY_TYPE == 'Public Company') {\r\n // filteredResult.push(data[i])\r\n // }\r\n // }\r\n // }\r\n // else {\r\n // filteredResult = data;\r\n // }\r\n\r\n if (data.length >= 500) {\r\n let error1 = 'Your search has returned 500+ records. Please refine and re-search.'\r\n this.setState({ errorMsg: error1, searchMessage: '' })\r\n } else {\r\n if (data.length == 0) {\r\n this.setState({ searchMessage: '' })\r\n }\r\n let msg = message + data.length\r\n this.setState({ searchMessage: msg })\r\n }\r\n this.setState({ searchResult: data, capIQResult: data }, this.loadPE_Data)\r\n //this.setState({ capIQResult: result.data.Result }, this.filterSearchData)\r\n }).catch((error) => {\r\n this.props.capIqSearchFailure(error.response.data.Message)\r\n this.setState({ searchMessage: '', errorMsg: '' })\r\n })\r\n }\r\n\r\n\r\n\r\n RadioButtonChecked(e) {\r\n var companyName = [];\r\n let data = this.state.searchResult[e.currentTarget.value]\r\n console.log(\"capIQ data: \", data)\r\n if (data.AVATAR_INDUSTRY != null) {\r\n const industryIdx = this.props.contentData.industries.findIndex(item => data.AVATAR_INDUSTRY.toLowerCase() === item.toLowerCase());\r\n const companyData = this.props.userData;\r\n companyData.Industry = industryIdx;\r\n this.props.valueStoryFetchDataSuccess(companyData);\r\n }\r\n\r\n //this.props.capIqRadioButtonClicked(data)\r\n //After this send the data back to search results to populate company profile..................................\r\n this.props.selectedCapIqIdDetails(data)\r\n this.setState({ checked: true, checkIndex: e.currentTarget.id, selectedData: data, isLoading: true, currencyCode: data.CURRENCY_CODE }, this.callMethods)\r\n }\r\n\r\n callMethods() {\r\n this.loadPE_Data();\r\n this.createCompanyProfileArray(null);\r\n }\r\n\r\n createCompanyProfileArray(id) {\r\n let capIQ = id != null && id != '' ? id : this.state.selectedData != null ? this.state.selectedData.COMPANY_ID : null;\r\n if(capIQ != null && capIQ != '' && capIQ != undefined)\r\n {\r\n this.props.getSPCapitalIQData(capIQ)\r\n .then((result) => {\r\n this.props.getSPCapitalIQSuccess(result)\r\n let data = result.data.Result;\r\n this.setState({ companyObj: data, capIQId: capIQ }, this.loadCompanyData)\r\n }).catch((error) => {\r\n this.props.getSPCapitalIQFailure(error.response.data.Message)\r\n })\r\n } \r\n }\r\n\r\n loadPE_Data() {\r\n var result = (\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {this.props.supplierComments.userComment}
\r\n {this.state.isUserCommentTextboxClicked === 'Yes' ? {this.state.warningMessage + this.state.characterCount}
\r\n : null}\r\n \r\n this.onChange(e)}\r\n onFocus={e => this.onFocus(e)}\r\n onBlur={(e) => this.onBlur(e)}\r\n id=\"userComments\"\r\n />\r\n
\r\n \r\n
\r\n {this.props.supplierComments.historicalComment}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.state.searchResult.map((data, index) => (\r\n
)\r\n\r\n this.setState({ peArray: result })\r\n }\r\n\r\n loadCompanyData() {\r\n var data = this.state.companyObj[0];\r\n this.props.capIQFetchData(data)\r\n\r\n\r\n const companyData = this.props.userData;\r\n companyData.CurrencyCode = data.CURRENCY_CODE;\r\n this.props.valueStoryFetchDataSuccess(companyData);\r\n\r\n var result = (\r\n
\r\n ))}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {data.COMPANY_NAME}\r\n | {this.props.content.capIdSearchText}: {data.COMPANY_ID}\r\n
\r\n \r\n {data.COUNTRY_NAME}\r\n | {data.EXCHANGE_SYMBOL}: {data.STOCK_TICKER}\r\n | {this.props.content.capIndustryText}: {data.COMPANY_INDUSTRY_DESC}\r\n
\r\n \r\n {this.props.content.capParentCompanyText}: {data.PARENT_COMPANY_NAME}\r\n | {\"Parent Id\"}: {data.PARENT_COMPANY_ID}\r\n
\r\n Company Name: {data.name}
*/}\r\n\r\n
\r\n \r\n
\r\n {this.props.company.COMPANY_NAME}
\r\n {data.COMPANY_NAME != null ? data.COMPANY_NAME : '-'}
\r\n \r\n
\r\n {this.props.company.COMPANY_ADDRESS}
\r\n \r\n {data.COMPANY_ADDRESS != null ? data.COMPANY_ADDRESS : '-'}\r\n
\r\n \r\n
\r\n {\"Industry Description\"}
\r\n \r\n {data.INDUSTRY_DESCRIPTION != null ? data.INDUSTRY_DESCRIPTION : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.COMPANY_TYPE}
\r\n \r\n {data.COMPANY_TYPE != null ? data.COMPANY_TYPE : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.COMPANY_STATUS}
\r\n \r\n {data.COMPANY_STATUS != null ? data.COMPANY_STATUS : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.EMPLOYEE_COUNT}
\r\n \r\n {data.EMPLOYEE_COUNT != null ? formatThousands(data.EMPLOYEE_COUNT) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.WEBPAGE}
\r\n \r\n \r\n
\r\n {this.props.company.FISCAL_YEAR}
\r\n \r\n {data.FISCAL_YEAR != null ? data.FISCAL_YEAR : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.TOT_REV}
\r\n \r\n {data.TOT_REV != null ? this.addCurrencyMask(data.TOT_REV) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.GRO_MARG}
\r\n \r\n {data.GRO_MARG != null ? round(data.GRO_MARG, 2) + ' %' : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.EBITDA_MARG}
\r\n \r\n {data.EBITDA_MARG != null ? round(data.EBITDA_MARG, 2) + ' %' : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.DSO}
\r\n \r\n {data.DSO != null ? round(data.DSO, 2) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.DPO}
\r\n \r\n {data.DPO != null ? round(data.DPO, 2) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.DIO}
\r\n \r\n {data.DIO != null ? round(data.DIO, 2) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.CCC}
\r\n \r\n {data.CCC != null ? round(data.CCC, 2) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.COGS}
\r\n \r\n {data.COGS != null ? this.addCurrencyMask(data.COGS) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.SG_A}
\r\n \r\n {data.SG_A != null ? this.addCurrencyMask(data.SG_A) : '-'}\r\n
\r\n \r\n
\r\n {this.props.company.INV}
\r\n \r\n {data.INV != null ? this.addCurrencyMask(data.INV) : '-'}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content.discovery.form,\r\n data: state.treeData,\r\n firstSearchResult: state.searchData,\r\n search: state.searchResultData,\r\n ui: state.content.ui,\r\n company: state.content.capitalDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n userData: state.valueStory,\r\n countryList: state.content.CountryList,\r\n capIQSearchData: state.capIQSearchTree,\r\n spendDetails: state.spendDetails\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n fetchCapIqSearchResults: (value, type, parentFlag, publicFlag, country) => dispatch(fetchCapIqSearchResults(value, type, parentFlag, publicFlag, country)),\r\n capIqSearchSuccess: (msg) => dispatch(capIqSearchSuccess(msg)),\r\n capIqSearchFailure: (error) => dispatch(capIqSearchFailure(error)),\r\n searchResult: (result) => dispatch(searchResult(result)),\r\n getSPCapitalIQSuccess: message => dispatch(getSPCapitalIQSuccess(message)),\r\n getSPCapitalIQFailure: error => dispatch(getSPCapitalIQFailure(error)),\r\n getSPCapitalIQLoading: bool => dispatch(getSPCapitalIQLoading(bool)),\r\n getSPCapitalIQData: (CapIQID) => dispatch(getSPCapitalIQData(CapIQID)),\r\n capIQFetchData: (capIQData) => dispatch(capIQFetchData(capIQData)),\r\n // capIQSearchTree: (capIQTreeData) => dispatch(capIQSearchTree(capIQTreeData)),\r\n valueStoryFetchDataSuccess: (valueStory) => dispatch(valueStoryFetchDataSuccess(valueStory)),\r\n resetError: () => dispatch(resetError()),\r\n getCapIQDataBlank: bool => dispatch(getCapIQDataBlank(bool)),\r\n selectedCapIqIdDetails: message => dispatch(selectedCapIqIdDetails(message))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CapIQSearch);\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport ButtonWithoutLoader from 'UI/ButtonWithoutLoader'\r\n\r\nimport { ExcelUploadColumns } from 'Constants'\r\nimport {uploadUserDefinedFields} from 'actions/spendActions'\r\n\r\nimport * as FileSaver from \"file-saver\";\r\nimport * as XLSX from 'xlsx';\r\nimport { Workbook } from 'exceljs/dist/exceljs';\r\nimport classNames from \"classnames\";\r\nimport { path } from 'Constants'\r\n\r\n\r\nconst recommendationData= ['Already Transacting', 'Relationship Exists', 'Enterprise - Supplier Dedicated Specialist (Integration & Catalog)', \"Enterprise - Integration & Catalog\", \"Enterprise - Integration\", \"Enterprise - Portal & Catalog\", 'Enterprise - Portal', 'Managed Standard Account', 'On Going Standard Account', 'Out of Scope']\r\n\r\nconst instructions=[\r\n'1. Download the excel upload template.',\r\n'2. Make edits or add data in excel for the desired suppliers.',\r\n'3. Choose your file and upload the updated template.'\r\n]\r\n\r\nconst notes=['- Upload template excel sheet contain editable(orange) columns and non-editable(blue) columns.',\r\n '- Validation on editable columns ensure data quality. Your file will error if the data is not in the format expected.',\r\n '- Non-editable columns will not be uploaded and are for reference only',\r\n '- Buyer Supplier Enablement Recommendation column only allows input from dropdown selection',\r\n '- Enablement Wave column only allows input from dropdown selection',\r\n '- Buyer Supplier Relationship column allows input text length up to 50 characters',\r\n '- User Defined Text Field Columns allows input text length up to 128 characters',\r\n '- User Defined Number Field Columns allows only numbers'\r\n ]\r\n\r\nclass UploadUserDefinedFields extends Component{\r\n constructor(props)\r\n {\r\n super(props)\r\n this.state={\r\n csvFile: '',\r\n columns: [],\r\n data: [],\r\n responseMsg: '',\r\n excelData: [],\r\n isSaveInProgress: false,\r\n }\r\n\r\n }\r\n\r\n handleChange(e){\r\n const files = e.target.files;\r\n if (files && files[0]) this.setState({ file: files[0], responseMsg: '', isError: 'No', isLoading: false, isSaveInProgress: false }, this.handleFile); \r\n }\r\n\r\n handleFile() {\r\n this.setState({ responseMsg: \"\"})\r\n const reader = new FileReader();\r\n const rABS = !!reader.readAsBinaryString;\r\n\r\n reader.onload = (e) => {\r\n /* Parse data */\r\n const bstr = e.target.result;\r\n const wb = XLSX.read(bstr, { type: rABS ? 'binary' : 'array', bookVBA: true });\r\n /* Get first worksheet */\r\n const wsname = wb.SheetNames[0];\r\n const ws = wb.Sheets[wsname];\r\n /* Convert array of arrays */\r\n const data = XLSX.utils.sheet_to_json(ws, { defval: \"\" }); \r\n this.setState({excelData: data}) \r\n \r\n //let excelData = data.filter(d=>d[\"Update Flag\"]) \r\n let excelData = data\r\n \r\n //validate invalid copy/paste data\r\n excelData.map((item)=>{\r\n if( isNaN(item[\"User Defined Numeric Field 1\"]) || isNaN(item[\"User Defined Numeric Field 2\"]) || isNaN(item[\"User Defined Numeric Field 3\"]) || isNaN(item[\"User Defined Numeric Field 4\"])\r\n || isNaN(item[\"User Defined Numeric Field 5\"]) || item[\"User Defined Text Field 1\"].length > 128 || item[\"User Defined Text Field 2\"].length > 128 || item[\"User Defined Text Field 3\"].length > 128\r\n || item[\"User Defined Text Field 4\"].length > 128 || item[\"User Defined Text Field 5\"].length > 128 || item[\"Buyer Supplier Relationship\"].length > 50){ \r\n document.getElementById('csvFile').value = null;\r\n this.setState({ excelData: '', responseMsg: this.props.content.invalidDataInFile, isError: 'Yes', isLoading: true, isSaveInProgress: false })\r\n return; \r\n }\r\n }) \r\n\r\n if(excelData.length == 0){\r\n this.setState({ responseMsg: this.props.content.invalidFileSelect, isError: 'Yes', isLoading: true, isSaveInProgress: false })\r\n return; \r\n }\r\n };\r\n \r\n if (rABS) {\r\n reader.readAsBinaryString(this.state.file);\r\n } else {\r\n reader.readAsArrayBuffer(this.state.file);\r\n };\r\n\r\n //e.target.files = this.state.invalid && null\r\n\r\n }\r\n \r\n\r\n initializeColumns() {\r\n let columns = []\r\n for (let index = 0; index < ExcelUploadColumns.length; index++) {\r\n const fieldConfig = ExcelUploadColumns[index];\r\n\r\n let tableColumn = {\r\n header: fieldConfig.screen_field_name,\r\n key: fieldConfig.field,\r\n width: 30,\r\n sortable: true,\r\n editable: fieldConfig.is_editable === 'Yes',\r\n isNumeric : fieldConfig.data_type === 'numeric',\r\n isTextWithLengtLimit : fieldConfig.data_type === 'text' && (!!fieldConfig.textLength),\r\n textLength : fieldConfig.textLength,\r\n // resizable: true,\r\n // filterable: true,\r\n screenSeq: fieldConfig.screen_seq,\r\n mandatory: fieldConfig.mandatory === 'Yes',\r\n exportFl: fieldConfig.export_fl === 'Y',\r\n editProperty: fieldConfig.is_editable,\r\n //formatter: formatter(fieldConfig.alignment),\r\n helpText: fieldConfig.screen_help_text\r\n }\r\n columns.push(tableColumn)\r\n }\r\n\r\n return columns;\r\n}\r\n\r\nhandleDownload(){\r\n this.setState({ isSaveInProgress : true}, this.downloadUserDefinedFields)\r\n}\r\n\r\n downloadUserDefinedFields(){\r\n this.setState({ responseMsg: \"\"})\r\n //create new excel work book\r\n let workbook = new Workbook();\r\n // //add name to sheet\r\n let worksheet = workbook.addWorksheet(this.props.content.uploadTemplateFile); \r\n\r\n const columnDetails = this.initializeColumns();\r\n worksheet.columns = columnDetails;\r\n\r\n for (const row of this.props.rowData) {\r\n worksheet.addRow(row);\r\n }\r\n \r\n let fname= this.props.content.uploadTemplateFile\r\n \r\n const nonEditableHeader = columnDetails.filter(i=>i.editable===false) \r\n const editableHeader = columnDetails.filter(i=>i.editable===true) \r\n \r\n //worksheet.protect('123@ariba', null);\r\n\r\n for(var i=0; i\r\n
\r\n \r\n
\r\n {this.props.content.capIqSearchTitle}
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {this.props.content.searchBy}*
\r\n \r\n option.label === this.state.selectedOption)}\r\n noOptionsMessage={() => null}\r\n onChange={(value) => this.handleSelectionChange(value.label)}\r\n options={this.state.searchOption}\r\n isSearchable={false}\r\n validateOn=\"change\" styles={dropdownColourStyles}\r\n />\r\n
\r\n \r\n
\r\n {'Filter By'}*
\r\n \r\n
\r\n \r\n {/*
\r\n {this.props.content.capCompanyNameSearchText}
*/}\r\n \r\n this._handleKeyDown(e)} onChange={this.onSearchTextChangeEvent} value={this.state.searchText} />\r\n \r\n {/* ![]()
this.search()} src={this.state.searchFlag ? \"/images/search_big_active.svg\":\"/images/search_big_inactive.svg\"} /> */}\r\n
\r\n\r\n \r\n
\r\n \r\n\r\n\r\n
\r\n \r\n option.label === this.state.selectedCountry)}\r\n noOptionsMessage={() => null}\r\n onChange={(value) => this.handleCountryChange(value.label)}\r\n options={this.state.countryArray}\r\n isSearchable={false}\r\n validateOn=\"change\" styles={dropdownColourStyles}\r\n />\r\n
\r\n {this.state.searchMessage}
\r\n \r\n
\r\n {this.state.errorMsg}
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.ultimateParentCheckbox}\r\n
\r\n \r\n
\r\n \r\n {this.props.content.publicCheckbox}\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n {this.props.search.isLoading ?\r\n \r\n
\r\n Loading...
:\r\n this.state.peArray\r\n }\r\n {this.props.search.error}
\r\n \r\n \r\n {this.state.isLoading ?\r\n \r\n
\r\n Loading...
:\r\n this.state.companyDetails\r\n }\r\n {this.props.search.error}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n userData: state.valueStory,\r\n user: state.default,\r\n validation: state.content.validation,\r\n spendDetails: state.spendDetails,\r\n content: state.content.spendAnalysis.detailedFile\r\n }\r\n }\r\n \r\n const mapDispatchToProps = dispatch => {\r\n return {\r\n uploadUserDefinedFields: (records) => dispatch(uploadUserDefinedFields(records)),\r\n }\r\n }\r\n \r\n export default connect(mapStateToProps, mapDispatchToProps)(UploadUserDefinedFields)","import React, { PureComponent } from 'react'\r\nimport { MultiSelect } from 'primereact/multiselect';\r\nimport Button from 'UI/Button';\r\n\r\nexport default class VendorUploadFilesModalContainer extends PureComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n rowData: props.rowData,\r\n wave: [],\r\n wavesSelected: null,\r\n filteredData: []\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n let dummy = this.props.waves\r\n //extract unique | distinct values from array\r\n let unique = [...new Set(dummy)];\r\n unique = unique.length > 0 ? unique.sort((a, b) => Number(a) - Number(b)) : unique;\r\n //multiselect expects an array of objects\r\n let tempWaveObj = []\r\n unique.forEach(item => {\r\n let obj = {}\r\n obj.label = item;\r\n obj.value = item;\r\n\r\n tempWaveObj.push(obj)\r\n })\r\n this.setState({ wave: tempWaveObj })\r\n }\r\n\r\n handleWaveChange(data) {\r\n let waves = this.state.wavesSelected;\r\n waves = data.value\r\n //Filter rowData by waves\r\n let rowData = this.state.rowData\r\n\r\n let filteredData = rowData.filter((item, index) => {\r\n if (waves.includes(item.Wave)) {\r\n return item;\r\n }\r\n })\r\n\r\n this.setState({ wavesSelected: waves, filteredData: filteredData })\r\n }\r\n\r\n exportData() {\r\n let exportData = this.state.filteredData.length > 0 ? this.state.filteredData : this.state.rowData;\r\n this.props.exportCsvForVUF(exportData);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {(this.state.isSaveInProgress) ?\r\n \r\n : null\r\n }\r\n
\r\n \r\n \r\n
\r\n {this.props.content.uploadPopupTitle}
\r\n {this.props.content.uploadStep1}
\r\n {this.props.content.uploadStep2}
\r\n {this.props.content.uploadStep3}
\r\n \r\n
\r\n\r\n this.handleDownload(e)} \r\n color\r\n /> \r\n\r\n
\r\n \r\n \r\n this.handleChange(e)} \r\n />\r\n
\r\n \r\n \r\n
\r\n\r\n \r\n
{this.state.responseMsg}
\r\n \r\n
\r\n )\r\n }\r\n}","import React, { PureComponent } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport ReactDOM from \"react-dom\";\r\nimport ReactPaginate from 'react-paginate';\r\nimport { path } from 'Constants'\r\nimport { ExportToCsv } from 'utils/ExportToCsv';\r\nimport classNames from \"classnames\";\r\nimport cloneDeep from 'lodash/cloneDeep';\r\nimport moment from 'moment'\r\nimport { routes } from 'Constants'\r\nimport * as FileSaver from \"file-saver\";\r\n\r\nimport * as XLSX from 'xlsx';\r\nimport { Workbook } from 'exceljs/dist/exceljs';\r\nimport axios from 'axios'\r\n\r\nimport {\r\n integralPartWithBlank,\r\n roundFix, formatThousands, getNonEmptyValue, roundFixWithBlank, formatThousandsWithBlank, mergeArrayByKey, RoundFormatter2,\r\n IntegralpartFormatter, IntegralpartPercentFormatter, binarySearchIndex, formatter, filterRenderer, editorComponent\r\n} from 'utils/Utils'\r\nimport {\r\n columnFieldModalStyle,\r\n suggestedValueContentStyle,ExcelUploadColumns,\r\n backdropStyle, exportOptionsModalStyle, changeModalContentStyle, modalContentStyle, changeModalStyle\r\n} from 'Constants';\r\n\r\nimport {\r\n dropdownValues, directSpendDropdown, scopeValues, goodsValues, requesitionValues, aribaBuyProcessValues,\r\n workingCaptialSegmentationValues, VendorLinkFormatter, IndustryLinkFormatter, discountingVals, termRationalizationVals\r\n}\r\n from '../SpendConstants'\r\n\r\nimport Modal from 'reboron/OutlineModal'\r\nimport { RadioButton } from 'material-ui';\r\n// Settings\r\nimport Select from 'react-select'\r\nimport {\r\n getDetailedFileSuccess,\r\n getDetailedFileLoading,\r\n getDetailedFileFailure,\r\n getDetailedFileSpendData,\r\n getSpendColumnsConfiguration,\r\n getNdlColumnsConfiguration,\r\n getNdlReportData,\r\n detailedFileFilters,\r\n detailedFileFilterText,\r\n selectedIndustryDetails,\r\n selectedEnablementWaveDetails,\r\n insertDetailedFileRecords,\r\n pendingChanges,\r\n defineScopeLoading,\r\n setResultSummaryDetails,\r\n setTopDetails,\r\n getSelectedColumn,\r\n addSelectedColumn,\r\n removeColumnsForRequest,\r\n selectedCapIqIdDetails,\r\n getVendorFiles\r\n} from 'actions/spendActions'\r\nimport TextEditor from 'UI/TextEditor';\r\nimport ReactDataGrid from 'react-data-grid';\r\nimport { Toolbar, Data, Filters, Editors, Menu } from \"react-data-grid-addons\";\r\nimport Button from 'UI/Button';\r\nimport TextfilterRenderer from 'UI/TextFilterRenderer';\r\nimport NumericFilterRenderer from 'UI/NumericFilterRenderer';\r\nimport UserCommentsPopUp from '../UserCommentsPopUp'\r\nimport IndustryOverridePopUp from '../IndustryOverridePopUp'\r\nimport EnablementWavePopUp from '../EnablementWavePopUp'\r\nimport ColumnFields from '../ColumnFields'\r\nimport Popup from \"reactjs-popup\";\r\nimport VideoHelp from 'components/UI/VideoHelp'\r\nimport { PopupE } from 'UI/CustomComponents/Controls';\r\nimport CapIQSearch from './CapIQSearch';\r\nimport UploadUserDefinedFields from './UploadUserDefinedFields'\r\nimport VendorUploadFilesModalContainer from './VendorUploadFilesModalContainer';\r\nconst changeBackdropStyle = Object.assign({}, backdropStyle);\r\nchangeBackdropStyle.zIndex = '1050';\r\nconst alertModalStyle = Object.assign({}, exportOptionsModalStyle);\r\nconst downloadThreshold = 13000;\r\nalertModalStyle.zIndex = '1060';\r\n\r\nconst { ContextMenu, MenuItem, SubMenu, ContextMenuTrigger } = Menu;\r\n\r\nconst selectors = Data.Selectors;\r\nconst {\r\n NumericFilter,\r\n AutoCompleteFilter,\r\n MultiSelectFilter,\r\n SingleSelectFilter\r\n} = Filters;\r\n\r\nclass SpendFilesContainer extends PureComponent {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isLoading: true,\r\n isError: 'No',\r\n responseMsg: '',\r\n finalSpendData: [],\r\n RequestIds: [],\r\n selectedScopes: '',\r\n fileDetails: [],\r\n scopes: [],\r\n pageCount: 1,\r\n filters: {},\r\n perPage: 5000,\r\n paginatedRowFrom: 0,\r\n paginatedRowTo: 5000,\r\n columnDefs: [],\r\n rowData: [],\r\n filteredRows: [],\r\n columns: [],\r\n exportNonSensitiveColumns: [],\r\n exportEnablementInsightColumns: [],\r\n exportMatchAndClassificationColumns: [],\r\n exportAllColumns: [],\r\n ndlColumns: [],\r\n ndlData: [],\r\n exportCustomerViewColumns: [],\r\n userDefinedColumns: [],\r\n pageCountOption: [{ label: '1,000', value: 1000 }, { label: '5,000', value: 5000 }, { label: '10,000', value: 10000 }, { label: '15,000', value: 15000 }, { label: '30,000', value: 30000 }],\r\n selectedPageCount: 50,\r\n filteredRows: [],\r\n cellUpdateCss: 'bisque',\r\n open: false,\r\n openUserCommentsPopUp: false,\r\n openEnablementInsightPopUp: false,\r\n userComments: '',\r\n userCommentsRowNo: -1,\r\n userCommentInsideCell: '',\r\n userCommentOverrides: {},\r\n industryOverrideRowNo: -1,\r\n pendingRecords: [],\r\n warningRecords: [],\r\n errorRecords: [],\r\n exclusionReason_directSpendUpdates: [],\r\n warningDiv: true,\r\n errorDiv: true,\r\n csvRows: [],\r\n isFilterVisible: false,\r\n cleanIndustryOverrides: {},\r\n confirmedflagTrans: {},\r\n isCapIQLicesend: false,\r\n filterArray: [],\r\n filterDiv: [],\r\n filterFlag: false,\r\n summationArray: {},\r\n filteredSummationArray: {},\r\n userSelectedColumns: [],\r\n selectedSupplier: -1,\r\n exportAction: 'customerViewColumns',\r\n isSaveInProgress: false,\r\n openCapIq: false,\r\n capIqIdOverrideRowNo: -1,\r\n capIQIdOverrides: {},\r\n currentCapIqId: '',\r\n dummyScroll: false,\r\n actualScroll: false,\r\n enablementWaveOverrides: {},\r\n enablementWaveInputValue: null,\r\n headerToColumn: {},\r\n exportMC_Cloumns: false\r\n }\r\n this.formatSpendData = this.formatSpendData.bind(this)\r\n this.ndlDownload = this.ndlDownload.bind(this)\r\n this.openNdlPopUp = this.openNdlPopUp.bind(this) \r\n this.openDownloadPopup = this.openDownloadPopup.bind(this) \r\n this.handlePageClick = this.handlePageClick.bind(this)\r\n this.getValidFilterValues = this.getValidFilterValues.bind(this)\r\n this.handleFilterChange = this.handleFilterChange.bind(this)\r\n this.handlePageCountChange = this.handlePageCountChange.bind(this)\r\n this.industryOverride = this.industryOverride.bind(this)\r\n this.closePopUp = this.closePopUp.bind(this)\r\n this.outsidePopupClick = this.outsidePopupClick.bind(this)\r\n this.addUserComments = this.addUserComments.bind(this)\r\n this.clearUserComments = this.clearUserComments.bind(this)\r\n this.closeUserCommentsPopUp = this.closeUserCommentsPopUp.bind(this)\r\n this.outsideUserCommentsPopupClick = this.outsideUserCommentsPopupClick.bind(this)\r\n this.findRowIndex = this.findRowIndex.bind(this)\r\n this.filterValidationRecords = this.filterValidationRecords.bind(this)\r\n this.warningToggle = this.warningToggle.bind(this)\r\n this.errorToggle = this.errorToggle.bind(this)\r\n this.isCellEditable = this.isCellEditable.bind(this)\r\n this.onSave = this.onSave.bind(this)\r\n this.onColumnSelection = this.onColumnSelection.bind(this)\r\n this.hasRecordErrors = this.hasRecordErrors.bind(this)\r\n this.filterChange = this.filterChange.bind(this)\r\n this.setColumnHelpTextAndHardRefresh = this.setColumnHelpTextAndHardRefresh.bind(this)\r\n this.setHeaderHelpText = this.setHeaderHelpText.bind(this)\r\n this.columnResize = this.columnResize.bind(this)\r\n this.exportCsv = this.exportCsv.bind(this)\r\n this.exportExcel = this.exportExcel.bind(this) \r\n this.handleClick = this.handleClick.bind(this)\r\n this.clearIndustryOverride = this.clearIndustryOverride.bind(this)\r\n this.closeColumnFieldPopup = this.closeColumnFieldPopup.bind(this)\r\n this.filterToggle = this.filterToggle.bind(this)\r\n this.removeFilter = this.removeFilter.bind(this)\r\n this.expandFilter = this.expandFilter.bind(this)\r\n this.getRows = this.getRows.bind(this)\r\n this.hideEmptyColumns = this.hideEmptyColumns.bind(this)\r\n this.radioButtonChecked = this.radioButtonChecked.bind(this)\r\n this.capIqRadioButtonClicked = this.capIqRadioButtonClicked.bind(this)\r\n this.capIqDataCleared = this.capIqDataCleared.bind(this)\r\n this.capIqIdOverride = this.capIqIdOverride.bind(this)\r\n this.closeCapIqPopUp = this.closeCapIqPopUp.bind(this)\r\n this.outsideCapIqIdPopupClick = this.outsideCapIqIdPopupClick.bind(this)\r\n this.closeEnablementInsightPopUp = this.closeEnablementInsightPopUp.bind(this)\r\n this.outsideEnablementInsightPopupClick = this.outsideEnablementInsightPopupClick.bind(this)\r\n this.enablementWaveInput = this.enablementWaveInput.bind(this);\r\n this.clearEnablementWaveOverride = this.clearEnablementWaveOverride.bind(this);\r\n this.actions = this.getApplicationFeatureActions()\r\n this.getHeaderGroups = this.getHeaderGroups.bind(this)\r\n }\r\n\r\n setColumnHelpTextAndHardRefresh(paginatedRows, columnDefs, isFilterVisible = this.state.isFilterVisible) {\r\n this.timer = setInterval(() => {\r\n this.setHeaderHelpText(columnDefs)\r\n }, 5000);\r\n\r\n\r\n if (paginatedRows.length === 0) {\r\n var grid = this.myOpenGrid;\r\n if (grid) {\r\n return grid.base.props.columns\r\n }\r\n } else {\r\n columnDefs = columnDefs.map((col, i) => ({\r\n ...col,\r\n hash: new Date().getTime()\r\n }));\r\n }\r\n\r\n return columnDefs\r\n }\r\n\r\n\r\n setHeaderHelpText(columnDefs) {\r\n var grid = this.myOpenGrid;\r\n if (grid === null || grid === undefined) {\r\n return;\r\n }\r\n\r\n var gridCells = ReactDOM.findDOMNode(grid).querySelectorAll('.react-grid-HeaderCell');\r\n gridCells.forEach((item) => {\r\n if (item.classList.length > 1) {\r\n return\r\n }\r\n const headerText = item.innerText;\r\n var col = columnDefs.findIndex((colDef) => {\r\n return colDef.name === headerText\r\n })\r\n\r\n if (col !== -1) {\r\n item.setAttribute('title', columnDefs[col].helpText)\r\n if (columnDefs[col].editable) {\r\n item.style.backgroundColor = '#ff8c00';\r\n }\r\n }\r\n })\r\n\r\n // const canvas = document.getElementsByClassName('react-grid-Canvas')[0]\r\n // const dummyScroll = document.getElementsByClassName('scroll-dummy-child')[0]\r\n // let columnDefLength = this.state.columnDefs.length;\r\n // dummyScroll.style.width = (columnDefLength * (columnDefLength > 14 ? 160 : 120)) + 'px'\r\n // const dummyElement = document.getElementsByClassName('scroll-dummy')[0]\r\n\r\n // if (this.actions.indexOf(routes.businessValue) > -1) {\r\n // dummyElement.style.width = '90vw'\r\n\r\n // } else {\r\n // dummyElement.style.width = '96vw'\r\n // }\r\n\r\n // canvas.onscroll = () => {\r\n // if (this.state.dummyScroll) {\r\n // this.setState({ dummyScroll: false })\r\n // return\r\n // }\r\n\r\n // this.setState({ actualScroll: true }, () => {\r\n // const dummy = document.getElementsByClassName('scroll-dummy')[0]\r\n // const length = this.state.columnDefs.length * 120\r\n // const dummyScrollRatio = document.documentElement.clientWidth / length\r\n // dummy.scrollLeft = canvas.scrollLeft// * dummyScrollRatio\r\n // })\r\n // }\r\n }\r\n\r\n filterChange() {\r\n const isFilterVisible = this.state.isFilterVisible\r\n this.filteredColumnValues = []\r\n\r\n this.setState({ isFilterVisible: !isFilterVisible })\r\n }\r\n\r\n hasRecordErrors() {\r\n const errorRecords = this.state.errorRecords\r\n var errorRecordSize = 0;\r\n Object.values(errorRecords).forEach((item) => {\r\n errorRecordSize += item.length;\r\n })\r\n\r\n return errorRecordSize > 0\r\n }\r\n\r\n onColumnSelection(param) {\r\n if ((Array.isArray(param) && param.length > 0) || !isNaN(parseInt(param))) {\r\n this.props.addSelectedColumn(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.user.user.Id, param).then((response) => {\r\n let selectedCols = response.data.Result;\r\n let columns = this.state.columns;\r\n let columnDefs = [];\r\n columns.map((column) => {\r\n if (selectedCols.indexOf(column.id) > -1) {\r\n let col = column.value;\r\n col.hash = new Date().getTime();\r\n column.isSelected = true;\r\n columnDefs.push(col);\r\n } else {\r\n column.isSelected = false;\r\n }\r\n })\r\n this.originalColumns = cloneDeep(columns);\r\n const headerToColumn = this.getHeaderGroups(columnDefs)\r\n\r\n this.setState({\r\n columns: columns,\r\n columnDefs: columnDefs.length === 0 ? [] : columnDefs.sort((a, b) => { return a.screenSeq - b.screenSeq }),\r\n headerToColumn: headerToColumn\r\n }, this.removeFilter(this.state.filters, undefined, true))\r\n });\r\n } else if (param === \"DEFAULT\") {\r\n this.props.removeColumnsForRequest(this.props.user.user.Id, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.spendDetails.currentActiveRequest.DMC_ID).then(\r\n (response) => {\r\n let columns = this.state.columns;\r\n let paramTosave = [];\r\n let columnDefs = [];\r\n columns.forEach(column => {\r\n if (column.is_default === \"Yes\" || column.internalEnablementInsightView == 'Yes') {\r\n let col = column.value;\r\n col.hash = new Date().getTime();\r\n column.isSelected = true;\r\n columnDefs.push(col);\r\n paramTosave.push(column.id)\r\n } else {\r\n column.isSelected = false;\r\n }\r\n });\r\n\r\n if (paramTosave.length > 0) {\r\n this.props.addSelectedColumn(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.user.user.Id, paramTosave)\r\n }\r\n\r\n const headerToColumn = this.getHeaderGroups(columnDefs)\r\n\r\n this.setState({\r\n columns: columns,\r\n columnDefs: columnDefs.length === 0 ? [] : columnDefs.sort((a, b) => { return a.screenSeq - b.screenSeq }),\r\n filters: {},\r\n headerToColumn: headerToColumn\r\n }, this.getRows([...this.state.rowData], {}))\r\n\r\n },\r\n (error) => { console.log(error) }\r\n )\r\n } else if (param === \"FlightPlanning\") {\r\n this.props.removeColumnsForRequest(this.props.user.user.Id, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.spendDetails.currentActiveRequest.DMC_ID).then(\r\n (response) => {\r\n let columns = this.state.columns;\r\n let paramTosave = [];\r\n let columnDefs = [];\r\n columns.forEach(column => {\r\n if (column.columnCategory === \"Enablement Insight\" || column.id === \"VENDOR_ID\" || column.id === \"VENDOR_NAME\" || column.id === \"AN_MATCH_CRITERIA\" || column.id === \"MATCH_CONFIDENCE\" || column.id === \"PROPOSED_ENABLEMENT_MODE\") {\r\n let col = column.value;\r\n col.hash = new Date().getTime();\r\n column.isSelected = true;\r\n columnDefs.push(col);\r\n paramTosave.push(column.id)\r\n } else {\r\n column.isSelected = false;\r\n }\r\n });\r\n if (paramTosave.length > 0) {\r\n this.props.addSelectedColumn(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.user.user.Id, paramTosave)\r\n }\r\n\r\n const headerToColumn = this.getHeaderGroups(columnDefs)\r\n\r\n this.setState({\r\n columns: columns,\r\n columnDefs: columnDefs.length === 0 ? [] : columnDefs.sort((a, b) => { return a.screenSeq - b.screenSeq }),\r\n filters: {},\r\n headerToColumn: headerToColumn\r\n }, this.getRows([...this.state.rowData], {}))\r\n\r\n },\r\n (error) => { console.log(error) }\r\n )\r\n } else if (param === \"InternalEnablementInsightView\") {\r\n this.props.removeColumnsForRequest(this.props.user.user.Id, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.spendDetails.currentActiveRequest.DMC_ID).then(\r\n (response) => {\r\n let columns = this.state.columns;\r\n let paramTosave = [];\r\n let columnDefs = [];\r\n columns.forEach(column => {\r\n if (column.internalEnablementInsightView == 'Yes') {\r\n let col = column.value;\r\n col.hash = new Date().getTime();\r\n column.isSelected = true;\r\n columnDefs.push(col);\r\n paramTosave.push(column.id)\r\n } else {\r\n column.isSelected = false;\r\n }\r\n });\r\n if (paramTosave.length > 0) {\r\n this.props.addSelectedColumn(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.user.user.Id, paramTosave)\r\n }\r\n\r\n const headerToColumn = this.getHeaderGroups(columnDefs)\r\n\r\n this.setState({\r\n columns: columns,\r\n columnDefs: columnDefs.length === 0 ? [] : columnDefs.sort((a, b) => { return a.screenSeq - b.screenSeq }),\r\n filters: {},\r\n headerToColumn: headerToColumn\r\n }, this.getRows([...this.state.rowData], {}))\r\n\r\n },\r\n (error) => { console.log(error) }\r\n )\r\n } else if (param === \"ExternalEnablementInsightView\") {\r\n this.props.removeColumnsForRequest(this.props.user.user.Id, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.spendDetails.currentActiveRequest.DMC_ID).then(\r\n (response) => {\r\n let columns = this.state.columns;\r\n let paramTosave = [];\r\n let columnDefs = [];\r\n columns.forEach(column => {\r\n if (column.externalEnablementInsightView == 'Yes') {\r\n let col = column.value;\r\n col.hash = new Date().getTime();\r\n column.isSelected = true;\r\n columnDefs.push(col);\r\n paramTosave.push(column.id)\r\n } else {\r\n column.isSelected = false;\r\n }\r\n });\r\n if (paramTosave.length > 0) {\r\n this.props.addSelectedColumn(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.user.user.Id, paramTosave)\r\n }\r\n\r\n const headerToColumn = this.getHeaderGroups(columnDefs)\r\n\r\n this.setState({\r\n columns: columns,\r\n columnDefs: columnDefs.length === 0 ? [] : columnDefs.sort((a, b) => { return a.screenSeq - b.screenSeq }),\r\n filters: {},\r\n headerToColumn: headerToColumn\r\n }, this.getRows([...this.state.rowData], {}))\r\n\r\n },\r\n (error) => { console.log(error) }\r\n )\r\n } else if (param === \"CategoryInsightsView\") {\r\n this.props.removeColumnsForRequest(this.props.user.user.Id, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.spendDetails.currentActiveRequest.DMC_ID).then(\r\n (response) => {\r\n let columns = this.state.columns;\r\n let paramTosave = [];\r\n let columnDefs = [];\r\n columns.forEach(column => {\r\n if (column.categoryInsightsView == 'Yes') {\r\n let col = column.value;\r\n col.hash = new Date().getTime();\r\n column.isSelected = true;\r\n columnDefs.push(col);\r\n paramTosave.push(column.id)\r\n } else {\r\n column.isSelected = false;\r\n }\r\n });\r\n if (paramTosave.length > 0) {\r\n this.props.addSelectedColumn(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.user.user.Id, paramTosave)\r\n }\r\n\r\n const headerToColumn = this.getHeaderGroups(columnDefs)\r\n\r\n this.setState({\r\n columns: columns,\r\n columnDefs: columnDefs.length === 0 ? [] : columnDefs.sort((a, b) => { return a.screenSeq - b.screenSeq }),\r\n filters: {},\r\n headerToColumn: headerToColumn\r\n }, this.getRows([...this.state.rowData], {}))\r\n\r\n },\r\n (error) => { console.log(error) }\r\n )\r\n } else if (param === \"MandCView\") {\r\n this.props.removeColumnsForRequest(this.props.user.user.Id, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.spendDetails.currentActiveRequest.DMC_ID).then(\r\n (response) => {\r\n let columns = this.state.columns;\r\n let paramTosave = [];\r\n let columnDefs = [];\r\n columns.forEach(column => {\r\n if (column.matchAndClassification_export == 'Yes') {\r\n let col = column.value;\r\n col.hash = new Date().getTime();\r\n column.isSelected = true;\r\n columnDefs.push(col);\r\n paramTosave.push(column.id)\r\n } else {\r\n column.isSelected = false;\r\n }\r\n });\r\n if (paramTosave.length > 0) {\r\n this.props.addSelectedColumn(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.user.user.Id, paramTosave)\r\n }\r\n\r\n const headerToColumn = this.getHeaderGroups(columnDefs)\r\n\r\n this.setState({\r\n columns: columns,\r\n columnDefs: columnDefs.length === 0 ? [] : columnDefs.sort((a, b) => { return a.screenSeq - b.screenSeq }),\r\n filters: {},\r\n headerToColumn: headerToColumn\r\n }, this.getRows([...this.state.rowData], {}))\r\n\r\n },\r\n (error) => { console.log(error) }\r\n )\r\n } else if (param === \"EnterpriseEnablementEstimatesView\") {\r\n this.props.removeColumnsForRequest(this.props.user.user.Id, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.spendDetails.currentActiveRequest.DMC_ID).then(\r\n (response) => {\r\n let columns = this.state.columns;\r\n let paramTosave = [];\r\n let columnDefs = [];\r\n columns.forEach(column => {\r\n if (column.enterpriseEnablementEstimatesView == 'Yes') {\r\n let col = column.value;\r\n col.hash = new Date().getTime();\r\n column.isSelected = true;\r\n columnDefs.push(col);\r\n paramTosave.push(column.id)\r\n } else {\r\n column.isSelected = false;\r\n }\r\n });\r\n if (paramTosave.length > 0) {\r\n this.props.addSelectedColumn(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.user.user.Id, paramTosave)\r\n }\r\n\r\n const headerToColumn = this.getHeaderGroups(columnDefs)\r\n\r\n this.setState({\r\n columns: columns,\r\n columnDefs: columnDefs.length === 0 ? [] : columnDefs.sort((a, b) => { return a.screenSeq - b.screenSeq }),\r\n filters: {},\r\n headerToColumn: headerToColumn\r\n }, this.getRows([...this.state.rowData], {}))\r\n\r\n },\r\n (error) => { console.log(error) }\r\n )\r\n } \r\n else if (param === \"SccEnableInsightView\") {\r\n this.props.removeColumnsForRequest(this.props.user.user.Id, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.spendDetails.currentActiveRequest.DMC_ID).then(\r\n (response) => {\r\n let columns = this.state.columns;\r\n let paramTosave = [];\r\n let columnDefs = [];\r\n columns.forEach(column => {\r\n if (column.sccEnableInsightView == 'Yes') {\r\n let col = column.value;\r\n col.hash = new Date().getTime();\r\n column.isSelected = true;\r\n columnDefs.push(col);\r\n paramTosave.push(column.id)\r\n } else {\r\n column.isSelected = false;\r\n }\r\n });\r\n if (paramTosave.length > 0) {\r\n this.props.addSelectedColumn(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.user.user.Id, paramTosave)\r\n }\r\n\r\n const headerToColumn = this.getHeaderGroups(columnDefs)\r\n\r\n this.setState({\r\n columns: columns,\r\n columnDefs: columnDefs.length === 0 ? [] : columnDefs.sort((a, b) => { return a.screenSeq - b.screenSeq }),\r\n filters: {},\r\n headerToColumn: headerToColumn\r\n }, this.getRows([...this.state.rowData], {}))\r\n\r\n },\r\n (error) => { console.log(error) }\r\n )\r\n }\r\n else if (param === \"SccView\") {\r\n this.props.removeColumnsForRequest(this.props.user.user.Id, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.spendDetails.currentActiveRequest.DMC_ID).then(\r\n (response) => {\r\n let columns = this.state.columns;\r\n let paramTosave = [];\r\n let columnDefs = [];\r\n columns.forEach(column => {\r\n if (column.sccView == 'Yes') {\r\n let col = column.value;\r\n col.hash = new Date().getTime();\r\n column.isSelected = true;\r\n columnDefs.push(col);\r\n paramTosave.push(column.id)\r\n } else {\r\n column.isSelected = false;\r\n }\r\n });\r\n if (paramTosave.length > 0) {\r\n this.props.addSelectedColumn(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.user.user.Id, paramTosave)\r\n }\r\n\r\n const headerToColumn = this.getHeaderGroups(columnDefs)\r\n\r\n this.setState({\r\n columns: columns,\r\n columnDefs: columnDefs.length === 0 ? [] : columnDefs.sort((a, b) => { return a.screenSeq - b.screenSeq }),\r\n filters: {},\r\n headerToColumn: headerToColumn\r\n }, this.getRows([...this.state.rowData], {}))\r\n\r\n },\r\n (error) => { console.log(error) }\r\n )\r\n }\r\n else if (param === \"AllSccView\") {\r\n this.props.removeColumnsForRequest(this.props.user.user.Id, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.spendDetails.currentActiveRequest.DMC_ID).then(\r\n (response) => {\r\n let columns = this.state.columns;\r\n let paramTosave = [];\r\n let columnDefs = [];\r\n columns.forEach(column => {\r\n if (column.allSccView == 'Yes') {\r\n let col = column.value;\r\n col.hash = new Date().getTime();\r\n column.isSelected = true;\r\n columnDefs.push(col);\r\n paramTosave.push(column.id)\r\n } else {\r\n column.isSelected = false;\r\n }\r\n });\r\n if (paramTosave.length > 0) {\r\n this.props.addSelectedColumn(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.user.user.Id, paramTosave)\r\n }\r\n\r\n const headerToColumn = this.getHeaderGroups(columnDefs)\r\n\r\n this.setState({\r\n columns: columns,\r\n columnDefs: columnDefs.length === 0 ? [] : columnDefs.sort((a, b) => { return a.screenSeq - b.screenSeq }),\r\n filters: {},\r\n headerToColumn: headerToColumn\r\n }, this.getRows([...this.state.rowData], {}))\r\n\r\n },\r\n (error) => { console.log(error) }\r\n )\r\n }\r\n else if (param === \"HideEmptyColumns\") {\r\n this.props.removeColumnsForRequest(this.props.user.user.Id, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.spendDetails.currentActiveRequest.DMC_ID).then(\r\n (response) => {\r\n let modifiedColumns = this.hideEmptyColumns()\r\n const headerToColumn = this.getHeaderGroups(modifiedColumns.defaultColumns)\r\n this.setState({\r\n columns: modifiedColumns.columns,\r\n columnDefs: modifiedColumns.defaultColumns.length === 0 ? [] : modifiedColumns.defaultColumns.sort((a, b) => { return a.screenSeq - b.screenSeq }),\r\n filters: {},\r\n headerToColumn: headerToColumn\r\n }, this.getRows([...this.state.rowData], {}))\r\n\r\n },\r\n (error) => { console.log(error) }\r\n )\r\n }\r\n }\r\n\r\n handlePageCountChange(value) {\r\n var result = this.state.pageCountOption.find(page => page.value === value)\r\n var pageCount = this.state.filteredRows.length / result.value\r\n this.setState({ perPage: value, paginatedRowFrom: 0, paginatedRowTo: result.value, pageCount: pageCount })\r\n }\r\n\r\n isCellEditable(e) {\r\n const editProperty = e.column.editProperty;\r\n if (e.column.key === 'OVERRIDE_INDUSTRY_ID' && this.state.open)\r\n return false;\r\n\r\n if (e.column.key === 'CAPIQ_COMPANY_ID' && this.state.openCapIq)\r\n return false;\r\n\r\n if (e.column.key === 'USER_COMMENT' && this.state.openUserCommentsPopUp)\r\n return false;\r\n\r\n if (e.column.key === 'ENABLEMENT_WAVE' && this.state.openEnablementInsightPopUp)\r\n return false;\r\n\r\n if (e.row['DATA_COLLECTIONS_SKEY'] == '')\r\n return false\r\n\r\n if (editProperty === 'Yes' && !this.props.readOnly) {\r\n return true;\r\n }\r\n\r\n if (editProperty === 'Override' && e.column.key === 'EXCLUSION_REASON')\r\n return e.row['SCOPE_SOURCE'] === 'Override'\r\n\r\n if (editProperty === 'OverrideWithExclusionReason' && getNonEmptyValue(e.row['EXCLUSION_REASON']) === '')\r\n return e.row['SCOPE_SOURCE'] === 'Override'\r\n\r\n\r\n return false;\r\n }\r\n\r\n columnResize(idx, width) {\r\n let column = this.state.columnDefs;\r\n const headerToColumn = { ...this.state.headerToColumn }\r\n column.map((value, index) => {\r\n if (index == (Number(idx))) {\r\n value.width = Number(width)\r\n const keys = Object.keys(headerToColumn)\r\n for (let idx2 = 0; idx2 < keys.length; idx2++) {\r\n const key = keys[idx2]\r\n const val = headerToColumn[key]\r\n if (val.name === null && key === value.name) {\r\n val.width = value.width\r\n break\r\n } else if (val instanceof Array) {\r\n for (let idx1 = 0; idx1 < val.length; idx1++) {\r\n let item = val[idx1]\r\n if (item.name === value.name) {\r\n item.width = value.width\r\n break\r\n }\r\n }\r\n }\r\n }\r\n return;\r\n }\r\n })\r\n\r\n this.setState({ columnDefs: column, headerToColumn: headerToColumn }, this.forceUpdate())\r\n }\r\n\r\n findRowIndex(array, value) {\r\n var low = 0,\r\n high = array.length;\r\n\r\n while (low < high) {\r\n var mid = (low + high) >>> 1;\r\n if (array[mid] === value) return -1\r\n if (array[mid] < value) low = mid + 1;\r\n else high = mid;\r\n }\r\n\r\n return low;\r\n }\r\n\r\n onGridRowsUpdated = ({ fromRow, toRow, updated }) => {\r\n if (Object.values(updated)[0] === 'DUMMY' && Object.keys(updated)[0] === 'OVERRIDE_INDUSTRY_ID') {\r\n return\r\n }\r\n if (Object.values(updated)[0] === 'DUMMY' && Object.keys(updated)[0] === 'CAPIQ_COMPANY_ID') {\r\n return\r\n }\r\n if (Object.keys(updated)[0] === 'USER_DATE_FIELD' && Object.values(updated)[0] !== null\r\n && (Object.values(updated)[0].toLowerCase() === 'invalid date' || Object.values(updated)[0].length !== 10)) {\r\n return\r\n }\r\n fromRow -= 2; toRow -= 2;\r\n\r\n this.setState(state => {\r\n const filteredRows = state.filteredRows;\r\n const rowData = state.rowData;\r\n\r\n const pendingRecords = state.pendingRecords;\r\n pendingRecords.sort((a, b) => {\r\n return a - b;\r\n })\r\n\r\n const colIdx = state.columnDefs.findIndex((item) => {\r\n return item.key === Object.keys(updated)[0]\r\n })\r\n\r\n const warningRecords = this.state.warningRecords;\r\n const errorRecords = this.state.errorRecords;\r\n const exclusionReason_directSpendUpdates = this.state.exclusionReason_directSpendUpdates;\r\n var userCommentOverrides = this.state.userCommentOverrides\r\n var cleanIndustryOverrides = this.state.cleanIndustryOverrides\r\n var confirmedflagTrans = this.state.confirmedflagTrans\r\n var capIQIdOverrides = this.state.capIQIdOverrides\r\n var enablementWaveOverrides = this.state.enablementWaveOverrides\r\n\r\n for (var idx = state.paginatedRowFrom + fromRow, len = (state.paginatedRowFrom + toRow); idx <= len; idx++) {\r\n const editable = { column: state.columnDefs[colIdx], row: filteredRows[idx] }\r\n if (!this.isCellEditable(editable) && Object.keys(updated)[0] !== 'OVERRIDE_INDUSTRY_ID' && Object.keys(updated)[0] !== 'USER_COMMENT'\r\n && Object.keys(updated)[0] !== 'CAPIQ_COMPANY_ID' && Object.keys(updated)[0] !== 'ENABLEMENT_WAVE') {\r\n continue;\r\n }\r\n if (Object.keys(updated)[0] === 'USER_COMMENT' && moment(Object.values(updated)[0], 'MM/DD/YYYY', true).isValid() === true) {\r\n continue;\r\n }\r\n if (filteredRows[idx][editable.column.key] == Object.values(updated)[0])\r\n continue;\r\n\r\n var exclusionReason = filteredRows[idx]['EXCLUSION_REASON']\r\n var directSpend = filteredRows[idx]['DIRECT_SPEND']\r\n let skey = filteredRows[idx]['DATA_COLLECTIONS_SKEY']\r\n\r\n if (editable.column.key === 'OVERRIDE_INDUSTRY_ID') {\r\n if (cleanIndustryOverrides[skey] === undefined) {\r\n cleanIndustryOverrides[skey] = { old: filteredRows[idx]['OVERRIDE_INDUSTRY_ID'], new: Object.values(updated)[0] }\r\n } else {\r\n cleanIndustryOverrides[skey] = { old: cleanIndustryOverrides[skey].old, new: Object.values(updated)[0] }\r\n }\r\n }\r\n\r\n if (editable.column.key === 'USER_COMMENT') {\r\n if (userCommentOverrides[skey] === undefined) {\r\n userCommentOverrides[skey] = { old: filteredRows[idx]['USER_COMMENT'], new: Object.values(updated)[0] }\r\n } else {\r\n userCommentOverrides[skey] = { old: userCommentOverrides[skey].old, new: Object.values(updated)[0] }\r\n }\r\n }\r\n\r\n if (editable.column.key === 'CONFIRMED') {\r\n if (confirmedflagTrans[skey] === undefined) {\r\n confirmedflagTrans[skey] = { old: filteredRows[idx]['CONFIRMED'], new: Object.values(updated)[0] }\r\n } else {\r\n\r\n confirmedflagTrans[skey] = { old: confirmedflagTrans[skey].old, new: Object.values(updated)[0] }\r\n }\r\n }\r\n\r\n if (editable.column.key === 'CAPIQ_COMPANY_ID') {\r\n if (capIQIdOverrides[skey] === undefined) {\r\n capIQIdOverrides[skey] = { old: filteredRows[idx]['CAPIQ_COMPANY_ID'], new: Object.values(updated)[0] }\r\n } else {\r\n capIQIdOverrides[skey] = { old: capIQIdOverrides[skey].old, new: Object.values(updated)[0] }\r\n }\r\n }\r\n\r\n if (editable.column.key === 'ENABLEMENT_WAVE') {\r\n updated.ENABLEMENT_WAVE_OVERRIDE = updated.ENABLEMENT_WAVE !== \"\" ? 'Override' : 'Calculated'\r\n //also pass FP_FLAG_EIEDITED \r\n if (enablementWaveOverrides[skey] === undefined) {\r\n enablementWaveOverrides[skey] = { old: filteredRows[idx]['ENABLEMENT_WAVE'], new: Object.values(updated)[0] }\r\n } else {\r\n enablementWaveOverrides[skey] = { old: enablementWaveOverrides[skey].old, new: Object.values(updated)[0] }\r\n }\r\n }\r\n\r\n if (editable.column.key === 'SAP_ARIBA_BUY_ENABLE_MTHD_RECMD') {\r\n updated.ENABLEMENT_RECOMMENDATION_OVERRIDE = 'Override'\r\n }\r\n\r\n if (editable.column.key === 'ONBOARDING_WORKSTREAM_DETAILS') {\r\n updated.ONBOARDING_WORKSTREAM_DETAILS = updated.ONBOARDING_WORKSTREAM_DETAILS === \"Null\" ? '' : updated.ONBOARDING_WORKSTREAM_DETAILS\r\n updated.ONBOARDING_WORKSTREAM_DETAILS_OVERRIDE = 'Override'\r\n }\r\n\r\n filteredRows[idx] = { ...filteredRows[idx], ...updated };\r\n\r\n rowData.sort((a, b) => { return a['DATA_COLLECTIONS_SKEY'] - b['DATA_COLLECTIONS_SKEY'] }) // binary search work with sorted array only\r\n var rowIdx = binarySearchIndex(rowData, skey, 'DATA_COLLECTIONS_SKEY')\r\n rowData[rowIdx] = { ...rowData[rowIdx], ...updated };\r\n\r\n\r\n var recordIdx = this.findRowIndex(pendingRecords, skey);\r\n if (recordIdx >= 0) {\r\n pendingRecords.splice(recordIdx, 0, skey);\r\n }\r\n\r\n //Check for Exclusion reason and Direct Spend update\r\n if ((Object.keys(updated)[0] === \"EXCLUSION_REASON\" && Object.values(updated)[0] !== exclusionReason)\r\n || (Object.keys(updated)[0] === \"DIRECT_SPEND\" && Object.values(updated)[0] !== directSpend)) {\r\n if (!exclusionReason_directSpendUpdates.includes(skey))\r\n exclusionReason_directSpendUpdates.push(skey)\r\n }\r\n\r\n this.validateForWarning(filteredRows[idx], warningRecords);\r\n this.validateForError(filteredRows[idx], errorRecords);\r\n }\r\n return {\r\n responseMsg: '',\r\n confirmedflagTrans: confirmedflagTrans,\r\n cleanIndustryOverrides: cleanIndustryOverrides,\r\n userCommentOverrides: userCommentOverrides,\r\n capIQIdOverrides: capIQIdOverrides,\r\n enablementWaveOverrides: enablementWaveOverrides,\r\n rowData: rowData, filteredRows: filteredRows, fromRow: fromRow, toRow: toRow, updated: updated,\r\n pendingRecords: pendingRecords, warningRecords: warningRecords, errorRecords: errorRecords, exclusionReason_directSpendUpdates\r\n };\r\n });\r\n };\r\n\r\n validateForWarning(record, warningRecords) {\r\n const warningMessages = this.props.content.validationMessage.warningMessage;\r\n\r\n var exclusionReason = record['EXCLUSION_REASON']\r\n if (getNonEmptyValue(exclusionReason) !== '') {\r\n this.addWarningErroredRecord(warningMessages.exclusionReasonWarning, record, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(warningMessages.exclusionReasonWarning, record, warningRecords, false)\r\n }\r\n\r\n var buyingInvoicing = record['BUYING_INVOICING_ELIGIBLE'];\r\n var fieldGlassEligible = record['SAP_FIELDGLASS_ELIGIBLE']\r\n if (getNonEmptyValue(buyingInvoicing) === 'Yes' && getNonEmptyValue(fieldGlassEligible) === 'Yes') {\r\n this.addWarningErroredRecord(warningMessages.buyingInvoicingFieldGlassEligibleWarning, record, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(warningMessages.buyingInvoicingFieldGlassEligibleWarning, record, warningRecords, false)\r\n }\r\n\r\n var supplyChainEligible = record['SUPP_CHAIN_COLLAB_ELIGIBLE']\r\n if (getNonEmptyValue(buyingInvoicing) === 'Yes' && getNonEmptyValue(supplyChainEligible) === 'Yes') {\r\n this.addWarningErroredRecord(warningMessages.buyingInvoicingSupplyChainEligibleWarning, record, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(warningMessages.buyingInvoicingSupplyChainEligibleWarning, record, warningRecords, false)\r\n }\r\n\r\n var concurEligible = record['SAP_CONCUR_ELIGIBLE']\r\n if (getNonEmptyValue(buyingInvoicing) === 'Yes' && getNonEmptyValue(concurEligible) === 'Yes') {\r\n this.addWarningErroredRecord(warningMessages.buyingInvoicingConcurEligibleWarning, record, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(warningMessages.buyingInvoicingConcurEligibleWarning, record, warningRecords, false)\r\n }\r\n\r\n if (getNonEmptyValue(supplyChainEligible) === 'Yes' && getNonEmptyValue(fieldGlassEligible) === 'Yes') {\r\n this.addWarningErroredRecord(warningMessages.fieldGlassSCCEligibleWarning, record, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(warningMessages.fieldGlassSCCEligibleWarning, record, warningRecords, false)\r\n }\r\n\r\n var discountEligible = record['DISCOUNT_ELIGIBLE']\r\n var termRationalizationEligible = record['TERMS_RATIONALIZATION']\r\n var workingCaptialSegmentation = record['WORKING_CAPTIAL_SEGMENTATION'].trim()\r\n if (getNonEmptyValue(discountEligible) === 'Yes' && getNonEmptyValue(termRationalizationEligible) === 'Yes') {\r\n this.addWarningErroredRecord(warningMessages.discountAndTermRationalizationEligibleWarning, record, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(warningMessages.discountAndTermRationalizationEligibleWarning, record, warningRecords, false)\r\n }\r\n\r\n if (getNonEmptyValue(discountEligible) === 'Yes' && getNonEmptyValue(termRationalizationEligible) === 'Yes') {\r\n this.addWarningErroredRecord(warningMessages.discountAndTermRationalizationEligibleWarning, record, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(warningMessages.discountAndTermRationalizationEligibleWarning, record, warningRecords, false)\r\n }\r\n\r\n if (getNonEmptyValue(discountEligible) === 'Yes'\r\n && discountingVals.indexOf(getNonEmptyValue(workingCaptialSegmentation)) == -1) {\r\n this.addWarningErroredRecord(warningMessages.discountEligibleWarning, record, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(warningMessages.discountEligibleWarning, record, warningRecords, false)\r\n }\r\n\r\n if (getNonEmptyValue(termRationalizationEligible) === 'Yes'\r\n && termRationalizationVals.indexOf(getNonEmptyValue(workingCaptialSegmentation)) == -1\r\n ) {\r\n this.addWarningErroredRecord(warningMessages.termRationalizationWarning, record, warningRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(warningMessages.termRationalizationWarning, record, warningRecords, false)\r\n }\r\n\r\n }\r\n\r\n validateForError(record, errorRecords) {\r\n const errorMessages = this.props.content.validationMessage.errorMessage;\r\n\r\n var buyingInvoicing = record['BUYING_INVOICING_ELIGIBLE'];\r\n var requisitionable = record['REQUISITIONABLE'];\r\n var contractInvoicing = record['CONTRACT_INVOICING_ELIGIBLE'];\r\n\r\n if ((getNonEmptyValue(buyingInvoicing) === 'Yes' && getNonEmptyValue(requisitionable) === 'Yes' && getNonEmptyValue(contractInvoicing) === 'Yes') ||\r\n (getNonEmptyValue(buyingInvoicing) === 'Yes' && getNonEmptyValue(requisitionable) === 'No' && getNonEmptyValue(contractInvoicing) === 'No')) {\r\n this.addWarningErroredRecord(errorMessages.buyingInvoicingError, record, errorRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(errorMessages.buyingInvoicingError, record, errorRecords, false)\r\n }\r\n\r\n var requisitionableType = record['REQUISITION_TYPE'];\r\n if (getNonEmptyValue(requisitionable) === 'Yes' && getNonEmptyValue(requisitionableType) === 'N/A') {\r\n this.addWarningErroredRecord(errorMessages.requisitionableTypeError1, record, errorRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(errorMessages.requisitionableTypeError1, record, errorRecords, false)\r\n }\r\n\r\n if (getNonEmptyValue(requisitionable) === 'No' && getNonEmptyValue(requisitionableType) !== 'N/A') {\r\n this.addWarningErroredRecord(errorMessages.requisitionableTypeError2, record, errorRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(errorMessages.requisitionableTypeError2, record, errorRecords, false)\r\n }\r\n\r\n if (getNonEmptyValue(requisitionable) === 'Yes' && getNonEmptyValue(buyingInvoicing) === 'No') {\r\n this.addWarningErroredRecord(errorMessages.requisitionableTypeError3, record, errorRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(errorMessages.requisitionableTypeError3, record, errorRecords, false)\r\n }\r\n\r\n if (getNonEmptyValue(contractInvoicing) === 'Yes' && getNonEmptyValue(buyingInvoicing) === 'No') {\r\n this.addWarningErroredRecord(errorMessages.contractInvoicingError, record, errorRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(errorMessages.contractInvoicingError, record, errorRecords, false)\r\n }\r\n\r\n var supplyChain = record['SUPP_CHAIN_COLLAB_ELIGIBLE'];\r\n var commerceAutomation = record['COMMERCE_AUTOMATION_ELIGIBLE'];\r\n\r\n if (getNonEmptyValue(supplyChain) === 'Yes' && getNonEmptyValue(commerceAutomation) === 'Yes') {\r\n this.addWarningErroredRecord(errorMessages.supplyCommerceError, record, errorRecords, true)\r\n } else {\r\n this.addWarningErroredRecord(errorMessages.supplyCommerceError, record, errorRecords, false)\r\n }\r\n }\r\n\r\n addWarningErroredRecord(reason, record, records, add) {\r\n var arr = records[reason];\r\n if (getNonEmptyValue(arr) === '') {\r\n arr = []\r\n }\r\n\r\n var eltIdx = arr.indexOf((record['DATA_COLLECTIONS_SKEY']));\r\n if (eltIdx === -1 && add) {\r\n arr.push(record['DATA_COLLECTIONS_SKEY'])\r\n } else if (eltIdx !== -1 && !add) {\r\n arr.splice(eltIdx, 1)\r\n }\r\n\r\n records[reason] = arr;\r\n }\r\n\r\n radioButtonChecked(value) {\r\n if (value.target.value == 'nonSensitiveColumns') {\r\n this.setState({ exportAction: 'nonSensitiveColumns' })\r\n } else if (value.target.value == 'enablementInsightColumns') {\r\n this.setState({ exportAction: 'enablementInsightColumns' })\r\n } else if (value.target.value == 'currentViewColumns') {\r\n this.setState({ exportAction: 'currentViewColumns' })\r\n } else if (value.target.value == 'matchAndClassificationColumns') {\r\n this.setState({ exportAction: 'matchAndClassificationColumns' })\r\n } else if (value.target.value == 'customerViewColumns') {\r\n this.setState({ exportAction: 'customerViewColumns' })\r\n } else if (value.target.value == 'matchAndClassificationColumnsCSV') {\r\n this.setState({ exportAction: 'matchAndClassificationColumnsCSV' })\r\n } else if (value.target.value == 'customerViewColumnsCSV') {\r\n this.setState({ exportAction: 'customerViewColumnsCSV' })\r\n } else if (value.target.value == 'matchedOutputDemo') {\r\n this.setState({ exportAction: 'matchedOutputDemo' }) \r\n } else {\r\n this.setState({ exportAction: 'allColumns' })\r\n }\r\n }\r\n\r\n onSave() {\r\n const pendingRecords = this.state.pendingRecords;\r\n if (pendingRecords.length === 0) {\r\n return;\r\n }\r\n\r\n this.props.defineScopeLoading(true)\r\n this.setState({ isLoading: true, isError: 'No', responseMsg: '', isSaveInProgress: true })\r\n const rowData = this.state.rowData\r\n const exclusionReason_directSpendUpdates = this.state.exclusionReason_directSpendUpdates\r\n const recordsToInsert = [];\r\n const cleanIndustryOverrides = this.state.cleanIndustryOverrides\r\n const userCommentOverrides = this.state.userCommentOverrides\r\n const confirmedflagTrans = this.state.confirmedflagTrans\r\n const capIQIdOverrides = this.state.capIQIdOverrides\r\n const enablementWaveOverrides = this.state.enablementWaveOverrides\r\n\r\n pendingRecords.forEach((item) => {\r\n rowData.sort((a, b) => { return a['DATA_COLLECTIONS_SKEY'] - b['DATA_COLLECTIONS_SKEY'] }) // binary search work with sorted array only\r\n var rowIdx = binarySearchIndex(rowData, item, 'DATA_COLLECTIONS_SKEY')\r\n const row = rowData[rowIdx]\r\n const dkeyRecord = cleanIndustryOverrides[item]\r\n const skeyRecord = userCommentOverrides[item]\r\n const confirmedFlagRecord = confirmedflagTrans[item]\r\n const capIqIdRecord = capIQIdOverrides[item]\r\n const enablementWaveRecord = enablementWaveOverrides[item]\r\n const record = {\r\n VS_ID: this.props.spendDetails.currentActiveRequest.VS_ID, DMC_ID: this.props.spendDetails.currentActiveRequest.DMC_ID, DATA_COLLECTIONS_SKEY: item,\r\n USER_ID: this.props.user.user.Email,\r\n FLAG_SOLUTION: row[\"SCOPE_SOURCE\"] === \"Override\" ? \"Yes\" : \"No\",\r\n FLAG_INDUSTRY: ((dkeyRecord && dkeyRecord.old !== dkeyRecord.new) || row[\"SCOPE_SOURCE\"] === \"Industry\") ? \"Yes\" : \"No\",\r\n FLAG_INP: exclusionReason_directSpendUpdates.includes(row[\"DATA_COLLECTIONS_SKEY\"]) ? \"Yes\" : \"No\",\r\n FLAG_CONFIRMED: (confirmedFlagRecord && confirmedFlagRecord.old !== confirmedFlagRecord.new) ? \"Yes\" : \"No\",\r\n SCOPE_SOURCE: row[\"SCOPE_SOURCE\"],\r\n OVERRIDE_GICS: row[\"OVERRIDE_INDUSTRY_ID\"],\r\n CONFIRMED: row[\"CONFIRMED\"],\r\n EXCLUSION_REASON: row[\"EXCLUSION_REASON\"],\r\n GOODS_OR_SERVICE: row[\"GOODS_OR_SERVICE\"],\r\n DIRECT_SPEND: row[\"DIRECT_SPEND\"],\r\n SAP_ARIBA_BUY_PROCESS: row[\"SAP_ARIBA_BUY_PROCESS\"],\r\n SOURCING_ELIGIBLE: row[\"SOURCING_ELIGIBLE\"],\r\n BUYING_INV_ELIGIBLE: row[\"BUYING_INVOICING_ELIGIBLE\"],\r\n REQUISITION_ABLE: row[\"REQUISITIONABLE\"],\r\n REQUISITION_TYPE: row[\"REQUISITION_TYPE\"],\r\n CONTRACT_INV_ELIGIBLE: row[\"CONTRACT_INVOICING_ELIGIBLE\"],\r\n COMMERCE_AUTOMATION_ELIGIBLE: row[\"COMMERCE_AUTOMATION_ELIGIBLE\"],\r\n SUPP_CHAIN_COLLAB_ELIGIBLE: row[\"SUPP_CHAIN_COLLAB_ELIGIBLE\"],\r\n PAYABLES_ELIGIBLE: row[\"PAYABLES_ELIGIBLE\"],\r\n SAP_FIELDGLASS_ELIGIBLE: row[\"SAP_FIELDGLASS_ELIGIBLE\"],\r\n SAP_CONCUR_ELIGIBLE: row[\"SAP_CONCUR_ELIGIBLE\"],\r\n SPOT_BUY_ELIGIBLE: row[\"SPOT_BUY_ELIGIBLE\"],\r\n USER_DEF_TEXT_FIELD_1: row[\"USER_DEF_TEXT_FIELD_1\"],\r\n USER_DEF_TEXT_FIELD_2: row[\"USER_DEF_TEXT_FIELD_2\"],\r\n USER_DEF_TEXT_FIELD_3: row[\"USER_DEF_TEXT_FIELD_3\"],\r\n USER_DEF_TEXT_FIELD_4: row[\"USER_DEF_TEXT_FIELD_4\"],\r\n USER_DEF_TEXT_FIELD_5: row[\"USER_DEF_TEXT_FIELD_5\"],\r\n USER_DEF_NUMBERIC_FIELD_1: row[\"USER_DEF_NUMBERIC_FIELD_1\"],\r\n USER_DEF_NUMBERIC_FIELD_2: row[\"USER_DEF_NUMBERIC_FIELD_2\"],\r\n USER_DEF_NUMBERIC_FIELD_3: row[\"USER_DEF_NUMBERIC_FIELD_3\"],\r\n USER_DEF_NUMBERIC_FIELD_4: row[\"USER_DEF_NUMBERIC_FIELD_4\"],\r\n USER_DEF_NUMBERIC_FIELD_5: row[\"USER_DEF_NUMBERIC_FIELD_5\"],\r\n USER_COMMENT: row[\"USER_COMMENT\"],\r\n USER_DATE_FIELD: row[\"USER_DATE_FIELD\"],\r\n DPO: row[\"DPO\"],\r\n STANDARD_TERM: row[\"STANDARD_TERM\"],\r\n DISCOUNT_TERM: row[\"DISCOUNT_TERM\"],\r\n DISCOUNT_PERCENTAGE: row[\"DISCOUNT_PERCENTAGE\"],\r\n WORKING_CAPTIAL_SEGMENTATION: row[\"WORKING_CAPTIAL_SEGMENTATION\"],\r\n TERMS_RATIONALIZATION: row[\"TERMS_RATIONALIZATION\"],\r\n DISCOUNT_ELIGIBLE: row[\"DISCOUNT_ELIGIBLE\"],\r\n COMPANY_ID: row[\"CAPIQ_COMPANY_ID\"],\r\n BUYER_SUPPLIER_RELATIONSHIP: row[\"BUYER_SUPPLIER_RELATIONSHIP\"],\r\n SAP_ARIBA_DOC_PROXY: row[\"SAP_ARIBA_DOC_PROXY\"],\r\n SAP_ARIBA_SPEND_PROXY: row[\"SAP_ARIBA_SPEND_PROXY\"],\r\n SAP_ARIBA_BUY_ENABLE_MTHD_RECMD: row[\"SAP_ARIBA_BUY_ENABLE_MTHD_RECMD\"],\r\n ENABLEMENT_WAVE: row[\"ENABLEMENT_WAVE\"],\r\n ENABLEMENT_RECOMMENDATION_OVERRIDE: row[\"ENABLEMENT_RECOMMENDATION_OVERRIDE\"],\r\n ENABLEMENT_WAVE_OVERRIDE: row[\"ENABLEMENT_WAVE_OVERRIDE\"],\r\n ONBOARDING_WORKSTREAM_DETAILS: row[\"ONBOARDING_WORKSTREAM_DETAILS\"] == \"\" ? \"\": row[\"ONBOARDING_WORKSTREAM_DETAILS\"],\r\n ONBOARDING_WORKSTREAM_DETAILS_OVERRIDE: row[\"ONBOARDING_WORKSTREAM_DETAILS_OVERRIDE\"],\r\n ENABLE_MTHD_RECMD_OUT_SCOPE_REASON: row[\"ENABLE_MTHD_RECMD_OUT_SCOPE_REASON\"],\r\n\r\n // SCC Fields\r\n ADD_SUPPLIER_NAME: row[\"ADD_SUPPLIER_NAME\"],\r\n COMPANY_VENDOR_LIST: row[\"COMPANY_VENDOR_LIST\"],\r\n CUSTOM_FIELD1: row[\"CUSTOM_FIELD1\"],\r\n CUSTOM_FIELD2: row[\"CUSTOM_FIELD2\"],\r\n ENABLEMENT_WAVE: row[\"ENABLEMENT_WAVE\"],\r\n ERP_ASN_CNT: row[\"ERP_ASN_CNT\"],\r\n ERP_OC_CNT: row[\"ERP_OC_CNT\"],\r\n ERP_PO_LINE_ITEM_CNT: row[\"ERP_PO_LINE_ITEM_CNT\"],\r\n GOBAL_SUPPLIER_REGION: row[\"GOBAL_SUPPLIER_REGION\"],\r\n LST_TRANS_BUYER_ERP_DATE: row[\"LST_TRANS_BUYER_ERP_DATE\"],\r\n PLANT_BUSS_VENDOR_ADDRESS: row[\"PLANT_BUSS_VENDOR_ADDRESS\"],\r\n PLANT_BUSS_VENDOR_ID: row[\"PLANT_BUSS_VENDOR_ID\"],\r\n SUPPLIER_TYPE: row[\"SUPPLIER_TYPE\"],\r\n SCC_CONSIGMENT_COLLABRATION_IN_SCOPE: row[\"SCC_CONSIGMENT_COLLABRATION_IN_SCOPE\"],\r\n SCC_FORECAST_IN_SCOPE: row[\"SCC_FORECAST_IN_SCOPE\"],\r\n SCC_QUALITY_INSPECTION_IN_SCOPE: row[\"SCC_QUALITY_INSPECTION_IN_SCOPE\"],\r\n SCC_QUALITY_NOTIFICATION_IN_SCOPE: row[\"SCC_QUALITY_NOTIFICATION_IN_SCOPE\"],\r\n SCC_QUALITY_REVIEW_IN_SCOPE: row[\"SCC_QUALITY_REVIEW_IN_SCOPE\"],\r\n SCC_SCHEDULE_AGGREMENT_IN_SCOPE: row[\"SCC_SCHEDULE_AGGREMENT_IN_SCOPE\"],\r\n SCC_SMI_IN_SCOPE: row[\"SCC_SMI_IN_SCOPE\"],\r\n SCC_SOLUTION_IN_SCOPE: row[\"SCC_SOLUTION_IN_SCOPE\"],\r\n SCC_STD_ORDER_PROCESS_IN_SCOPE: row[\"SCC_STD_ORDER_PROCESS_IN_SCOPE\"],\r\n SCC_SUBCONTRACTING_IN_SCOPE: row[\"SCC_SUBCONTRACTING_IN_SCOPE\"],\r\n SAP_BUSS_NET_TRANS_MTHD: row[\"SAP_BUSS_NET_TRANS_MTHD\"],\r\n RETURN_IN_SCOPE: row[\"RETURN_IN_SCOPE\"],\r\n };\r\n\r\n recordsToInsert.push(record);\r\n })\r\n\r\n this.props.insertDetailedFileRecords(recordsToInsert)\r\n .then((response) => {\r\n let spendData = response.data.Result.SpendData;\r\n let supplierComments = response.data.Result.SupplierComments;\r\n let flightPlanningData = response.data.Result.FlightPlanningData;\r\n const rowData = this.state.rowData;\r\n const filteredRows = this.state.filteredRows;\r\n var matched = 0;\r\n\r\n for (var i = 0; i < spendData.length; i++) {\r\n const row = spendData[i];\r\n if (row['OVERRIDE_INDUSTRY_ID'] === 0)\r\n row['OVERRIDE_INDUSTRY_ID'] = ''\r\n\r\n const skey = row['DATA_COLLECTIONS_SKEY'];\r\n rowData.sort((a, b) => { return a['DATA_COLLECTIONS_SKEY'] - b['DATA_COLLECTIONS_SKEY'] }) // binary search work with sorted array only\r\n var rowIdx = binarySearchIndex(rowData, skey, 'DATA_COLLECTIONS_SKEY')\r\n rowData[rowIdx] = { ...rowData[rowIdx], ...row };\r\n\r\n for (var idx = 0; idx < filteredRows.length; idx++) {\r\n if (filteredRows[idx]['DATA_COLLECTIONS_SKEY'] === row['DATA_COLLECTIONS_SKEY']) {\r\n filteredRows[idx] = { ...filteredRows[idx], ...row };\r\n matched++;\r\n }\r\n\r\n if (matched === spendData.length) {\r\n break;\r\n }\r\n }\r\n }\r\n\r\n matched = 0;\r\n for (var i = 0; i < supplierComments.length; i++) {\r\n const commentRow = supplierComments[i];\r\n const commentSkey = commentRow['DATA_COLLECTIONS_SKEY'];\r\n rowData.sort((a, b) => { return a['DATA_COLLECTIONS_SKEY'] - b['DATA_COLLECTIONS_SKEY'] }) // binary search work with sorted array only\r\n var rowIdx = binarySearchIndex(rowData, commentSkey, 'DATA_COLLECTIONS_SKEY')\r\n rowData[rowIdx] = { ...rowData[rowIdx], ...commentRow };\r\n for (var idx = 0; idx < filteredRows.length; idx++) {\r\n if (filteredRows[idx]['DATA_COLLECTIONS_SKEY'] === commentRow['DATA_COLLECTIONS_SKEY']) {\r\n filteredRows[idx] = { ...filteredRows[idx], ...commentRow };\r\n matched++;\r\n }\r\n if (matched === supplierComments.length) {\r\n break;\r\n }\r\n }\r\n }\r\n\r\n matched = 0;\r\n for (var i = 0; i < flightPlanningData.length; i++) {\r\n const flightPlanningRow = flightPlanningData[i];\r\n const flightPlanningRowSkey = flightPlanningRow['DATA_COLLECTIONS_SKEY'];\r\n rowData.sort((a, b) => { return a['DATA_COLLECTIONS_SKEY'] - b['DATA_COLLECTIONS_SKEY'] }) // binary search work with sorted array only\r\n var rowIdx = binarySearchIndex(rowData, flightPlanningRowSkey, 'DATA_COLLECTIONS_SKEY')\r\n rowData[rowIdx] = { ...rowData[rowIdx], ...flightPlanningRow };\r\n for (var idx = 0; idx < filteredRows.length; idx++) {\r\n if (filteredRows[idx]['DATA_COLLECTIONS_SKEY'] === flightPlanningRow['DATA_COLLECTIONS_SKEY']) {\r\n filteredRows[idx] = { ...filteredRows[idx], ...flightPlanningRow };\r\n matched++;\r\n }\r\n if (matched === flightPlanningData.length) {\r\n break;\r\n }\r\n }\r\n }\r\n\r\n this.props.defineScopeLoading(false)\r\n this.props.pendingChanges(null)\r\n\r\n if (spendData.length > 0) {\r\n this.props.setResultSummaryDetails([])\r\n this.props.setTopDetails([])\r\n }\r\n this.setState({ confirmedflagTrans: {}, cleanIndustryOverrides: {}, capIQIdOverrides: {}, enablementWaveOverrides: {}, filteredRows: filteredRows, rowData: rowData, pendingRecords: [], errorRecords: [], warningRecords: [], exclusionReason_directSpendUpdates: [], responseMsg: 'Record/s has been updated successfully', isError: 'No', isLoading: false, isSaveInProgress: false },\r\n () => this.filteredColumnValues = [])\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isLoading: false, isSaveInProgress: false })\r\n }\r\n })\r\n }\r\n\r\n /* This method can be used to highlight the cell values */\r\n RowRenderer = ({ renderBaseRow, ...props }) => {\r\n if (props.row.superHeader && Object.keys(props.row.superHeader).length > 0) {\r\n const value = props.row.superHeader\r\n let left = 0\r\n let headerGroupDiv = Object.keys(value).map((key, index) => {\r\n const val = value[key]\r\n let row = {}\r\n if (val.name === null) {\r\n let cellValue = ({'Download Vendor Upload Files'}
\r\n \r\n this.handleWaveChange(value)}\r\n options={this.state.wave}\r\n display=\"chip\"\r\n />\r\n
\r\n {'Select a wave'}
\r\n \r\n
\r\n \r\n
)\r\n\r\n left = left + val.width\r\n\r\n return cellValue\r\n } else {\r\n let width = 0\r\n val.forEach(item => {\r\n width = width + item.width\r\n })\r\n // const width = val.length * val.width\r\n let cellValue = (\r\n
\r\n \r\n
)\r\n\r\n val.forEach(item => {\r\n left = left + item.width\r\n })\r\n\r\n return cellValue\r\n }\r\n })\r\n\r\n return \r\n {key}\r\n
\r\n {headerGroupDiv}
\r\n }\r\n\r\n\r\n if (this.state.pendingRecords.length === 0) {\r\n return renderBaseRow(props);\r\n }\r\n\r\n let backgroundColor = '';\r\n let textAlign = 'left';\r\n\r\n const pendingRecords = this.state.pendingRecords;\r\n const warningRecords = this.state.warningRecords;\r\n const errorRecords = this.state.errorRecords;\r\n\r\n Object.values(pendingRecords).every((item) => {\r\n if (item === props.row.DATA_COLLECTIONS_SKEY) {\r\n backgroundColor = 'lightgray'\r\n return false\r\n } else {\r\n return true\r\n }\r\n })\r\n\r\n Object.values(warningRecords).forEach((itemArr) => {\r\n itemArr.every(item => {\r\n if (item === props.row.DATA_COLLECTIONS_SKEY) {\r\n backgroundColor = 'yellow'\r\n return false\r\n } else {\r\n return true\r\n }\r\n })\r\n })\r\n\r\n Object.values(errorRecords).forEach((itemArr) => {\r\n itemArr.every(item => {\r\n if (item === props.row.DATA_COLLECTIONS_SKEY) {\r\n backgroundColor = 'red'\r\n return false\r\n } else {\r\n return true\r\n }\r\n })\r\n })\r\n\r\n return {renderBaseRow(props)}
;\r\n\r\n };\r\n \r\n\r\n componentDidMount() {\r\n this.props.defineScopeLoading(true)\r\n let matchAndClassificationColumnsFlag = this.props.user.user.applicationFeatures.findIndex(a => a.Action === 'exportMatchAndClassificationColumns') > -1 ? true : false\r\n this.loadData();\r\n this.loadVendorData()\r\n // if(this.props.spendDetails.currentActiveRequest.DMC_ID !== undefined && this.state.rowData.length == 0){\r\n // this.loadVendorData()\r\n // } \r\n\r\n let fileExportOption = this.props.spendDetails.currentActiveRequest.Number_Of_Records > downloadThreshold ? 'customerViewColumnsCSV' : 'customerViewColumns';\r\n \r\n window.scrollTo(0, 0);\r\n this.setState({ exportAction : fileExportOption , exportMC_Cloumns: matchAndClassificationColumnsFlag, isCapIQLicesend: this.props.user.user.applicationFeatures.findIndex(a => a.Action === this.props.content.capIQAction) > -1 ? true : false })\r\n }\r\n\r\n getApplicationFeatureActions() {\r\n let actions = [];\r\n let applicationFeatures = this.props.user && this.props.user.user && this.props.user.user.applicationFeatures ? this.props.user.user.applicationFeatures : [];\r\n applicationFeatures.map(applicationFeat => {\r\n actions.push(applicationFeat.Action);\r\n })\r\n return actions;\r\n }\r\n\r\n getTableColumn(self, fieldName, fieldConfig) {\r\n let tableColumn = {};\r\n tableColumn = {\r\n name: fieldConfig.screen_field_name,\r\n key: fieldName,\r\n width: 120,\r\n sortable: true,\r\n editable: fieldConfig.is_editable !== 'No',\r\n resizable: true,\r\n filterable: true,\r\n screenSeq: fieldConfig.screen_seq,\r\n editProperty: fieldConfig.is_editable,\r\n formatter: formatter(fieldConfig.alignment),\r\n filterRenderer: filterRenderer(fieldConfig.filter_type),\r\n helpText: fieldConfig.screen_help_text,\r\n hash: (new Date).getTime(),\r\n headerGroup: fieldConfig.headerGroup,\r\n label: fieldConfig.excel_col_name\r\n }\r\n\r\n if (fieldConfig.editor) {\r\n tableColumn.editor = editorComponent(fieldConfig.editor, fieldConfig.editorValues);\r\n }\r\n\r\n if (fieldName == 'OVERRIDE_INDUSTRY_ID') {\r\n tableColumn.editProperty = 'Yes'\r\n tableColumn.events = {\r\n onDoubleClick: function (ev, args) {\r\n if (args.rowIdx > 1)\r\n self.setState({ open: true, industryOverrideRowNo: args.rowIdx })\r\n }\r\n }\r\n }\r\n else if (fieldName == 'CAPIQ_COMPANY_ID') {\r\n tableColumn.editProperty = 'Yes'\r\n tableColumn.events = {\r\n onDoubleClick: function (ev, args) {\r\n //console.log(\"double click id \",self.state.filteredRows[(self.state.paginatedRowFrom + args.rowIdx) - 1]['CAPIQ_COMPANY_ID'])\r\n var capIqId = self.state.filteredRows[(self.state.paginatedRowFrom + args.rowIdx) - 2]['CAPIQ_COMPANY_ID'];\r\n var scopeSource = self.state.filteredRows[(self.state.paginatedRowFrom + args.rowIdx) - 2]['SCOPE_SOURCE'];\r\n var finalIndustryDesc = self.state.filteredRows[(self.state.paginatedRowFrom + args.rowIdx) - 2]['FINAL_INDUSTRY_DESCRIPTION'];\r\n var dmcIndustryId = self.state.filteredRows[(self.state.paginatedRowFrom + args.rowIdx) - 2]['DMC_INDUSTRY_ID']; // DMC_INDUSTRY_ID value is not overrided when we overried unclassified industry, so we can use this flag while opening capiq popup\r\n if (args.rowIdx != 0)\r\n self.setState({ openCapIq: true, capIqIdOverrideRowNo: args.rowIdx, currentCapIqId: capIqId, currentScopeSource: scopeSource, industryDesc: finalIndustryDesc, currentDMCIndstryId: dmcIndustryId })\r\n }\r\n }\r\n }\r\n else if (fieldName == 'VENDOR_NAME' && self.state.isCapIQLicesend) {\r\n tableColumn['formatter'] = VendorLinkFormatter\r\n }\r\n else if (fieldName == 'FINAL_INDUSTRY_DESCRIPTION' && self.state.isCapIQLicesend) {\r\n tableColumn['formatter'] = IndustryLinkFormatter\r\n }\r\n else if (fieldName == 'USER_COMMENT') {\r\n tableColumn.editable = true\r\n tableColumn.editProperty = 'Yes'\r\n tableColumn.events = {\r\n onDoubleClick: function (ev, args) {\r\n var skey = self.state.filteredRows[(self.state.paginatedRowFrom + args.rowIdx) - 2]['DATA_COLLECTIONS_SKEY'];\r\n var userComment = self.state.filteredRows[(self.state.paginatedRowFrom + args.rowIdx) - 2]['USER_COMMENT'];\r\n if (args.rowIdx != 0)\r\n self.setState({ selectedSupplier: skey, openUserCommentsPopUp: true, userCommentsRowNo: args.rowIdx, userCommentInsideCell: userComment })\r\n }\r\n }\r\n } else if (fieldName == 'ENABLEMENT_WAVE') {\r\n tableColumn.editProperty = 'Yes'\r\n tableColumn.events = {\r\n onDoubleClick: function (ev, args) {\r\n if (args.rowIdx != 0)\r\n self.setState({ openEnablementInsightPopUp: true, enablementWaveInputRowNo: args.rowIdx, enablementWaveInputValue: ev.target.innerText })\r\n }\r\n }\r\n }\r\n\r\n if (fieldConfig.field == 'SAP_ARIBA_BUY_ENABLE_MTHD_RECMD') {\r\n tableColumn[\"width\"] = 380\r\n }\r\n\r\n if (fieldConfig.field == 'GANTT_CHART_WORKSTREAM_NAME') {\r\n tableColumn[\"width\"] = 250\r\n }\r\n\r\n if (fieldConfig.field == 'BUYER_SUPPLIER_RELATIONSHIP') {\r\n tableColumn[\"editor\"] = TextEditor\r\n tableColumn[\"max\"] = 50\r\n }\r\n tableColumn.editable = tableColumn.editable && !this.props.readOnly\r\n\r\n return tableColumn;\r\n }\r\n\r\n breakNumberInSet(number, n) {\r\n const values = [];\r\n let times = number;\r\n while (times > 0) {\r\n if (times >= n)\r\n values.push(n);\r\n else\r\n values.push(times);\r\n times = times - n;\r\n }\r\n return values;\r\n }\r\n\r\n getSpendData = (recordNumber, index) => {\r\n return new Promise((resolve, reject) => {\r\n this.props.getDetailedFileSpendData(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID,\r\n this.props.user.user.Email, recordNumber, index)\r\n .then((response) => {\r\n // console.log(index);\r\n // console.log(response.data.Result);\r\n return resolve(response.data.Result)\r\n })\r\n .catch(error => {\r\n return reject(error.message)\r\n })\r\n })\r\n }\r\n\r\n async loadData() { \r\n // console.log('Load Start');\r\n // console.log(+ new Date().getDate() + '/' + new Date().getMonth() + '/' + new Date().getFullYear() + '- ' + new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds());\r\n let recordsPerSet = 40000;\r\n this.props.defineScopeLoading(true)\r\n this.setState({ finalSpendData: [],vufData : [], isLoading: true, responseMsg: '', isError: 'No' })\r\n // let firstRoundTrip = 1; let secondRoundTrip = 2;\r\n let requestFileRecordCount = this.props.spendDetails.currentActiveRequest.Number_Of_Records;\r\n\r\n let arrRecords = this.breakNumberInSet(requestFileRecordCount, recordsPerSet);\r\n let finalSpendData = [];\r\n let vufWaves = [];\r\n var procedureResult = [];\r\n var procedureNames;\r\n var procedureNextResult = [];\r\n let j = 0;\r\n\r\n //-----------------------\r\n\r\n //let results = [];\r\n let promises = [];\r\n //let param;\r\n\r\n for (j; j < arrRecords.length; j++) {\r\n\r\n let param = { 'page': j }\r\n let tmpPromise = this.getSpendData(arrRecords[j], j);\r\n promises.push(tmpPromise);\r\n\r\n }\r\n let resolved = await Promise.all(promises).then((arrayOfArrays) => {\r\n return [].concat.apply([], arrayOfArrays);\r\n });\r\n //resolved is an array of resolved promises, each with value returned by async call\r\n let indivResult = resolved.forEach((response, index) => {\r\n // console.log('resolve ' + index + ' start');\r\n // console.log(+ new Date().getDate() + '/' + new Date().getMonth() + '/' + new Date().getFullYear() + '- ' + new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds());\r\n\r\n if (index == 0) {\r\n //var procedureResult = [];\r\n procedureNames = Object.keys(response)\r\n for (var i = 0; i < procedureNames.length; i++) {\r\n procedureResult.push(response[procedureNames[i]])\r\n }\r\n finalSpendData = response[procedureNames[0]]\r\n for (var i = 1; i < procedureResult.length; i++) {\r\n finalSpendData = mergeArrayByKey(finalSpendData, procedureResult[i], 'DATA_COLLECTIONS_SKEY')\r\n }\r\n let waves = finalSpendData.filter(item => Number.isInteger(Number(item.ENABLEMENT_WAVE)))\r\n //let vufWaves = []\r\n waves.forEach(item => vufWaves.push(item.ENABLEMENT_WAVE))\r\n }\r\n else {\r\n\r\n procedureNextResult = [];\r\n for (var i = 0; i < procedureNames.length; i++) {\r\n procedureNextResult.push(response[procedureNames[i]])\r\n }\r\n var remainingSpendData = response[procedureNames[0]]\r\n for (var i = 1; i < procedureNextResult.length; i++) {\r\n remainingSpendData = mergeArrayByKey(remainingSpendData, procedureNextResult[i], 'DATA_COLLECTIONS_SKEY')\r\n }\r\n finalSpendData = [...finalSpendData, ...remainingSpendData]\r\n remainingSpendData = null;\r\n //this.setState({ finalSpendData: finalSpendData, vufWaves: vufWaves }, () => this.formatSpendData())\r\n // console.log('resolve ' + index + ' end');\r\n // console.log(+ new Date().getDate() + '/' + new Date().getMonth() + '/' + new Date().getFullYear() + '- ' + new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds());\r\n\r\n }\r\n });\r\n // console.log('API END');\r\n // console.log(+ new Date().getDate() + '/' + new Date().getMonth() + '/' + new Date().getFullYear() + '- ' + new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds());\r\n finalSpendData = finalSpendData.sort((a, b) => a.DATA_COLLECTIONS_SKEY - b.DATA_COLLECTIONS_SKEY);\r\n // console.log('SORT END');\r\n // console.log(+ new Date().getDate() + '/' + new Date().getMonth() + '/' + new Date().getFullYear() + '- ' + new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds());\r\n this.setState({ finalSpendData: finalSpendData, vufWaves: vufWaves }, () => this.formatSpendData());\r\n finalSpendData = [];\r\n vufWaves = [];\r\n procedureResult = [];\r\n procedureNextResult = [];\r\n resolved = null;\r\n // console.log('Set State End');\r\n // console.log(+ new Date().getDate() + '/' + new Date().getMonth() + '/' + new Date().getFullYear() + '- ' + new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds());\r\n }\r\n\r\n openNdlPopUp(){\r\n this.setState({exportAction : 'matchedOutputDemo' },this.showModal('ndlAlert'));\r\n }\r\n\r\n openDownloadPopup(){\r\n var exportAction = this.state.exportAction === 'matchedOutputDemo' ? 'customerViewColumns' : this.state.exportAction;\r\n this.setState({exportAction : exportAction },this.showModal('alert'));\r\n }\r\n\r\n ndlDownload() {\r\n\r\n this.props.getNdlColumnsConfiguration().then((response) => {\r\n const colConfig = response.data.Result;\r\n const colConfigArr = [];\r\n var ndlColumns = [];\r\n colConfig.forEach((item, index) => {\r\n for (var key in item) {\r\n if (key === 'field') {\r\n //colConfigArr[item[key]] = item;\r\n ndlColumns.push({ label: item.excel_col_name, key: item.field, seq: item.screen_seq, filter_type: item.filter_type, alignment: item.alignment })\r\n break;\r\n }\r\n }\r\n })\r\n\r\n var detail = { DMCID: this.props.spendDetails.currentActiveRequest.DMC_ID, VSID: this.props.spendDetails.currentActiveRequest.VS_ID, Email: this.props.user.user.Id }\r\n this.props.getNdlReportData(detail).then((response) => {\r\n var ndlData = response.data.Result;\r\n this.setState({ndlColumns: ndlColumns, ndlData: ndlData }, this.handleClick())\r\n });\r\n });\r\n }\r\n\r\n\r\n formatSpendData() {\r\n this.props.getSpendColumnsConfiguration()\r\n .then((response) => {\r\n const colConfig = response.data.Result;\r\n const colConfigArr = [];\r\n colConfig.forEach((item, index) => {\r\n for (var key in item) {\r\n if (key === 'field') {\r\n colConfigArr[item[key]] = item;\r\n break;\r\n }\r\n }\r\n })\r\n this.setState({ responseMsg: '', isError: 'No' })\r\n var self = this;\r\n let selectedColumns = [];\r\n\r\n this.props.getSelectedColumn(this.props.spendDetails.currentActiveRequest.DMC_ID, this.props.spendDetails.currentActiveRequest.VS_ID, this.props.user.user.Id).then((colResponse) => {\r\n selectedColumns = colResponse.data.Result;\r\n\r\n var column = [];\r\n for (var i = 0; i < this.state.finalSpendData.length; i++) {\r\n column = Object.keys(this.state.finalSpendData[0]);\r\n\r\n if (i === 0)\r\n break;\r\n }\r\n\r\n //removed INDUSTRY_SCOPE_TYPE temporarily\r\n const fieldIdx = column.indexOf('INDUSTRY_SCOPE_TYPE')\r\n if (fieldIdx != -1) {\r\n column.splice(fieldIdx, 1)\r\n }\r\n if (column.indexOf('VS_ID') != -1) {\r\n column.splice(column.indexOf('VS_ID'), 1)\r\n }\r\n if (column.indexOf('DMC_ID') != -1) {\r\n column.splice(column.indexOf('DMC_ID'), 1)\r\n }\r\n\r\n if (column.length === 0) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ responseMsg: this.props.content.noData, isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n var finalColumn = [];\r\n var colOptions = [];\r\n var exportNonSensitiveColumns = [];\r\n var exportEnablementInsightColumns = [];\r\n var exportMatchAndClassificationColumns = [];\r\n var exportCustomerViewColumns = [];\r\n var exportAllColumns = [];\r\n var tableColumn = {};\r\n var defaultScreenColumns = [];\r\n var userDefinedColumns = [];\r\n\r\n for (let index = 0; index < column.length; index++) {\r\n const fieldName = column[index];\r\n\r\n const fieldConfig = colConfigArr[fieldName];\r\n if (!fieldConfig) {\r\n this.setState({ responseMsg: 'Invalid Field Configuration: ' + fieldName, isError: 'Yes' })\r\n return;\r\n }\r\n tableColumn = this.getTableColumn(self, fieldName, fieldConfig);\r\n tableColumn.filter_type = fieldConfig.filter_type;\r\n tableColumn.alignment = fieldConfig.alignment;\r\n finalColumn.push(tableColumn);\r\n \r\n //if (fieldConfig.export_fl === 'Yes' || (fieldConfig.internalEnablementInsightView === 'Yes' && fieldConfig.enablementInsight_export === 'Yes')) {\r\n if (fieldConfig.is_default === 'Yes' || (fieldConfig.internalEnablementInsightView === 'Yes')) {\r\n exportNonSensitiveColumns.push({ label: fieldConfig.excel_col_name, key: fieldName, seq: fieldConfig.screen_seq,filter_type : fieldConfig.filter_type, alignment:fieldConfig.alignment })\r\n }\r\n if (fieldConfig.enablementInsight_export === 'Yes') {\r\n exportEnablementInsightColumns.push({ label: fieldConfig.excel_col_name, key: fieldName, seq: fieldConfig.screen_seq,filter_type : fieldConfig.filter_type, alignment:fieldConfig.alignment })\r\n }\r\n if (fieldConfig.matchAndClassification_export === 'Yes') {\r\n exportMatchAndClassificationColumns.push({ label: fieldConfig.excel_col_name, key: fieldName, seq: fieldConfig.screen_seq,filter_type : fieldConfig.filter_type, alignment:fieldConfig.alignment })\r\n }\r\n if (fieldConfig.customerView_export === 'Yes') {\r\n exportCustomerViewColumns.push({ label: fieldConfig.excel_col_name, key: fieldName, seq: fieldConfig.screen_seq,filter_type : fieldConfig.filter_type, alignment:fieldConfig.alignment })\r\n } \r\n var self = this;\r\n if (self.props.user.userprofile.Roles[0].indexOf(\"Export All_Spend Details\") > -1) {\r\n exportAllColumns.push({ label: fieldConfig.excel_col_name, key: fieldName, seq: fieldConfig.screen_seq,filter_type : fieldConfig.filter_type, alignment:fieldConfig.alignment })\r\n }\r\n\r\n let colOption = { id: fieldName, label: fieldConfig.screen_field_name, seq: fieldConfig.screen_seq, columnCategory: fieldConfig.column_category, value: tableColumn, is_default: fieldConfig.is_default, internalEnablementInsightView: fieldConfig.internalEnablementInsightView, externalEnablementInsightView: fieldConfig.externalEnablementInsightView, categoryInsightsView: fieldConfig.categoryInsightsView, enterpriseEnablementEstimatesView: fieldConfig.enterpriseEnablementEstimatesView, matchAndClassification_export: fieldConfig.matchAndClassification_export , sccEnableInsightView : fieldConfig.SccEnableInsightView , sccView : fieldConfig.SccView,allSccView : fieldConfig.allSccView };\r\n if (selectedColumns.length > 0) {\r\n if (selectedColumns.indexOf(fieldName) > -1) {\r\n defaultScreenColumns.push(tableColumn);\r\n colOption.isSelected = true;\r\n } else {\r\n colOption.isSelected = false;\r\n }\r\n } else {\r\n defaultScreenColumns.push(tableColumn);\r\n colOption.isSelected = true;\r\n }\r\n\r\n colOptions.push(colOption);\r\n }\r\n\r\n // add Update flag\r\n userDefinedColumns.push({ label: \"Update Flag\", key: \"isUserDefinedRowUpdated\", seq: column.length + 1 })\r\n\r\n //Sequence of columns in Grid\r\n if (defaultScreenColumns.length > 0)\r\n defaultScreenColumns = defaultScreenColumns.sort((a, b) => { return a.screenSeq - b.screenSeq })\r\n //Sequence of columns in popup\r\n if (colOptions.length > 0)\r\n colOptions = colOptions.sort((a, b) => { return a.seq - b.seq })\r\n //Sequence of columns in Excel\r\n if (exportNonSensitiveColumns.length > 0)\r\n exportNonSensitiveColumns = exportNonSensitiveColumns.sort((a, b) => { return a.seq - b.seq })\r\n if (exportEnablementInsightColumns.length > 0)\r\n exportEnablementInsightColumns = exportEnablementInsightColumns.sort((a, b) => { return a.seq - b.seq })\r\n if (exportMatchAndClassificationColumns.length > 0)\r\n exportMatchAndClassificationColumns = exportMatchAndClassificationColumns.sort((a, b) => { return a.seq - b.seq })\r\n if (exportCustomerViewColumns.length > 0)\r\n exportCustomerViewColumns = exportCustomerViewColumns.sort((a, b) => { return a.seq - b.seq }) \r\n if (exportAllColumns.length > 0) {\r\n exportAllColumns = exportAllColumns.sort((a, b) => { return a.seq - b.seq })\r\n }\r\n\r\n var finalRows = [];\r\n var finalFilteredRows = [];\r\n let isColumnEmpty = {}\r\n for (let rowindex = 0; rowindex < this.state.finalSpendData.length; rowindex++) {\r\n var row = { isCapIQLicesend: self.state.isCapIQLicesend, isUserDefinedRowUpdated: 'No' };\r\n var combineVendorDetails = '';\r\n var combineIndustryDetails = '';\r\n for (let Cindex = 0; Cindex < finalColumn.length; Cindex++) {\r\n const element = finalColumn[Cindex];\r\n\r\n var item = element[\"key\"]\r\n var itemVal = this.state.finalSpendData[rowindex][item] === null ? '' : this.state.finalSpendData[rowindex][item];\r\n\r\n isColumnEmpty[item] = isColumnEmpty[item] !== undefined ? isColumnEmpty[item] && itemVal === '' : itemVal === ''\r\n row[item] = itemVal;\r\n }\r\n finalRows.push(row);\r\n }\r\n\r\n let emptyColumns = []\r\n\r\n Object.keys(isColumnEmpty).forEach(key => {\r\n if (isColumnEmpty[key] &&\r\n selectedColumns.indexOf(key) === -1 &&\r\n !(['EXCLUSION_REASON', 'OVERRIDE_INDUSTRY_ID', 'DIRECT_SPEND', 'USER_COMMENT'].includes(key))) {\r\n emptyColumns.push(key)\r\n }\r\n })\r\n\r\n for (const key of emptyColumns) {\r\n let idx = defaultScreenColumns.findIndex(item => {\r\n return item.key === key\r\n })\r\n\r\n if (idx !== -1) {\r\n defaultScreenColumns.splice(idx, 1);\r\n }\r\n\r\n idx = colOptions.findIndex(item => {\r\n return item.id === key\r\n })\r\n\r\n if (idx !== -1) {\r\n colOptions[idx].isSelected = false;\r\n }\r\n }\r\n\r\n //Create a summation row\r\n let summationArray = this.sum(finalRows, defaultScreenColumns);\r\n if(this.props.spendDetails.kpi_Model == 1)\r\n finalRows.sort((a, b) => { return b['AVATAR_WAVE_SCORE'] - a['AVATAR_WAVE_SCORE'] });\r\n else\r\n finalRows.sort((a, b) => { return b['KPI_ENABLE_MATCH_SPD_DOC_SCORE'] - a['KPI_ENABLE_MATCH_SPD_DOC_SCORE'] });\r\n //finalRows.sort((a, b) => { return a['DATA_COLLECTIONS_SKEY'] - b['DATA_COLLECTIONS_SKEY'] })\r\n finalFilteredRows = [...finalRows]\r\n\r\n exportNonSensitiveColumns.sort((a, b) => {\r\n var seq1 = isNaN(a.screenSeq) ? 9999 : a.screenSeq;\r\n var seq2 = isNaN(b.screenSeq) ? 9999 : b.screenSeq;\r\n return seq1 - seq2\r\n })\r\n exportEnablementInsightColumns.sort((a, b) => {\r\n var seq1 = isNaN(a.screenSeq) ? 9999 : a.screenSeq;\r\n var seq2 = isNaN(b.screenSeq) ? 9999 : b.screenSeq;\r\n return seq1 - seq2\r\n })\r\n exportMatchAndClassificationColumns.sort((a, b) => {\r\n var seq1 = isNaN(a.screenSeq) ? 9999 : a.screenSeq;\r\n var seq2 = isNaN(b.screenSeq) ? 9999 : b.screenSeq;\r\n return seq1 - seq2\r\n })\r\n exportCustomerViewColumns.sort((a, b) => {\r\n var seq1 = isNaN(a.screenSeq) ? 9999 : a.screenSeq;\r\n var seq2 = isNaN(b.screenSeq) ? 9999 : b.screenSeq;\r\n return seq1 - seq2\r\n }) \r\n exportAllColumns.sort((a, b) => {\r\n var seq1 = isNaN(a.screenSeq) ? 9999 : a.screenSeq;\r\n var seq2 = isNaN(b.screenSeq) ? 9999 : b.screenSeq;\r\n return seq1 - seq2\r\n })\r\n\r\n\r\n var pageCount = finalRows.length / this.state.perPage\r\n this.originalColumns = cloneDeep(colOptions);\r\n\r\n const headerToColumn = this.getHeaderGroups(defaultScreenColumns)\r\n\r\n this.props.defineScopeLoading(false)\r\n\r\n this.setState({\r\n exportNonSensitiveColumns: exportNonSensitiveColumns, exportEnablementInsightColumns: exportEnablementInsightColumns, exportMatchAndClassificationColumns: exportMatchAndClassificationColumns,exportCustomerViewColumns : exportCustomerViewColumns, exportAllColumns: exportAllColumns, columns: colOptions, columnDefs: defaultScreenColumns,\r\n rowData: finalRows, filteredRows: finalFilteredRows, pageCount: pageCount, isError: 'No',\r\n isLoading: false, summationArray: summationArray, filteredSummationArray: { ...summationArray },\r\n userSelectedColumns: selectedColumns, finalColumn: finalColumn, headerToColumn: headerToColumn, userDefinedColumns: userDefinedColumns\r\n }, selectedColumns.length == 0 ? this.onColumnSelection(\"ExternalEnablementInsightView\") : null)// default load enablement insight view\r\n }\r\n });\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n this.props.defineScopeLoading(false)\r\n this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n }\r\n })\r\n }\r\n\r\n hideEmptyColumns() {\r\n let isColumnEmpty = {}\r\n const rowData = this.state.rowData;\r\n const columns = this.state.columns;\r\n const defaultScreenColumns = []\r\n\r\n for (let rowindex = 0; rowindex < rowData.length; rowindex++) {\r\n for (let Cindex = 0; Cindex < columns.length; Cindex++) {\r\n const element = columns[Cindex];\r\n\r\n var item = element[\"id\"]\r\n var itemVal = rowData[rowindex][item]\r\n\r\n isColumnEmpty[item] = isColumnEmpty[item] !== undefined ? isColumnEmpty[item] && itemVal === '' : itemVal === ''\r\n }\r\n }\r\n\r\n let emptyColumns = []\r\n\r\n Object.keys(isColumnEmpty).forEach(key => {\r\n if (isColumnEmpty[key] &&\r\n !(['EXCLUSION_REASON', 'OVERRIDE_INDUSTRY_ID', 'DIRECT_SPEND', 'USER_COMMENT'].includes(key))) {\r\n emptyColumns.push(key)\r\n }\r\n })\r\n\r\n columns.forEach(item => {\r\n let idx = emptyColumns.findIndex(key => {\r\n return item.id === key\r\n })\r\n\r\n if (idx !== -1) {\r\n item.isSelected = false;\r\n } else {\r\n defaultScreenColumns.push(item.value)\r\n item.isSelected = true;\r\n }\r\n })\r\n\r\n this.originalColumns = cloneDeep(columns);\r\n\r\n return { columns: columns, defaultColumns: defaultScreenColumns }\r\n }\r\n\r\n sortFilteredRows = (filteredRows) => {\r\n if (!this.sortedColumns) {\r\n return filteredRows\r\n }\r\n\r\n var comparerAsc = (sortColumn) => (a, b) => {\r\n return (a[sortColumn] > b[sortColumn]) ? 1 : -1;\r\n }\r\n\r\n var comparerDesc = (sortColumn) => (a, b) => {\r\n return (a[sortColumn] < b[sortColumn]) ? 1 : -1;\r\n }\r\n\r\n this.sortedColumns.forEach((item) => {\r\n let sortColumn = item.key;\r\n let sortDirection = item.direction\r\n if (sortDirection === 'NONE') {\r\n return\r\n }\r\n\r\n var comparer = comparerAsc(sortColumn);\r\n if (sortDirection === 'DESC') {\r\n comparer = comparerDesc(sortColumn)\r\n }\r\n\r\n\r\n filteredRows.sort(comparer);\r\n })\r\n\r\n return filteredRows;\r\n };\r\n\r\n sortRows = (sortColumn, sortDirection) => {\r\n if (!this.sortedColumns) {\r\n this.sortedColumns = []\r\n }\r\n\r\n let rowIdx = this.sortedColumns.findIndex((item) => {\r\n return item.key === sortColumn\r\n })\r\n\r\n if (rowIdx !== -1) {\r\n this.sortedColumns.splice(rowIdx, 1);\r\n }\r\n\r\n this.sortedColumns.push({ key: sortColumn, direction: sortDirection })\r\n\r\n if (sortDirection === 'NONE') {\r\n return\r\n }\r\n\r\n var comparer = function (a, b) {\r\n if (sortDirection === 'ASC') {\r\n return (a[sortColumn] > b[sortColumn]) ? 1 : -1;\r\n } else if (sortDirection === 'DESC') {\r\n return (a[sortColumn] < b[sortColumn]) ? 1 : -1;\r\n }\r\n }\r\n\r\n var filteredRows = this.state.filteredRows;\r\n let firstRow = {}\r\n var rows = sortDirection === 'NONE' ? filteredRows : filteredRows.sort(comparer);\r\n\r\n this.sortColumn = sortColumn;\r\n var pageCount = rows.length / this.state.perPage\r\n this.setState({ filteredRows: [] }, () => this.setState({ filteredRows: rows }))\r\n };\r\n\r\n handlePageClick = data => {\r\n let selected = data.selected;\r\n let offset = Math.ceil(selected * this.state.perPage);\r\n this.setState({ paginatedRowFrom: offset, paginatedRowTo: (offset + this.state.perPage) });\r\n };\r\n\r\n handleFilterChange(filter) {\r\n var rows = [...this.state.rowData];\r\n this.props.detailedFileFilterText(filter)\r\n let newFilters = { ...this.state.filters };\r\n if (filter === null || filter.filterTerm == null) {\r\n this.setState({ filters: null, filteredRows: rows }, this.getRows(rows, {}))\r\n return;\r\n\r\n } else if (filter.filterTerm) {\r\n newFilters[filter.column.key] = filter;\r\n } else {\r\n delete newFilters[filter.column.key];\r\n }\r\n\r\n this.props.detailedFileFilters(newFilters)\r\n this.setState({ filters: newFilters }, this.getRows(rows, newFilters))\r\n\r\n return newFilters;\r\n };\r\n\r\n getValidFilterValues(columnId) {\r\n var rows = this.state.rowData\r\n var isFilterVisible = this.state.isFilterVisible\r\n this.filteredColumnValues = this.filteredColumnValues ? this.filteredColumnValues : []\r\n if (this.filteredColumnValues[columnId] === undefined) {\r\n var rows_filter = [...new Set(rows.map(item => item[columnId] != null ? item[columnId] : \"\"))]\r\n rows_filter.splice(0, 0, 'Not Included')\r\n this.filteredColumnValues[columnId] = rows_filter\r\n return rows_filter\r\n } else {\r\n return this.filteredColumnValues[columnId]\r\n }\r\n }\r\n\r\n getRows(rows, filters, node) {\r\n let normalFilters = {}\r\n let globalFilters = {}\r\n for (const [key, value] of Object.entries(filters)) {\r\n if (value.type === 'global') {\r\n globalFilters[key] = value\r\n delete filters[key]\r\n }\r\n }\r\n\r\n let hasNormalFilters = Object.values(filters).length > 0\r\n let hasGlobalFilters = Object.values(globalFilters).length > 0\r\n\r\n let filteredRowsTemp = []\r\n //let globalFilters = Object.values(filters).filter(filter => filter.type === 'global')\r\n\r\n\r\n Object.values(globalFilters).forEach(filter => {\r\n filter.filteredRows.forEach(filteredRow => {\r\n let idx = filteredRowsTemp.findIndex(row => {\r\n return row['DATA_COLLECTIONS_SKEY'] === filteredRow['DATA_COLLECTIONS_SKEY']\r\n })\r\n\r\n if (idx === -1) {\r\n filteredRowsTemp.push(filteredRow)\r\n }\r\n })\r\n })\r\n\r\n let filteredRows = []\r\n if (hasNormalFilters && hasGlobalFilters) {\r\n rows = filteredRowsTemp\r\n filteredRows = selectors.getRows({ rows, filters })\r\n }\r\n else if (!hasNormalFilters && hasGlobalFilters)\r\n filteredRows = filteredRowsTemp\r\n else if (hasNormalFilters && !hasGlobalFilters)\r\n filteredRows = selectors.getRows({ rows, filters })\r\n else\r\n filteredRows = rows\r\n\r\n filteredRows = this.sortFilteredRows(filteredRows)\r\n var pageCount = filteredRows.length / this.state.perPage;\r\n //Summation row logic\r\n let sum = this.state.summationArray\r\n if (Object.keys(filters).length >= 1) {\r\n sum = this.sum(filteredRows)\r\n }\r\n\r\n for (const [key, value] of Object.entries(globalFilters)) {\r\n filters[key] = value\r\n }\r\n\r\n this.setState({ filteredSummationArray: sum, filteredRows: filteredRows, paginatedRowFrom: 0, paginatedRowTo: this.state.perPage, pageCount: pageCount, filters: filters });\r\n }\r\n\r\n exportCsv() {\r\n const rowData = this.state.rowData;\r\n var self = this;\r\n\r\n let nonSensetiveKeys = this.state.exportNonSensitiveColumns.map(item => { return item.key; });\r\n let enablementKeys = this.state.exportEnablementInsightColumns.map(item => { return item.key; });\r\n let filteredCurrentView = this.state.columnDefs.filter(item => nonSensetiveKeys.includes(item.key) || enablementKeys.includes(item.key));\r\n\r\n const exportData = this.state.exportAction === 'currentViewColumns' ?\r\n filteredCurrentView : this.state.exportAction === 'customerViewColumns' ?\r\n this.state.exportCustomerViewColumns: this.state.exportAction === 'nonSensitiveColumns' ?\r\n this.state.exportNonSensitiveColumns : this.state.exportAction === 'enablementInsightColumns' ?\r\n this.state.exportEnablementInsightColumns : this.state.exportAction === 'matchAndClassificationColumns' ?\r\n this.state.exportMatchAndClassificationColumns : this.state.exportAction === 'matchAndClassificationColumnsCSV' ?\r\n this.state.exportMatchAndClassificationColumns : this.state.exportAction === 'customerViewColumnsCSV' ?\r\n this.state.exportCustomerViewColumns : this.state.exportAllColumns;\r\n\r\n const csvRows = [];\r\n rowData.forEach((item) => {\r\n var row = {}\r\n exportData.forEach((cols) => {\r\n row[cols.key] = item[cols.key]\r\n })\r\n\r\n if (row[\"ENTERPRISE_ESTIM_SUPP_YIELD\"] !== undefined && row[\"ENTERPRISE_ESTIM_SUPP_YIELD\"] !== null && row[\"ENTERPRISE_ESTIM_SUPP_YIELD\"] !== '')\r\n row[\"ENTERPRISE_ESTIM_SUPP_YIELD\"] = row[\"ENTERPRISE_ESTIM_SUPP_YIELD\"] + \"%\"\r\n\r\n csvRows.push(row);\r\n })\r\n\r\n var keys = exportData.map((cols) => {\r\n return cols.key\r\n })\r\n\r\n var headers = exportData.map((cols) => {\r\n return cols.label\r\n })\r\n\r\n const options = {\r\n filename: 'spend',\r\n decimalSeparator: '.',\r\n showLabels: true,\r\n showTitle: false,\r\n useTextFile: false,\r\n keys: keys,\r\n headers: headers\r\n };\r\n\r\n const csvExporter = new ExportToCsv(options);\r\n\r\n var finalRows = [];\r\n var finalFilteredRows = [];\r\n let isColumnEmpty = {}\r\n let finalColumn = this.state.finalColumn;\r\n for (let rowindex = 0; rowindex < csvRows.length; rowindex++) {\r\n var row = { isCapIQLicesend: self.state.isCapIQLicesend };\r\n var combineVendorDetails = '';\r\n var combineIndustryDetails = '';\r\n for (let Cindex = 0; Cindex < finalColumn.length; Cindex++) {\r\n const element = finalColumn[Cindex];\r\n\r\n var item = element[\"key\"]\r\n var itemVal = csvRows[rowindex][item] === null ? '' : csvRows[rowindex][item];\r\n\r\n isColumnEmpty[item] = isColumnEmpty[item] !== undefined ? isColumnEmpty[item] && itemVal === '' : itemVal === ''\r\n row[item] = itemVal;\r\n }\r\n finalRows.push(row);\r\n }\r\n\r\n csvExporter.generateCsv(finalRows);\r\n this.hideModal('alert');\r\n // if (self.props.user.userprofile.Roles[0].indexOf(\"Export All_Spend Details\") > -1)\r\n // this.hideModal('alert');\r\n this.setState({ isSaveInProgress: false, isLoading: false });\r\n }\r\n\r\n initializeColumns(data) {\r\n let columns = []\r\n for (let index = 0; index < data.length; index++) {\r\n const fieldConfig = data[index];\r\n const editableColumns = ExcelUploadColumns.filter(x=>{\r\n return x.field == fieldConfig.key\r\n });\r\n var is_editable = editableColumns.length > 0 ? editableColumns[0].is_editable : \"No\";\r\n \r\n let tableColumn = {\r\n header: fieldConfig.label,\r\n key: fieldConfig.key,\r\n width: fieldConfig.width,\r\n sortable: fieldConfig.sortable,\r\n editable: is_editable,\r\n isNumeric : false,\r\n // isTextWithLengtLimit : fieldConfig.data_type === 'text' && (!!fieldConfig.textLength),\r\n // textLength : fieldConfig.textLength,\r\n screenSeq: fieldConfig.screen_seq,\r\n mandatory: fieldConfig.mandatory === 'Yes',\r\n // exportFl: fieldConfig.export_fl === 'Y',\r\n editProperty: fieldConfig.editable,\r\n helpText: fieldConfig.helpText,\r\n }\r\n columns.push(tableColumn)\r\n }\r\n \r\n return columns;\r\n }\r\n handleClick(){\r\n // var excelButton = document.getElementsByClassName(\"button--accent\")[0].parentNode;\r\n // excelButton.style.display = 'none'; \r\n this.setState({ isLoading: true },this.forceUpdate);\r\n\r\n setTimeout(() => {\r\n //this.exportExcel()\r\n if(this.state.exportAction === 'matchAndClassificationColumnsCSV' || this.state.exportAction === 'customerViewColumnsCSV')\r\n this.exportCsv();\r\n else\r\n this.exportExcel()\r\n }, 2000);\r\n //this.exportExcel()\r\n } \r\n \r\n copyExcelWorkSheet(sheetNumber,sourceWorkBook,targetWorkBook) { \r\n\r\n let sheetToClone = sourceWorkBook.getWorksheet(sheetNumber);\r\n let copySheet = targetWorkBook.addWorksheet(\"Sheet\");\r\n copySheet.model = sheetToClone.model;\r\n copySheet.name = sheetToClone.name;\r\n };\r\n\r\n exportExcel() {\r\n // this.setState({ isLoading: true });\r\n //const rowData1 = this.state.rowData;\r\n var rowData1 = '';\r\n if(this.state.exportAction === 'matchedOutputDemo')\r\n rowData1 = this.state.ndlData;\r\n else\r\n rowData1 = this.state.rowData;\r\n\r\n const rowData = JSON.parse(JSON.stringify(rowData1));\r\n var self = this;\r\n\r\n let nonSensetiveKeys = this.state.exportNonSensitiveColumns.map(item => { return item.key; });\r\n let enablementKeys = this.state.exportEnablementInsightColumns.map(item => { return item.key; });\r\n //let filteredCurrentView = this.state.columnDefs.filter(item => nonSensetiveKeys.includes(item.key) || enablementKeys.includes(item.key));\r\n let filteredCurrentView = this.state.columnDefs;\r\n \r\n const exportData = this.state.exportAction === 'currentViewColumns' ?\r\n filteredCurrentView : this.state.exportAction === 'customerViewColumns' ?\r\n this.state.exportCustomerViewColumns : this.state.exportAction === 'nonSensitiveColumns' ?\r\n this.state.exportNonSensitiveColumns : this.state.exportAction === 'enablementInsightColumns' ?\r\n this.state.exportEnablementInsightColumns : this.state.exportAction === 'matchAndClassificationColumns' ?\r\n this.state.exportMatchAndClassificationColumns : this.state.exportAction === 'matchedOutputDemo' ?\r\n this.state.ndlColumns: this.state.exportAllColumns;\r\n\r\n\r\n var headers = exportData.map((cols) => {\r\n return cols.label\r\n })\r\n\r\n this.setState({ responseMsg: \"\" })\r\n //create new excel work book\r\n \r\n // //add name to sheet\r\n const workSheetName = this.state.exportAction === 'currentViewColumns' ?\r\n 'Current View' : this.state.exportAction === 'customerViewColumns' ?\r\n 'Customer View' : this.state.exportAction === 'nonSensitiveColumns' ?\r\n 'Standard' : this.state.exportAction === 'enablementInsightColumns' ?\r\n 'Enablement Insight' : this.state.exportAction === 'matchAndClassificationColumns' ? \r\n 'M&C Detail' : this.state.exportAction === 'matchedOutputDemo' ?\r\n 'Match Output':'All';\r\n\r\n \r\n\r\n //---------------------Copy Worksheet From Template--------------------- \r\n axios.get(path + 'Sample_SE_Match_Output.xlsx', { responseType: 'arraybuffer' })\r\n .then(response => {\r\n const buffer = response.data;\r\n const workbook1 = new Workbook();\r\n return workbook1.xlsx.load(buffer);\r\n })\r\n .then(workbook1 => {\r\n \r\n let workbook = new Workbook();\r\n let worksheet = workbook.addWorksheet(workSheetName);\r\n\r\n // let sheetToClone = workbook1.getWorksheet(4);\r\n // let copySheet = workbook.addWorksheet(\"Sheet\");\r\n // copySheet.model = sheetToClone.model;\r\n // copySheet.name = sheetToClone.name;\r\n if(this.state.exportAction === 'matchedOutputDemo'){\r\n this.copyExcelWorkSheet(1,workbook1,workbook);\r\n this.copyExcelWorkSheet(2,workbook1,workbook); \r\n }\r\n\r\n const columnDetails = this.initializeColumns(exportData);\r\n worksheet.columns = columnDetails;\r\n\r\n // for (const headerRow of exportData) {\r\n // worksheet.addRow(headerRow.label);\r\n // }\r\n\r\n // let summationArray = this.sum(rowData);\r\n // worksheet.addRow(summationArray);\r\n worksheet.spliceRows(1, 0, []);\r\n worksheet.spliceRows(1, 0, []);\r\n worksheet.spliceRows(1, 0, []);\r\n\r\n let summationArrayKeys = ['AGGREGATE_INVOICE_COUNT', 'AGGREGATE_INVOICE_SPEND', 'AGGREGATE_PO_COUNT', 'AGGREGATE_PO_SPEND', 'AGREEGATE_PAYMENT_COUNT',\r\n 'ERP_INVOICE_COUNT', 'ERP_PO_COUNT', 'PAYMENT_COUNT', \"SAP_ARIBA_DOC_PROXY\", \"SAP_ARIBA_SPEND_PROXY\", \"SAP_ARIBA_SPEND_PROXY_USD\", \"AN_SMP_FEE_EST_BUYER_CURR\", \"ERP_INV_SPEND_IN_STD_CURR\", \"ENTERPRISE_ESTIM_SUPP_YIELD\", \"ENTERPRISE_ESTIM_SPEND_YIELD\", \"ENTERPRISE_ESTIM_DOC_YIELD\", \"ERP_DOCUMENT_CNT\", \"ERP_SPEND\",\"ESTI_CAPTURABLE_NET_TRNS_FEE_REVENUE\"]\r\n\r\n \r\n\r\n rowData.forEach((row, rowIndex) => {\r\n worksheet.addRow(row);\r\n if (exportData.length > 0) {\r\n exportData.forEach((key, colIndex) => {\r\n //console.log(\"key : \" + key + \" - value : \" + row[key]);\r\n if (exportData[colIndex].key != 'REF_NUMBER' && exportData[colIndex].filter_type == 'NumericFilterRenderer') {\r\n var formatter = this.excelformatter(exportData[colIndex].alignment);\r\n worksheet.getRow(rowIndex + 5).getCell(colIndex + 1).numFmt = formatter;\r\n }\r\n var textFormatter = this.excelTextFormatter(exportData[colIndex].alignment);\r\n worksheet.getRow(rowIndex + 5).getCell(colIndex + 1).alignment = {\r\n horizontal: textFormatter,\r\n }\r\n });\r\n }\r\n });\r\n\r\n\r\n\r\n if (this.state.exportAction != 'matchedOutputDemo') {\r\n var headerRowMergeRowStart = 1;\r\n var headerValue = '';\r\n var printHeader = true;\r\n var lastColumnHeaderValue = this.state.finalColumn.filter(item => item.key == exportData[exportData.length - 1].key)[0].headerGroup;\r\n //var lastColumnHeaderValue = exportData[exportData.length-1].headerGroup;\r\n\r\n\r\n exportData.forEach((key, index) => {\r\n //Add header and merge header row.\r\n //headerValue = exportData[index].headerGroup;\r\n headerValue = self.state.finalColumn.filter(item => item.key == exportData[index].key)[0].headerGroup;\r\n if (index == 0 && printHeader) // First Header\r\n worksheet.getRow(3).getCell(index + 1).value = headerValue;\r\n else if (headerValue != self.state.finalColumn.filter(item => item.key == exportData[index - 1].key)[0].headerGroup && printHeader) {\r\n worksheet.getRow(3).getCell(index + 1).value = headerValue;\r\n worksheet.mergeCells(3, headerRowMergeRowStart, 3, index);\r\n headerRowMergeRowStart = index + 1;\r\n }\r\n else if (lastColumnHeaderValue == headerValue && printHeader) // Last Header\r\n {\r\n worksheet.mergeCells(3, headerRowMergeRowStart, 3, exportData.length);\r\n printHeader = false;\r\n }\r\n //--------------------------------\r\n\r\n\r\n let colName = this.getExcelColumnName(index + 1);\r\n if (exportData[index].key != 'REF_NUMBER' && summationArrayKeys.includes(exportData[index].key) && exportData[index].filter_type == 'NumericFilterRenderer') {\r\n worksheet.getCell(colName + '2').value = { formula: 'SUM(' + colName + '5:' + colName + '100000)' };\r\n\r\n var formatter = this.excelformatter(exportData[index].alignment);\r\n worksheet.getRow(2).getCell(index + 1).numFmt = formatter;\r\n var textFormatter = this.excelTextFormatter(exportData[index].alignment);\r\n worksheet.getRow(2).getCell(index + 1).alignment = {\r\n horizontal: textFormatter,\r\n }\r\n }\r\n else if (exportData[index].key == 'REF_NUMBER') {\r\n worksheet.getCell(colName + '2').value = 'Totals';\r\n }\r\n\r\n });\r\n }\r\n let fname = 'spend';//this.props.content.uploadTemplateFile\r\n\r\n const nonEditableHeader = columnDetails.filter(i => i.editable == \"No\")\r\n const editableHeader = columnDetails.filter(i => i.editable == \"Yes\")\r\n\r\n worksheet.columns.forEach((column,index) => {\r\n \r\n //Set Column Width\r\n const lengths = column.values.map(v => v.toString().length);\r\n const maxLength = Math.max(...lengths.filter(v => typeof v === 'number'));\r\n column.width = maxLength + 4;\r\n\r\n\r\n //Set Font and Colour\r\n worksheet.getRow(1).getCell(index + 1).fill = {\r\n type: 'pattern',\r\n pattern: 'solid',\r\n fgColor: { argb: 'FFFFFF' },\r\n };\r\n worksheet.getRow(1).getCell(index + 1).font = {\r\n name: 'BentonSans Book',\r\n size: 11,\r\n color: { argb: '000000' },\r\n bold: true\r\n };\r\n\r\n\r\n if (this.state.exportAction != 'matchedOutputDemo') {\r\n worksheet.getRow(2).getCell(index + 1).fill = {\r\n type: 'pattern',\r\n pattern: 'solid',\r\n fgColor: { argb: 'D9E1F2' }\r\n };\r\n worksheet.getRow(2).getCell(index + 1).font = {\r\n name: 'BentonSans Book',\r\n size: 10,\r\n color: { argb: '000000' },\r\n bold: true,\r\n };\r\n\r\n worksheet.getRow(3).getCell(index + 1).fill = {\r\n type: 'pattern',\r\n pattern: 'solid',\r\n fgColor: { argb: '8EA9DB' }\r\n };\r\n worksheet.getRow(3).getCell(index + 1).font = {\r\n name: 'BentonSans Book',\r\n size: 10,\r\n color: { argb: 'FFFFFF' },\r\n bold: true,\r\n };\r\n }\r\n });\r\n\r\n //let summationArray = this.sum(rowData);\r\n ////worksheet.getRow(2).values = summationArray; \r\n\r\n const currentRowIdx = worksheet.rowCount; // Find out how many rows are there currently\r\n const endColumnIdx = worksheet.columnCount; // Find out how many columns are in the worksheet \r\n\r\n\r\n if (this.state.exportAction === 'matchedOutputDemo') \r\n worksheet.getRow(1).values = [\"Some information in this sheet is Internal Only. Share only the Customer Facing Template tab with external users.\"];\r\n else if (this.state.exportAction != 'customerViewColumns')\r\n worksheet.getRow(1).values = [\"The data contained in this file is for internal use only. Do not distribute outside of SAP/Ariba.\"];\r\n // merge by start row, start column, end row, end column\r\n //worksheet.mergeCells(1, 1, 1, 10);\r\n\r\n // worksheet.getRow(3).values = [\"Customer Input Data\"];\r\n // // merge by start row, start column, end row, end column\r\n // worksheet.mergeCells(3, 1, 3, 10);\r\n\r\n\r\n //worksheet.getRow(1).height = 200; \r\n \r\n\r\n nonEditableHeader.map(item => {\r\n worksheet.getRow(4).getCell(item.key).fill = {\r\n type: 'pattern',\r\n pattern: 'solid',\r\n fgColor: { argb: '0B64A0' }\r\n };\r\n worksheet.getRow(4).getCell(item.key).font = {\r\n name: 'BentonSans Book',\r\n size: 9,\r\n color: { argb: 'FFFFFF' },\r\n bold: true,\r\n };\r\n\r\n for (var rowNo = 3; rowNo <= 4; rowNo++) {\r\n worksheet.getRow(rowNo).getCell(item.key).border = {\r\n top: { style: 'thin' },\r\n left: { style: 'thin' },\r\n bottom: { style: 'thin' },\r\n right: { style: 'thin' }\r\n };\r\n }\r\n });\r\n\r\n const textColor = (this.state.exportAction === 'enablementInsightColumns' || \r\n this.state.exportAction === 'customerViewColumns' ) ?\r\n 'FFFFFF':'e9ff21';\r\n\r\n editableHeader.map(item => {\r\n worksheet.getRow(4).getCell(item.key).fill = {\r\n type: 'pattern',\r\n pattern: 'solid',\r\n fgColor: { argb: '0B64A0' }\r\n };\r\n worksheet.getRow(4).getCell(item.key).font = {\r\n name: 'BentonSans Book',\r\n size: 9,\r\n color: { argb: textColor },\r\n bold: true,\r\n };\r\n\r\n for (var rowNo = 3; rowNo <= 4; rowNo++) {\r\n worksheet.getRow(rowNo).getCell(item.key).border = {\r\n top: { style: 'thin' },\r\n left: { style: 'thin' },\r\n bottom: { style: 'thin' },\r\n right: { style: 'thin' }\r\n };\r\n }\r\n\r\n // // make header row readonly \r\n // worksheet.getRow(4).getCell(item.key).protection = {\r\n // locked: false,\r\n // hidden: false,\r\n // };\r\n\r\n // // Add autofilter to all column\r\n // worksheet.autoFilter = 'A1:V1';\r\n\r\n\r\n //worksheet.getCell('E2').value = { formula:'E5+E6'}; \r\n\r\n }\r\n );\r\n\r\n // to make header row frozen\r\n worksheet.views = [\r\n { state: 'frozen', ySplit: 1 }\r\n ];\r\n\r\n\r\n if (this.state.exportAction === 'matchedOutputDemo') {\r\n let sheetToClone = workbook1.getWorksheet(2);\r\n let copySheet = workbook.addWorksheet(\"Sheet\"); \r\n // Copy Newly created M&C Worksheet in Existing worksheet\r\n copySheet.model = worksheet.model;\r\n //Delete Newly created M&C Worksheet\r\n // workbook.removeWorksheet(1);\r\n //Rename Existing worksheet\r\n copySheet.name = workSheetName;\r\n \r\n this.copyExcelWorkSheet(4,workbook1,workbook);\r\n\r\n let copySheet1 = workbook.addWorksheet(\"Sheet\"); \r\n // Copy Newly created M&C Worksheet in Existing worksheet\r\n copySheet1.model = worksheet.model;\r\n //Delete Newly created M&C Worksheet\r\n workbook.removeWorksheet(1);\r\n //Rename Existing worksheet\r\n copySheet1.name = 'Customer Facing Template';\r\n }\r\n\r\n // // below column used internally \t\t\r\n // worksheet.getColumn('SAP_ARIBA_DOC_PROXY').hidden = true; \r\n // worksheet.getColumn('SAP_ARIBA_SPEND_PROXY').hidden = true; \r\n // worksheet.getColumn('V').hidden = true;\r\n\r\n //add data and file name and download\r\n workbook.xlsx.writeBuffer().then((data) => {\r\n let blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });\r\n FileSaver.saveAs(blob, fname + '.xlsx');\r\n this.setState({ isSaveInProgress: false,isLoading: false });\r\n // var excelButton = document.getElementsByClassName(\"button--accent\")[0].parentNode;\r\n // excelButton.style.display = 'block';\r\n });\r\n\r\n console.log('reading Excel done');\r\n })\r\n .catch(error => {\r\n console.error('Error reading Excel file:', error);\r\n });\r\n //}.bind(this), 10000)\r\n //----------------------------------------------------\r\n }\r\n\r\n getExcelColumnName(columnNumber) {\r\n // To store result (Excel column name)\r\n let columnName = [];\r\n\r\n while (columnNumber > 0) {\r\n // Find remainder\r\n let rem = columnNumber % 26;\r\n\r\n // If remainder is 0, then a\r\n // 'Z' must be there in output\r\n if (rem == 0) {\r\n columnName.push(\"Z\");\r\n columnNumber = Math.floor(columnNumber / 26) - 1;\r\n }\r\n else // If remainder is non-zero\r\n {\r\n columnName.push(String.fromCharCode((rem - 1) + 'A'.charCodeAt(0)));\r\n columnNumber = Math.floor(columnNumber / 26);\r\n }\r\n }\r\n\r\n // Reverse the string\r\n return columnName.reverse().join(\"\")\r\n }\r\n\r\n excelformatter = (formatterName) => {\r\n switch (formatterName) {\r\n case 'LeftAlignFormatter':\r\n return '#,##0'\r\n case 'AlignFormatter':\r\n return '#,##0'//formatThousandsWithBlank(roundFixWithBlank(value, 0))\r\n case 'RoundFormatter':\r\n return '#,##0.0000'//formatThousandsWithBlank(roundFixWithBlank(value, 4))\r\n case 'CenterAlignFormatter':\r\n return '#,##0'\r\n case 'RightAlignFormatter':\r\n return '#,##0'\r\n case 'AlignCurrencyFormatter':\r\n return '#,##0'//formatThousandsWithBlank(roundFixWithBlank(value, 0))\r\n case 'RoundCurrencyFormatter':\r\n return '#,##0.0000'//formatThousandsWithBlank(roundFixWithBlank(value, 4))\r\n case 'LinkFormatter':\r\n return '#,##0'\r\n case 'RoundFormatter2':\r\n return '#,##0.00'//formatThousandsWithBlank(roundFixWithBlank(value, 2))\r\n case 'IntegralpartFormatter':\r\n return '#,##0'//vformatThousandsWithBlank(integralPartWithBlank(value))\r\n case 'IntegralpartPercentFormatter':\r\n return '#,##0'//formatThousandsWithBlank(integralPartWithBlank(value))\r\n default:\r\n return undefined;\r\n }\r\n }\r\n\r\n excelTextFormatter = (formatterName) => {\r\n switch (formatterName) {\r\n case 'LeftAlignFormatter':\r\n return 'left'\r\n case 'AlignFormatter':\r\n return 'right'\r\n case 'RoundFormatter':\r\n return 'right'\r\n case 'CenterAlignFormatter':\r\n return 'center'\r\n case 'RightAlignFormatter':\r\n return 'right'\r\n case 'AlignCurrencyFormatter':\r\n return 'right'\r\n case 'RoundCurrencyFormatter':\r\n return 'right'\r\n case 'LinkFormatter':\r\n return 'left'\r\n case 'RoundFormatter2':\r\n return 'right'\r\n case 'IntegralpartFormatter':\r\n return 'right'\r\n case 'IntegralpartPercentFormatter':\r\n return 'right'\r\n default:\r\n return 'right';\r\n }\r\n }\r\n\r\n industryOverride() {\r\n if (this.props.overridedIndustryDetails !== undefined && this.props.overridedIndustryDetails !== null\r\n && this.props.overridedIndustryDetails.INDUSTRY_ID !== undefined && this.props.overridedIndustryDetails.INDUSTRY_ID !== null) {\r\n this.onGridRowsUpdated({ fromRow: this.state.industryOverrideRowNo, toRow: this.state.industryOverrideRowNo, updated: { 'OVERRIDE_INDUSTRY_ID': this.props.overridedIndustryDetails.INDUSTRY_ID } })\r\n this.props.selectedIndustryDetails(null)//Clear the previous selection\r\n this.setState({ open: !this.state.open })\r\n }\r\n }\r\n\r\n clearIndustryOverride() {\r\n this.onGridRowsUpdated({ fromRow: this.state.industryOverrideRowNo, toRow: this.state.industryOverrideRowNo, updated: { 'OVERRIDE_INDUSTRY_ID': '' } })\r\n this.setState({ open: !this.state.open })\r\n }\r\n\r\n closePopUp() {\r\n this.setState({ open: !this.state.open })\r\n }\r\n\r\n outsidePopupClick() {\r\n this.setState({ open: false })\r\n }\r\n\r\n enablementWaveInput() {\r\n if (this.props.enablementWaveInputDetails !== undefined && this.props.enablementWaveInputDetails !== null) {\r\n this.onGridRowsUpdated({ fromRow: this.state.enablementWaveInputRowNo, toRow: this.state.enablementWaveInputRowNo, updated: { 'ENABLEMENT_WAVE': this.props.enablementWaveInputDetails == '' || this.props.enablementWaveInputDetails == 0 ? 1 : this.props.enablementWaveInputDetails } })\r\n this.props.selectedEnablementWaveDetails(null)//Clear the previous selection\r\n //this.setState({ openEnablementInsightPopUp: !this.state.openEnablementInsightPopUp })\r\n }\r\n this.setState({ openEnablementInsightPopUp: !this.state.openEnablementInsightPopUp })\r\n }\r\n\r\n clearEnablementWaveOverride() {\r\n this.onGridRowsUpdated({ fromRow: this.state.enablementWaveInputRowNo, toRow: this.state.enablementWaveInputRowNo, updated: { 'ENABLEMENT_WAVE': '' } })\r\n this.setState({ openEnablementInsightPopUp: !this.state.openEnablementInsightPopUp })\r\n }\r\n\r\n closeEnablementInsightPopUp() {\r\n this.setState({ openEnablementInsightPopUp: !this.state.openEnablementInsightPopUp })\r\n }\r\n\r\n outsideEnablementInsightPopupClick() {\r\n this.setState({ openEnablementInsightPopUp: false })\r\n }\r\n\r\n addUserComments(comments) {\r\n this.onGridRowsUpdated({ fromRow: this.state.userCommentsRowNo, toRow: this.state.userCommentsRowNo, updated: { 'USER_COMMENT': comments } })\r\n this.setState({ openUserCommentsPopUp: !this.state.openUserCommentsPopUp })\r\n }\r\n\r\n clearUserComments() {\r\n if (moment(this.state.userCommentInsideCell, 'MM/DD/YYYY', true).isValid() === false) {\r\n this.onGridRowsUpdated({ fromRow: this.state.userCommentsRowNo, toRow: this.state.userCommentsRowNo, updated: { 'USER_COMMENT': '' } })\r\n }\r\n this.setState({ openUserCommentsPopUp: !this.state.openUserCommentsPopUp })\r\n }\r\n\r\n closeUserCommentsPopUp() {\r\n this.setState({ openUserCommentsPopUp: !this.state.openUserCommentsPopUp })\r\n }\r\n\r\n outsideUserCommentsPopupClick() {\r\n this.setState({ openUserCommentsPopUp: false })\r\n }\r\n\r\n capIqIdOverride() {\r\n //console.log(\"from details file props data: \", this.props.overridedCapIqIdDetails)\r\n if (this.props.overridedCapIqIdDetails !== undefined && this.props.overridedCapIqIdDetails !== null\r\n && this.props.overridedCapIqIdDetails.COMPANY_ID !== undefined && this.props.overridedCapIqIdDetails.COMPANY_ID !== null) {\r\n this.onGridRowsUpdated({\r\n fromRow: this.state.capIqIdOverrideRowNo, toRow: this.state.capIqIdOverrideRowNo,\r\n updated: { 'CAPIQ_COMPANY_ID': this.props.overridedCapIqIdDetails.COMPANY_ID }\r\n })\r\n this.props.selectedCapIqIdDetails(null)// Clear the previous selection\r\n this.setState({ openCapIq: !this.state.openCapIq })\r\n }\r\n }\r\n\r\n clearCapIqIdOverride() {\r\n this.onGridRowsUpdated({ fromRow: this.state.capIqIdOverrideRowNo, toRow: this.state.capIqIdOverrideRowNo, updated: { 'CAPIQ_COMPANY_ID': '' } })\r\n this.setState({ openCapIq: !this.state.openCapIq })\r\n }\r\n\r\n closeCapIqIdPopUp() {\r\n this.setState({ openCapIq: !this.state.openCapIq })\r\n }\r\n\r\n outsideCapIqIdPopupClick() {\r\n this.setState({ openCapIq: false })\r\n }\r\n\r\n filterValidationRecords(e, skeys, recordType) {\r\n const rowData = this.state.rowData;\r\n const filteredRows = [];\r\n skeys.forEach((item) => {\r\n rowData.sort((a, b) => { return a['DATA_COLLECTIONS_SKEY'] - b['DATA_COLLECTIONS_SKEY'] }) // binary search work with sorted array only\r\n var rowIdx = binarySearchIndex(rowData, item, 'DATA_COLLECTIONS_SKEY')\r\n var idx = filteredRows.findIndex((item) => {\r\n return item['DATA_COLLECTIONS_SKEY'] === rowData[rowIdx]['DATA_COLLECTIONS_SKEY']\r\n })\r\n\r\n if (rowIdx !== -1 && idx === -1) {\r\n filteredRows.push(rowData[rowIdx]);\r\n }\r\n })\r\n let newFilters = { ...this.state.filters };\r\n newFilters[recordType] = { filteredRows: [...filteredRows], filterTerm: 'Yes', 'rawValue': skeys.length, type: 'global', column: { name: recordType, key: recordType } };\r\n\r\n this.props.detailedFileFilters(newFilters)\r\n\r\n this.setState({ filters: newFilters }, () => {\r\n this.getRows(this.state.rowData, newFilters)\r\n })\r\n e.stopPropagation();\r\n }\r\n\r\n //Remove this after ticket 319 is done\r\n // snapFilters() {\r\n // this.getAppliedFilters()\r\n // }\r\n\r\n // clearFilter(e){\r\n // let filter = this.state.filters\r\n // let rows = [...this.state.rowData];\r\n // console.log(e.target.value)\r\n // let key = e.target.value;\r\n // delete filter[key];\r\n // this.setState({filter: filter}, this.getRows(rows, filter))\r\n // }\r\n\r\n // getAppliedFilters() {\r\n // let filters = this.state.filters;\r\n // let filterArray = [];\r\n // const colConfig = this.props.content.detailedFileFields;\r\n // const colConfigArr = [];\r\n // colConfig.forEach((item, index) => {\r\n // for (var key in item) {\r\n // if (key === 'field') {\r\n // colConfigArr[item[key]] = item;\r\n // break;\r\n // }\r\n // }\r\n // })\r\n\r\n // for (let [key, value] of Object.entries(filters)) {\r\n // if (typeof (value.filterTerm) != 'string') {\r\n // filterArray.push({ \"key\": colConfigArr[key].screen_field_name, \"value\": value.filterTerm[0].value })\r\n // } else {\r\n // filterArray.push({ \"key\": colConfigArr[key].screen_field_name, \"value\": value.filterTerm })\r\n // }\r\n // }//(`${key}: ${value}`)\r\n // let result = []\r\n // if (filterArray.length > 0) {\r\n // result = (\r\n // {!this.state.filterFlag ? : }\r\n //
\r\n // : }\r\n // {\"Applied filters are: \"}
\r\n // {this.state.filterFlag ? null :\r\n // filterArray.map(item => (\r\n //\r\n //
\r\n // )\r\n // )}\r\n // - \r\n //
- {item.key}: {item.value} \r\n // {/* */}\r\n //
{\"No filters are applied\"}
\r\n // this.filterValidationRecords(e, warningRecords[key], 'warning(s)')}>\r\n \r\n \r\n \r\n
: ''\r\n ))\r\n\r\n var errorRecordSize = 0;\r\n var totalErrorRecords = []\r\n Object.values(errorRecords).forEach((item) => {\r\n totalErrorRecords = totalErrorRecords.concat(item);\r\n })\r\n\r\n var errorDiv = Object.keys(errorRecords).map((key, index) => (\r\n errorRecords[key].length !== 0 ?\r\n \r\n \r\n \r\n {key} {this.props.content.validationForText}\r\n {formatThousands(warningRecords[key].length)} {this.props.content.validationRowsText}\r\n \r\n
\r\n this.filterValidationRecords(e, errorRecords[key], 'error(s)')}>\r\n \r\n \r\n \r\n
: ''\r\n ))\r\n\r\n var validationDiv = (\r\n \r\n \r\n \r\n {key} {this.props.content.validationForText}\r\n {formatThousands(errorRecords[key].length)} {this.props.content.validationRowsText}\r\n \r\n
\r\n \r\n
)\r\n\r\n return validationDiv;\r\n }\r\n\r\n warningToggle() {\r\n this.setState((previousState) => { return { warningDiv: !previousState.warningDiv } })\r\n }\r\n\r\n errorToggle() {\r\n this.setState((previousState) => { return { errorDiv: !previousState.errorDiv } })\r\n }\r\n\r\n showModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n this.refs[action].hide()\r\n }\r\n\r\n closeColumnFieldPopup() {\r\n this.setState({ columns: cloneDeep(this.originalColumns) });\r\n this.hideModal('ColumnFields');\r\n }\r\n\r\n closeUploadFieldPopup() {\r\n this.setState({ columns: cloneDeep(this.originalColumns) });\r\n this.hideModal('UploadUserDefinedFields');\r\n }\r\n\r\n removeFilter(filter, item1, removeAll = false) {\r\n var breadCrumbsArray = this.state.filters;\r\n if (breadCrumbsArray) {\r\n Object.values(breadCrumbsArray).forEach(item => {\r\n if (item.type !== NumericFilterRenderer && item.type !== TextfilterRenderer && item.type !== 'global') {\r\n if (item.clear) {\r\n item.clear()\r\n }\r\n\r\n if (removeAll) {\r\n item.filterTerm.length = 0;\r\n return;\r\n }\r\n var idx = item.filterTerm.findIndex(t => t.value === item1 && item.column.key === filter.column.key)\r\n if (idx !== -1) {\r\n if (item.clear) {\r\n item.clear()\r\n }\r\n item.filterTerm.splice(idx, 1)\r\n\r\n if (item.filterTerm.length === 0) {\r\n delete breadCrumbsArray[filter.column.key]\r\n }\r\n }\r\n } else if (removeAll || (item.column.key === filter.column.key && item.rawValue === item1)) {\r\n if (item.clear) {\r\n item.clear()\r\n }\r\n\r\n if (!removeAll)\r\n delete breadCrumbsArray[filter.column.key]\r\n }\r\n })\r\n }\r\n\r\n if (removeAll) {\r\n breadCrumbsArray = {}\r\n }\r\n\r\n\r\n var rows = [...this.state.rowData];\r\n this.setState({ filters: breadCrumbsArray }, () => {\r\n this.getRows(rows, breadCrumbsArray)\r\n })\r\n }\r\n\r\n expandFilter(item) {\r\n let filters;\r\n (item.type === NumericFilterRenderer || item.type === TextfilterRenderer || item.type === 'global') ?\r\n filters = (\r\n
\r\n this.filterValidationRecords(e, pendingRecords, 'pending')}>\r\n \r\n {formatThousands(pendingRecords.length)} {this.props.content.validationRecordText} \r\n {this.props.content.pendingChangeMessage}\r\n
\r\n {totalWarningRecords.length > 0 ?\r\n {formatThousands(pendingRecords.length)} {this.props.content.validationRecordText} \r\n {this.props.content.pendingChangeMessage}\r\n \r\n
: ''}\r\n {totalErrorRecords.length > 0 ?\r\n this.filterValidationRecords(e, totalWarningRecords, 'warning(s)')}>\r\n \r\n {formatThousands(totalWarningRecords.length)} {this.props.content.validationWarningText} {this.props.content.warningChangeMessage}\r\n
\r\n {formatThousands(totalWarningRecords.length)} {this.props.content.validationWarningText} {this.props.content.warningChangeMessage}\r\n \r\n {this.state.warningDiv ? : }\r\n
\r\n {this.state.warningDiv ? warningDiv : ''}\r\n : }\r\n \r\n
: ''}\r\n this.filterValidationRecords(e, totalErrorRecords, 'error(s)')}>\r\n \r\n {formatThousands(totalErrorRecords.length)} {this.props.content.validationErrorText} {this.props.content.validationThatText} {this.props.content.validationMustText} {this.props.content.errorChangeMessage}\r\n
\r\n {formatThousands(totalErrorRecords.length)} {this.props.content.validationErrorText} {this.props.content.validationThatText} {this.props.content.validationMustText} {this.props.content.errorChangeMessage}\r\n \r\n {this.state.errorDiv ? : }\r\n
\r\n {this.state.errorDiv ? errorDiv : ''}\r\n : }\r\n this.removeFilter(item, item.rawValue)}\r\n color\r\n >{item.rawValue}\r\n \r\n
) :\r\n filters = item.filterTerm.map((item1) => (\r\n (\r\n this.removeFilter(item, item1.value)}\r\n color\r\n >{item1.value}\r\n \r\n
)\r\n ))\r\n\r\n return filters\r\n }\r\n\r\n sum(finalRows, colDefs = this.state.columnDefs) {\r\n if (finalRows.length >= 1) {\r\n let arr2 = cloneDeep(finalRows[0]);\r\n for (const key in arr2) {\r\n arr2[key] = ''\r\n }\r\n\r\n arr2['REF_NUMBER'] = 'Total :'\r\n\r\n let summationArrayKeys = ['AGGREGATE_INVOICE_COUNT', 'AGGREGATE_INVOICE_SPEND', 'AGGREGATE_PO_COUNT', 'AGGREGATE_PO_SPEND', 'AGREEGATE_PAYMENT_COUNT',\r\n 'ERP_INVOICE_COUNT', 'ERP_PO_COUNT', 'PAYMENT_COUNT', \"SAP_ARIBA_DOC_PROXY\", \"SAP_ARIBA_SPEND_PROXY\", \"SAP_ARIBA_SPEND_PROXY_USD\",\"AN_SMP_FEE_EST_BUYER_CURR\",\"ERP_INV_SPEND_IN_STD_CURR\",\"ENTERPRISE_ESTIM_SUPP_YIELD\",\"ENTERPRISE_ESTIM_SPEND_YIELD\",\"ENTERPRISE_ESTIM_DOC_YIELD\",\"ERP_DOCUMENT_CNT\",\"ERP_SPEND\",\"ESTI_CAPTURABLE_NET_TRNS_FEE_REVENUE\"]\r\n\r\n summationArrayKeys.forEach(key => arr2[key] = 0)\r\n\r\n finalRows.forEach(item => {\r\n summationArrayKeys.forEach(key => {\r\n arr2[key] += (item[key] === '' ? 0 : item[key])\r\n })\r\n })\r\n\r\n arr2['ENTERPRISE_ESTIM_SUPP_YIELD'] = arr2['ENTERPRISE_ESTIM_SUPP_YIELD'] / 100;\r\n return arr2;\r\n }\r\n }\r\n\r\n capIqDataCleared() {\r\n var array2 = [];\r\n let currencyCodes = this.props.discovery.currencyCodes;\r\n for (let i = 1; i < currencyCodes.length; i++) {\r\n let obj = { label: currencyCodes[i], value: currencyCodes[i].split(' - ')[0] }\r\n array2.push(obj);\r\n }\r\n this.setState({ currencyOption: array2 });\r\n let idx = array2.findIndex((element) => {\r\n return element.value === 'USD'\r\n })\r\n\r\n\r\n let selectedCurrencySym = this.props.currencySymbols[array2[idx].value];\r\n\r\n this.getCurrency({ label: selectedCurrencySym, value: array2[idx].value })\r\n\r\n\r\n //this.dispatchUpdateCurrency(selectedCurrencySym);\r\n\r\n this.setState({ selectedCurrencySymbol: selectedCurrencySym });\r\n // set default value for currency \r\n this.setState({ selectedCurrency: array2[idx] });\r\n this.props.dispatchCapIQChange('clear')\r\n this.setState({ capIQId: '', selectedCapIQCompanyId: '', selectedLocation: this.props.discovery.locations[0], selectedIndustry: this.props.discovery.industries[0] })\r\n }\r\n\r\n capIqRadioButtonClicked(data) {\r\n this.props.userData.CapIQId = data.COMPANY_ID\r\n this.props.userData.CapIQCompany = data.COMPANY_NAME\r\n this.props.userData.Organization = data.COMPANY_NAME\r\n //this.bindIndustryAndLocation()\r\n //this.formDispatch(actions.change('discovery.Organization', data.COMPANY_NAME));\r\n if (this.props.userData.CapIQCompany) {\r\n this.setState({ selectedCapIQCompanyId: this.props.userData.CapIQCompany + ' | ' + this.props.userData.CapIQId, organization: data.COMPANY_NAME }, this.callCapIQProcedure);\r\n } else {\r\n this.setState({ selectedCapIQCompanyId: '' })\r\n }\r\n\r\n this.props.userData.AnnualRevenue = data.COMPANY_REVENUE ? data.COMPANY_REVENUE + '' : null;\r\n //this.dispatchAddRevenue(this.props.userData.AnnualRevenue)\r\n //this.props.userData.Location = data.COUNTRY_NAME\r\n let idx = this.props.discovery.locations.findIndex(item => data.COUNTRY_NAME.toLowerCase() === item.toLowerCase())\r\n if (idx !== -1) {\r\n this.props.userData.Location = idx;\r\n this.setState({ selectedLocation: this.props.discovery.locations[idx] });\r\n } else {\r\n this.setState({ selectedLocation: this.props.discovery.locations[0] })\r\n }\r\n\r\n if (data.AVATAR_INDUSTRY) {\r\n const industryIdx = this.props.discovery.industries.findIndex(item => data.AVATAR_INDUSTRY.toLowerCase() === item.toLowerCase());\r\n if (industryIdx !== -1) {\r\n this.props.userData.Industry = industryIdx;\r\n //this.formDispatch(actions.change('discovery.Industry', this.props.content.industries[industryIdx]));\r\n this.setState({ selectedIndustry: this.props.discovery.industries[industryIdx] });\r\n } else {\r\n this.setState({ selectedIndustry: this.props.discovery.industries[0] });\r\n }\r\n }\r\n }\r\n\r\n closeCapIqPopUp() {\r\n this.setState({ openCapIq: !this.state.openCapIq })\r\n }\r\n\r\n listenScrollEvent() {\r\n if (this.state.actualScroll) {\r\n this.setState({ actualScroll: false })\r\n return\r\n }\r\n\r\n this.setState({ dummyScroll: true }, () => {\r\n const canvas = document.getElementsByClassName('react-grid-Canvas')[0]\r\n const dummy = document.getElementsByClassName('scroll-dummy')[0]\r\n const length = this.state.columnDefs.length * 120\r\n const dummyScrollRatio = length / document.documentElement.clientWidth\r\n canvas.scrollLeft = dummy.scrollLeft //* dummyScrollRatio\r\n })\r\n }\r\n\r\n getHeaderGroups(columnDefs) {\r\n let headerToColumn = {}\r\n columnDefs.forEach(item => {\r\n if (item.headerGroup in headerToColumn) {\r\n let columns = headerToColumn[item.headerGroup]\r\n columns.push({ name: item.name, width: item.width })\r\n } else {\r\n if (item.headerGroup === null) {\r\n headerToColumn[item.name] = { name: null, width: item.width }\r\n } else {\r\n headerToColumn[item.headerGroup] = [{ name: item.name, width: item.width }]\r\n }\r\n }\r\n })\r\n\r\n return headerToColumn\r\n }\r\n\r\n // reload grid data when user defined excel upload\r\n reloadGrid() {\r\n this.loadData()\r\n }\r\n\r\n componentWillUnmount()\r\n {\r\n \r\n }\r\n //excel export\r\n\r\n loadVendorData() {\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsId = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let user = this.props.user.user.Email;\r\n // this.props.defineScopeLoading(true)\r\n this.props.getVendorFiles(dmcId, vsId, user)\r\n .then((response) => {\r\n if (response.data.Result.length > 0) {\r\n this.setState({ vufData: response.data.Result })\r\n } else {\r\n // this.props.defineScopeLoading(false)\r\n this.setState({ responseMsg: 'No result found. Please try reimporting the file.', isError: 'Yes', isLoading: false })\r\n }\r\n\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n // this.props.defineScopeLoading(false)\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator.', isError: 'Yes', isLoading: false })\r\n }\r\n else {\r\n // this.props.defineScopeLoading(false)\r\n this.setState({ responseMsg: this.props.content.error, isError: 'Yes', isLoading: false })\r\n }\r\n })\r\n }\r\n exportCsvForVUF(rowData) {\r\n\r\n var keys = Object.keys(rowData[0]).filter((cols) => {\r\n return cols\r\n })\r\n\r\n var headers = Object.keys(rowData[0]).map((cols) => {\r\n return cols.includes(',') ? cols.replace(\",\", \"?\") : cols\r\n //return cols.label\r\n })\r\n\r\n const options = {\r\n filename: 'Vendor Details',\r\n decimalSeparator: '.',\r\n showLabels: true,\r\n showTitle: false,\r\n useTextFile: false,\r\n keys: keys,\r\n headers: headers\r\n };\r\n\r\n const csvExporter = new ExportToCsv(options);\r\n\r\n csvExporter.generateCsv(rowData);\r\n this.setState({ exportFlag: true })\r\n }\r\n\r\n render() {\r\n const paginatedRows = this.state.filteredRows.slice(this.state.paginatedRowFrom, this.state.paginatedRowTo);\r\n paginatedRows.splice(0, 0, { superHeader: this.state.headerToColumn })\r\n paginatedRows.splice(1, 0, this.state.filteredSummationArray)\r\n const validationDiv = this.getValidationDiv();\r\n var columnDefs = this.setColumnHelpTextAndHardRefresh(paginatedRows, this.state.columnDefs)\r\n var filter = this.state.filters ? Object.entries(cloneDeep(this.state.filters)) : []\r\n var self = this;\r\n return (\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n ui: state.content.ui,\r\n spendDetails: state.spendDetails,\r\n user: state.default,\r\n content: state.content.spendAnalysis.detailedFile,\r\n validation: state.content.validation,\r\n userData: state.valueStory,\r\n filter: state.detailedFileFilters.filter,\r\n filterText: state.detailedFileFilterText,\r\n overridedIndustryDetails: state.spendDetails.overridedIndustryDetails,\r\n enablementWaveInputDetails: state.spendDetails.enablementWaveInputDetails,\r\n spendDetails: state.spendDetails,\r\n discovery: state.content.discovery.form,\r\n overridedCapIqIdDetails: state.spendDetails.overridedCapIqIdDetails,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n getDetailedFileSuccess: message => dispatch(getDetailedFileSuccess(message)),\r\n getDetailedFileFailure: error => dispatch(getDetailedFileFailure(error)),\r\n getDetailedFileLoading: bool => dispatch(getDetailedFileLoading(bool)),\r\n getDetailedFileSpendData: (DMCId, VSId, userEmail, requestFileRecordCount, roundTripNumber) => dispatch(getDetailedFileSpendData(DMCId, VSId, userEmail, requestFileRecordCount, roundTripNumber)),\r\n getSpendColumnsConfiguration: () => dispatch(getSpendColumnsConfiguration()),\r\n getNdlColumnsConfiguration: () => dispatch(getNdlColumnsConfiguration()),\r\n getNdlReportData: (detail) => dispatch(getNdlReportData(detail)),\r\n insertDetailedFileRecords: (records) => dispatch(insertDetailedFileRecords(records)),\r\n detailedFileFilters: filter => dispatch(detailedFileFilters(filter)),\r\n detailedFileFilterText: filter => dispatch(detailedFileFilterText(filter)),\r\n selectedIndustryDetails: message => dispatch(selectedIndustryDetails(message)),\r\n selectedEnablementWaveDetails: message => dispatch(selectedEnablementWaveDetails(message)),\r\n pendingChanges: changes => dispatch(pendingChanges(changes)),\r\n defineScopeLoading: bool => dispatch(defineScopeLoading(bool)),\r\n setResultSummaryDetails: (data) => dispatch(setResultSummaryDetails(data)),\r\n setTopDetails: (data) => dispatch(setTopDetails(data)),\r\n getSelectedColumn: (DMCId, VSId, userId) => dispatch(getSelectedColumn(DMCId, VSId, userId)),\r\n addSelectedColumn: (DMCId, VSId, userId, ColumnsOrFavId) => dispatch(addSelectedColumn(DMCId, VSId, userId, ColumnsOrFavId)),\r\n removeColumnsForRequest: (UserId, VsId, DmcId) => dispatch(removeColumnsForRequest(UserId, VsId, DmcId)),\r\n selectedCapIqIdDetails: message => dispatch(selectedCapIqIdDetails(message)),\r\n getVendorFiles: (DMCId, VSId, userEmail) => dispatch(getVendorFiles(DMCId, VSId, userEmail))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SpendFilesContainer)\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\n\r\nimport { modalStyle, modalContentStyle, changeModalStyle, changeModalContentStyle, path } from 'Constants'\r\n\r\nimport Modal from 'reboron/OutlineModal'\r\nimport Button from 'UI/Button'\r\nimport TabContainer from './TabContainer';\r\nimport { AppBar } from '@material-ui/core';\r\nimport {\r\n pendingChanges,\r\n saveKPIOnRedirect,\r\n deleteIntermediateKPIOnRedirect,\r\n isEnablementStrategyContainerPage,\r\n isSpendParameterPage,\r\n saveSpendParametersOnRedirect\r\n} from 'actions/spendActions'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n\tsetSubTabMenu,\r\n setTabMenu\r\n}\r\n\tfrom 'actions/userActions'\r\n\r\nimport {\r\n saveValueStoryOnRedirect,\r\n isValueStoryPage\r\n} from 'actions/discoveryActions'\r\n\r\nconst alertModalStyle = Object.assign({}, changeModalStyle);\r\nalertModalStyle.zIndex = '1060';\r\nalertModalStyle.width = '50%';\r\n\r\nconst styles = theme => ({\r\n root: {\r\n flexGrow: 1,\r\n backgroundColor: theme.palette.background.paper,\r\n borderBottom: \"1px solid grey\",\r\n boxShadow: \"none\"\r\n },\r\n indicator: {\r\n backgroundColor: \"#008fd3\",\r\n },\r\n textColor: {\r\n // color: \"#008fd3\",\r\n },\r\n paddingTop: {\r\n // paddingTop: \"20px\"\r\n },\r\n tabs: {\r\n borderLeft: \"1px solid grey\",\r\n borderRight: \"1px solid grey\",\r\n padding: \"10px\"\r\n },\r\n borderBothSides: {\r\n borderLeft: \"1px solid grey\",\r\n borderRight: \"1px solid grey\",\r\n },\r\n borderLeftSide: {\r\n borderLeft: \"1px solid grey\",\r\n }\r\n});\r\n\r\nclass SpendTabPanel extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n activeTab: props.tabId,\r\n toggle: false,\r\n nextTab: 5,\r\n event: null,\r\n activeTabCopy: props.tabId,\r\n isLoading : false,\r\n };\r\n this.showModal = this.showModal.bind(this)\r\n this.hideModal = this.hideModal.bind(this)\r\n this.closeModal = this.closeModal.bind(this)\r\n this.handleChange = this.handleChange.bind(this)\r\n }\r\n\r\n showModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n this.refs[action].hide()\r\n }\r\n\r\n closeModal(action) {\r\n let activeTab = this.state.activeTabCopy\r\n this.props.pendingChanges(null);\r\n if(this.props.isEnablementStrategyContainerPage)\r\n this.props.isEnablementStrategyContainerPage(false);\r\n if(this.props.isValueStoryPage)\r\n this.props.isValueStoryPage(false);\r\n if(this.props.isSpendParameterPage)\r\n this.props.isSpendParameterPage(false);\r\n \r\n this.setState({ toggle: false, activeTab: activeTab }, this.refs[action].hide())\r\n if (this.props.dispatchTabChange) {\r\n if (this.props.handleNextButton) {\r\n this.props.handleNextButton(activeTab)\r\n }\r\n this.props.dispatchTabChange(activeTab)\r\n\r\n }\r\n }\r\n\r\n continueKPINavigation(action,isIntermediateDataDelete) {\r\n this.setState({ isLoading : true });\r\n if(isIntermediateDataDelete)\r\n this.props.deleteIntermediateKPIOnRedirect(true);\r\n else\r\n this.props.saveKPIOnRedirect(true);\r\n setTimeout(() => {\r\n this.props.isEnablementStrategyContainerPage(false);\r\n this.closeModal(action);\r\n this.setState({ isLoading : false });\r\n }, 10000);\r\n }\r\n\r\n continueValueStoryNavigation(action) {\r\n this.setState({ isLoading: true });\r\n this.props.saveValueStoryOnRedirect(true);\r\n setTimeout(() => {\r\n this.props.isValueStoryPage(false);\r\n this.continueNavigation(action);\r\n this.setState({ isLoading: false });\r\n }, 4000);\r\n }\r\n\r\n continueSpendParameterNavigation(action) {\r\n this.setState({ isLoading: true });\r\n this.props.saveSpendParametersOnRedirect(true);\r\n setTimeout(() => {\r\n this.props.isSpendParameterPage(false);\r\n this.continueNavigation(action);\r\n this.setState({ isLoading: false });\r\n }, 4000);\r\n }\r\n\r\n continueNavigation(action) {\r\n let activeTab = this.state.activeTabCopy\r\n this.props.pendingChanges(null)\r\n this.setState({ toggle: false, activeTab: activeTab }, this.refs[action].hide())\r\n if (this.props.dispatchTabChange) {\r\n if (this.props.handleNextButton) {\r\n this.props.handleNextButton(activeTab)\r\n }\r\n this.props.dispatchTabChange(activeTab)\r\n }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.change == null || nextProps.change == false) {\r\n this.setState({ toggle: false })\r\n }\r\n else if (nextProps.change == true) {\r\n this.setState({ toggle: true })\r\n }\r\n }\r\n handleChange = (event, activeTab) => {\r\n // if (activeTab == 5) {\r\n // this.setState({ toggle: true })\r\n // }\r\n this.props.setTabMenu(activeTab);\r\n this.props.setSubTabMenu(1);\r\n if (this.props.spendDetails !== undefined && this.props.spendDetails.isLoading === false && this.props.spendDetails.isBlank === false\r\n && this.props.change !== undefined && this.props.change !== null\r\n && this.props.change === true\r\n && this.props.spendDetails.isKpiStrategy !== undefined && this.props.spendDetails.isKpiStrategy !== null\r\n && this.props.spendDetails.isKpiStrategy === true) {\r\n this.setState({ activeTabCopy: activeTab }, this.showModal(\"KPI\"));\r\n }\r\n else if (this.props.change !== undefined && this.props.change !== null\r\n\t\t\t&& this.props.change === true &&\r\n\t\t\tthis.props.valueStory.isValueStoryPage !== undefined && this.props.valueStory.isValueStoryPage !== null\r\n\t\t\t&& this.props.valueStory.isValueStoryPage === true) {\r\n this.setState({ activeTabCopy: activeTab }, this.showModal(\"VS\"));\r\n\t\t}\r\n else if (this.props.change !== undefined && this.props.change !== null\r\n\t\t\t&& this.props.change === true &&\r\n\t\t\tthis.props.spendDetails.isSpendParameterPage !== undefined && this.props.spendDetails.isSpendParameterPage !== null\r\n\t\t\t&& this.props.spendDetails.isSpendParameterPage === true) {\r\n this.setState({ activeTabCopy: activeTab }, this.showModal(\"SpendParameter\"));\r\n\t\t}\r\n else if (this.props.spendDetails !== undefined && this.props.spendDetails.isLoading === false && this.props.spendDetails.isBlank === false) {\r\n const flag = this.state.toggle\r\n if (!flag) {\r\n this.setState({ activeTab: activeTab });\r\n if (this.props.dispatchTabChange) {\r\n if (this.props.handleNextButton) {\r\n this.props.handleNextButton(activeTab)\r\n }\r\n this.props.dispatchTabChange(activeTab)\r\n\r\n }\r\n } else {\r\n this.setState({ activeTabCopy: activeTab }, this.showModal(\"terms\"));\r\n\r\n }\r\n }\r\n\r\n };\r\n\r\n render() {\r\n const { classes } = this.props;\r\n const { activeTab } = this.state;\r\n const _state = this.props.spendDetails;\r\n const nextTab = [{menuId: 1, nextMenuId: 5},{menuId: 2, nextMenuId: 3},{menuId: 3, nextMenuId: 7},{menuId: 4, nextMenuId: 11},{menuId: 5, nextMenuId: 4},{menuId: 6, nextMenuId: 2},{menuId: 7, nextMenuId: 8},{menuId: 8, nextMenuId: 10},{menuId: 10, nextMenuId: 12},{menuId: 11, nextMenuId: 6},{menuId: 12, nextMenuId: 0}]\r\n const nextTabSCC = [{menuId: 1, nextMenuId: 5},{menuId: 2, nextMenuId: 3},{menuId: 3, nextMenuId: 7},{menuId: 4, nextMenuId: 11},{menuId: 5, nextMenuId: 9},{menuId: 6, nextMenuId: 2},{menuId: 7, nextMenuId: 8},{menuId: 8, nextMenuId: 10},{menuId: 9, nextMenuId: 4},{menuId: 10, nextMenuId: 12},{menuId: 11, nextMenuId: 6},{menuId: 12, nextMenuId: 0}]\r\n const tabOrder = [1,5,9,4,11,6,2,3,7,8,10,12]\r\n \r\n var c = tabOrder.reduce(function (r, a, i) {\r\n r[a] = i;\r\n return r;\r\n }, {});\r\n \r\n this.props.tabs.sort(function (x, y) {\r\n return c[x.id] - c[y.id];\r\n });\r\n\r\n //this.props.tabs.sort((a, b) => tabOrder.indexOf(a.id) > tabOrder.indexOf(b.id));\r\n return (\r\n \r\n
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n
\r\n \r\n
\r\n {this.props.content.subTitle}{
\r\n {this.props.content.subHeader}
\r\n {this.state.rowData.length === 0 ? '' :\r\n {this.props.content.currentFilterRows} {formatThousands(this.state.filteredRows.length)}/{formatThousands(this.state.rowData.length)} {this.props.content.totalText}
}\r\n {this.props.content.currentFilterSelection}
\r\n \r\n {filter.length === 0 ? 'No filter currently selected' :\r\n filter.map((item) => {\r\n return (\r\n (item.length === 0 || item[1].filterTerm.length === 0) ? '' :\r\n
\r\n {item[1].column.name}:
\r\n )\r\n })\r\n }\r\n {this.expandFilter(item[1])}
\r\n {validationDiv}\r\n
\r\n \r\n {this.props.content.editableColumns}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {this.state.currentScopeSource === \"Industry\" && this.state.industryDesc !== \"Unclassified\" && (this.state.currentDMCIndstryId !== null || this.state.currentDMCIndstryId >= 1000) ?\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n : null}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n option.value === this.state.perPage)}\r\n noOptionsMessage={() => null}\r\n onChange={(value) => this.handlePageCountChange(value.value)}\r\n options={this.state.pageCountOption}\r\n isSearchable={false}\r\n />\r\n
\r\n \r\n '}\r\n breakLabel={'...'}\r\n breakClassName={'break-me'}\r\n pageCount={this.state.pageCount}\r\n marginPagesDisplayed={2}\r\n pageRangeDisplayed={5}\r\n onPageChange={this.handlePageClick}\r\n containerClassName={'pagination'}\r\n subContainerClassName={'pages pagination'}\r\n activeClassName={'active'}\r\n pageClassName={'page-li'}\r\n previousClassName={'previousClassName'}\r\n nextClassName={'nextClassName'}\r\n pageLinkClassName={'pageLinkClassName'}\r\n activeLinkClassName={'activeLinkClassName'}\r\n />\r\n
\r\n \r\n
\r\n \r\n this.callback()}\r\n modalStyle={columnFieldModalStyle}\r\n contentStyle={suggestedValueContentStyle}\r\n >\r\n this.closeColumnFieldPopup()} />\r\n \r\n
\r\n\r\n \r\n \r\n this.callback()}\r\n modalStyle={columnFieldModalStyle}\r\n contentStyle={suggestedValueContentStyle}\r\n >\r\n this.reloadGrid()}\r\n closePopup={() => this.closeUploadFieldPopup()} />\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n {/* onClick={self.props.user.userprofile.Roles[0].indexOf(\"Export All_Spend Details\") > -1 ? () => this.showModal('alert') : this.exportCsv} */}\r\n\r\n \r\n\r\n {self.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1 ? \r\n \r\n
\r\n \r\n { this.props.spendDetails.currentActiveRequest.Number_Of_Records < downloadThreshold ?\r\n this.props.content.exportAlertMessage\r\n : this.props.content.exportAlertMessageAboveThreshold\r\n }\r\n
\r\n {/* \r\n
*/}\r\n {/* */}\r\n { this.props.spendDetails.currentActiveRequest.Number_Of_Records < downloadThreshold ?\r\n
\r\n \r\n
\r\n : null }\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n this.radioButtonChecked(value)}\r\n color=\"default\"\r\n > \r\n
\r\n {this.props.content.customerViewColumns}
\r\n \r\n
\r\n { this.props.spendDetails.currentActiveRequest.Number_Of_Records < downloadThreshold ? \r\n \r\n
\r\n \r\n\r\n
\r\n \r\n this.radioButtonChecked(value)}\r\n color=\"default\"\r\n > \r\n
\r\n Customer View CSV
\r\n \r\n
\r\n : null }\r\n {/* \r\n
\r\n \r\n
\r\n \r\n this.radioButtonChecked(value)}\r\n color=\"default\"\r\n > \r\n
\r\n {this.props.content.enablementInsightColumns}
\r\n \r\n
*/}\r\n {/* */}\r\n { this.props.spendDetails.currentActiveRequest.Number_Of_Records < downloadThreshold ?\r\n
\r\n \r\n
\r\n : null }\r\n { this.props.spendDetails.currentActiveRequest.Number_Of_Records < downloadThreshold ?\r\n \r\n
\r\n \r\n {(self.props.user.userprofile.Roles[0].indexOf(\"Standard Internal User\") > -1\r\n || self.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1)?\r\n
\r\n \r\n this.radioButtonChecked(value)}\r\n color=\"default\"\r\n > \r\n
\r\n : null}\r\n {this.props.content.nonSensetiveColumns}
\r\n \r\n
\r\n : null } \r\n {this.props.spendDetails.currentActiveRequest.Number_Of_Records < downloadThreshold && self.state.exportMC_Cloumns ?\r\n \r\n
\r\n \r\n {(self.props.user.userprofile.Roles[0].indexOf(\"Standard Internal User\") > -1\r\n || self.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1)?\r\n
\r\n \r\n this.radioButtonChecked(value)}\r\n color=\"default\"\r\n > \r\n
\r\n : null}\r\n {this.props.content.currentViewColumns}
\r\n \r\n
\r\n : null}\r\n {self.state.exportMC_Cloumns ?\r\n \r\n
\r\n \r\n {(self.props.user.userprofile.Roles[0].indexOf(\"Standard Internal User\") > -1\r\n || self.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1)?\r\n
\r\n \r\n this.radioButtonChecked(value)}\r\n color=\"default\"\r\n > \r\n
\r\n : null}\r\n {this.props.content.matchAndClassificationColumns}
\r\n \r\n
\r\n : null}\r\n {/* \r\n
\r\n \r\n {(self.props.user.userprofile.Roles[0].indexOf(\"Standard Internal User\") > -1\r\n || self.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1)?\r\n
\r\n \r\n this.radioButtonChecked(value)}\r\n color=\"default\"\r\n > \r\n
\r\n : null}\r\n M&C Detail CSV (Internal Only)
\r\n \r\n
\r\n \r\n */}\r\n \r\n {/*
*/}\r\n */}\r\n {this.props.spendDetails.currentActiveRequest.Number_Of_Records < downloadThreshold ?\r\n
\r\n \r\n
\r\n : null }\r\n {/* \r\n
\r\n \r\n {(self.props.user.userprofile.Roles[0].indexOf(\"Export All_Spend Details\") > -1\r\n || self.props.user.userprofile.Roles[0].indexOf(\"Admin\") > -1) ?\r\n
\r\n \r\n this.radioButtonChecked(value)}\r\n color=\"default\"\r\n > \r\n
: null}\r\n {this.props.content.allColumns}
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n : null}\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.props.spendDetails.currentActiveRequest.Number_Of_Records < downloadThreshold ?\r\n this.props.content.exportAlertMessage\r\n : this.props.content.exportAlertMessageAboveThreshold\r\n }\r\n
\r\n\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n this.radioButtonChecked(value)}\r\n color=\"default\"\r\n > \r\n
\r\n Matched Output Demo
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n this.callback()}\r\n modalStyle={changeModalStyle}\r\n contentStyle={changeModalContentStyle}\r\n >\r\n this.hideModal('vufModal')}\r\n content={this.props.content.export} />\r\n \r\n
\r\n\r\n \r\n \r\n \r\n { this.myOpenGrid = dataGrid; }}\r\n columns={columnDefs}\r\n minWidth={'100%'}\r\n rowsCount={paginatedRows.length}\r\n minHeight={600}\r\n onGridRowsUpdated={this.onGridRowsUpdated}\r\n enableCellSelect={true}\r\n onGridSort={this.sortRows}\r\n rowGetter={i => paginatedRows[i]}\r\n toolbar={ this.handleFilterChange(null)} numberOfRows={this.state.rowData.length} filterRowsButtonText={{}} />}\r\n onAddFilter={filter => this.handleFilterChange(filter)}\r\n onClearFilters={() => this.handleFilterChange(null)}\r\n onFilterChange={filter => this.handleFilterChange(filter)}\r\n getValidFilterValues={this.getValidFilterValues}\r\n RowsContainer={ContextMenuTrigger}\r\n rowRenderer={this.RowRenderer}\r\n onCheckCellIsEditable={this.isCellEditable}\r\n onColumnResize={(idx, width) => this.columnResize(`${idx}`, `${width}`)}\r\n headerRowHeight={70}\r\n />\r\n
\r\n \r\n {/* */}\r\n
\r\n }} />}\r\n onAddFilter={filter => this.handleFilterChange(filter)}\r\n onClearFilters={() => this.handleFilterChange(null)}\r\n onFilterChange={filter => this.handleFilterChange(filter)}\r\n getValidFilterValues={this.getValidFilterValues}\r\n RowsContainer={ContextMenuTrigger}\r\n rowRenderer={this.RowRenderer}\r\n onCheckCellIsEditable={this.isCellEditable}\r\n onColumnResize={(idx, width) => this.columnResize(`${idx}`, `${width}`)}\r\n headerRowHeight={70}\r\n />\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nSpendTabPanel.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n tabs: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n label: PropTypes.string.isRequired,\r\n id: PropTypes.number.isRequired,\r\n component: PropTypes.object.isRequired,\r\n }).isRequired)\r\n .isRequired,\r\n};\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n change: state.detailedFileChanges.changes,\r\n tabMessage: state.content.spendAnalysis.detailedFile,\r\n subTabMenu:state.setSubTabMenu,\r\n tabMenu:state.setTabMenu,\r\n spendDetails: state.spendDetails,\r\n valueStory : state.valueStory,\r\n } \r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n pendingChanges: changes => dispatch(pendingChanges(changes)),\r\n saveKPIOnRedirect: changes => dispatch(saveKPIOnRedirect(changes)),\r\n deleteIntermediateKPIOnRedirect: changes => dispatch(deleteIntermediateKPIOnRedirect(changes)),\r\n isEnablementStrategyContainerPage: obj => dispatch(isEnablementStrategyContainerPage(obj)),\r\n setSubTabMenu:(val)=>dispatch(setSubTabMenu(val)),\r\n setTabMenu:(val)=>dispatch(setTabMenu(val)),\r\n saveValueStoryOnRedirect: changes => dispatch(saveValueStoryOnRedirect(changes)),\r\n isValueStoryPage:(obj)=>dispatch(isValueStoryPage(obj)),\r\n isSpendParameterPage: obj => dispatch(isSpendParameterPage(obj)),\r\n saveSpendParametersOnRedirect: changes => dispatch(saveSpendParametersOnRedirect(changes)),\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(SpendTabPanel));","import React from 'react';\r\nimport * as d3 from 'd3';\r\n\r\n// Utils\r\nimport { convertToMillion, formatThousands, convertToThousands } from 'utils/Utils'\r\n\r\n\r\nclass HorizontalBarChart extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n summaryScopeData: [],\r\n }\r\n\r\n this.drawChart = this.drawChart.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n this.drawChart(this.props);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.data !== this.props.data) {\r\n //Perform some operation\r\n this.drawChart(nextProps);\r\n }\r\n }\r\n\r\n drawChart = (props) => {\r\n if (props.data.length !== 0) {\r\n d3.select(\"#barChart\").selectAll(\"svg\").remove();\r\n // var data = [{KEY: 'Bob', Value: 2500},{KEY: 'Rob', Value: 3500},{KEY: 'Cob', Value: 5500},\r\n // {KEY: 'Pob', Value: 500},{KEY: 'BGob', Value: 250},{KEY: 'Sob', Value: 200},{KEY: 'Xob', Value: 20}]\r\n var data = props.data;\r\n\r\n // var data = [{\r\n // \"name\": \"Apples\",\r\n // \"value\": 20,\r\n // },\r\n // {\r\n // \"name\": \"Bananas\",\r\n // \"value\": 12,\r\n // },\r\n // {\r\n // \"name\": \"Grapes\",\r\n // \"value\": 19,\r\n // },\r\n // {\r\n // \"name\": \"Lemons\",\r\n // \"value\": 5,\r\n // },\r\n // {\r\n // \"name\": \"Limes\",\r\n // \"value\": 16,\r\n // },\r\n // {\r\n // \"name\": \"Oranges\",\r\n // \"value\": 26,\r\n // },\r\n // {\r\n // \"name\": \"Pears\",\r\n // \"value\": 30,\r\n // }];\r\n\r\n //sort bars based on value\r\n data = data.sort(function (a, b) {\r\n return d3.ascending(a.value, b.value);\r\n })\r\n\r\n //set up svg using margin conventions - we'll need plenty of room on the left for labels\r\n var margin = {\r\n top: 15,\r\n right: 100,\r\n bottom: 15,\r\n left: 0\r\n };\r\n\r\n var width = 960 - margin.left - margin.right,\r\n height = 570 - margin.top - margin.bottom;\r\n\r\n var svg = d3.select(\"#barChart\").append(\"svg\")\r\n .attr('preserveAspectRatio', 'xMinYMin meet')\r\n .attr(\r\n 'viewBox',\r\n '0 0 ' +\r\n (width + margin.left + margin.right) +\r\n ' ' +\r\n (height + margin.top + margin.bottom)\r\n )\r\n .style(\"overflow\", \"visible\")\r\n // .attr(\"width\", width + margin.left + margin.right)\r\n // .attr(\"height\", height + margin.top + margin.bottom)\r\n .append(\"g\")\r\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\r\n\r\n var x = d3.scaleLinear()\r\n .range([0, width])\r\n .domain([0, d3.max(data, function (d) {\r\n return d.value;\r\n })]);\r\n\r\n var y = d3.scaleBand()\r\n .range([height, 0])\r\n .padding(0.5)\r\n .domain(data.map(function (d) {\r\n return d.name;\r\n }));\r\n\r\n const siFormat = d3.formatPrefix(\",.0\", 1e6);\r\n const siFormat2 = d3.formatPrefix(\",.0\", 1e3)\r\n function tickFormat(num) {\r\n return siFormat(num);//.replace(\"G\", \"B\");\r\n };\r\n function tickFormat2(num) {\r\n return siFormat2(num);//.replace(\"G\", \"B\");\r\n };\r\n\r\n const xAxis = g => g\r\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\r\n //.call(d3.axisBottom(x).ticks(7))\r\n //.call(d3.axisBottom(xScale).tickSize(-365))\r\n .call(props.type == 'Spend' ? d3.axisBottom(x).ticks(7).tickFormat(tickFormat) : props.type == 'Count' ? d3.axisBottom(x).ticks(7) : d3.axisBottom(x).ticks(7).tickFormat(tickFormat2))\r\n .call(g => g.selectAll(\".domain\").remove())\r\n .call(g => g.selectAll(\".tick text\")\r\n .attr(\"font-size\", \"15\"))\r\n // .attr(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\"))\r\n\r\n //make y axis to show bar names\r\n var yAxis = d3.axisRight()\r\n .scale(y)\r\n\r\n //no tick marks\r\n .tickSize(0);\r\n\r\n // var gy = svg.append(\"g\")\r\n // .attr(\"class\", \"y axis\")\r\n // .call(yAxis)\r\n\r\n //Uncomment below line to add x axis\r\n // svg.append(\"g\")\r\n // //.attr(\"transform\", \"translate(0,\" + height + \")\")\r\n // // .call(d3.axisBottom(x));\r\n // .call(xAxis);\r\n\r\n var bars = svg.selectAll(\".bar\")\r\n .data(data)\r\n .enter()\r\n .append(\"g\")\r\n .attr(\"class\", \"bars\")\r\n\r\n\r\n //append rects\r\n bars.append(\"rect\")\r\n .attr(\"class\", \"bar\")\r\n .attr(\"y\", function (d) {\r\n return y(d.name);\r\n })\r\n .attr(\"height\", y.bandwidth())\r\n .attr(\"x\", 0)\r\n .attr(\"width\", function (d) {\r\n return x(d.value);\r\n });\r\n\r\n //add a value label to the right of each bar\r\n bars.append(\"text\")\r\n .style(\"font-size\", \"15px\")\r\n .style(\"font-weight\", \"600\")\r\n .attr(\"class\", \"label\")\r\n .attr(\"fill\", \"#33C3FF\")\r\n //y position of the label is halfway down the bar\r\n .attr(\"y\", function (d) {\r\n return y(d.name) + y.bandwidth() / 2 + 4;\r\n })\r\n //x position is 3 pixels to the right of the bar\r\n .attr(\"x\", function (d) {\r\n return x(d.value) + 3;\r\n })\r\n .text(function (d) {\r\n return (props.type == 'Spend' ? (props.currency + convertToMillion(d.value)) : props.type == 'Count' ? formatThousands(d.value) : convertToThousands(d.value))\r\n });\r\n\r\n\r\n bars.append(\"text\")\r\n .attr(\"class\", \"labels\")\r\n .style(\"font-size\", \"1rem\")\r\n .style(\"font-family\", \"BentonSans, Arial, Helvetica, sans-serif\")\r\n .style(\"font-weight\", \"600\")\r\n .style(\"fill\", \"currentColor\")\r\n .attr(\"y\", function (d) {\r\n return y(d.name) + y.bandwidth() / 2 - y.bandwidth() / 2 - 5;\r\n })\r\n .attr(\"x\", 0)\r\n .text(function (d) {\r\n return d.name;\r\n });\r\n\r\n }\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n {\r\n this.props.tabs.map((tab, i) => {\r\n var disabledTab = _state.isLoading && activeTab === tab.id ? false : _state.isLoading;\r\n return ( \r\n {\r\n this.props.tabs.map(tab => (\r\n activeTab === tab.id\r\n ? {tab.component} \r\n : null\r\n ))\r\n }\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n {this.props.tabMessage.toggleTabMessage}\r\n
\r\n \r\n
\r\n \r\n this.closeModal(\"terms\")}\r\n color /> \r\n this.hideModal(\"terms\")}\r\n color /> \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n {this.props.tabMessage.toggleKPITabMessage}\r\n
\r\n \r\n
\r\n \r\n this.continueKPINavigation(\"KPI\",false)}\r\n color />\r\n
\r\n \r\n this.closeModal(\"KPI\")}\r\n onClick={() => this.hideModal(\"KPI\")}\r\n color />\r\n
\r\n \r\n this.continueKPINavigation(\"KPI\",true)}\r\n color />\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.props.tabMessage.toggleVSMessage}\r\n
\r\n\t\t\t\t\t\t\t\r\n
\r\n \r\n this.continueValueStoryNavigation(\"VS\")}\r\n color />\r\n
\r\n \r\n this.continueNavigation(\"VS\")}\r\n color />\r\n
\r\n\t\t\t\t\t\t\t\t\r\n this.hideModal(\"VS\")}\r\n color />\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.props.tabMessage.toggleVSMessage}\r\n
\r\n\t\t\t\t\t\t\t\r\n
\r\n \r\n this.continueSpendParameterNavigation(\"SpendParameter\")}\r\n color />\r\n
\r\n \r\n this.continueNavigation(\"SpendParameter\")}\r\n color />\r\n
\r\n\t\t\t\t\t\t\t\t\r\n this.hideModal(\"SpendParameter\")}\r\n color />\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\nexport default HorizontalBarChart\r\n\r\n\r\n//Other code to try\r\n/*\r\n // //var data = [{ \"salesperson\": \"Bob\", \"sales\": 33 }, { \"salesperson\": \"Robin\", \"sales\": 12 }, { \"salesperson\": \"Anne\", \"sales\": 41 }, { \"salesperson\": \"Mark\", \"sales\": 16 }, { \"salesperson\": \"Joe\", \"sales\": 59 }, { \"salesperson\": \"Eve\", \"sales\": 38 }, { \"salesperson\": \"Karen\", \"sales\": 21 }, { \"salesperson\": \"Kirsty\", \"sales\": 25 }, { \"salesperson\": \"Chris\", \"sales\": 30 }, { \"salesperson\": \"Lisa\", \"sales\": 47 }, { \"salesperson\": \"Tom\", \"sales\": 5 }, { \"salesperson\": \"Stacy\", \"sales\": 20 }, { \"salesperson\": \"Charles\", \"sales\": 13 }, { \"salesperson\": \"Mary\", \"sales\": 29 }];\r\n\r\n // set the dimensions and margins of the graph\r\n var margin = { top: 20, right: 80, bottom: 30, left: 20 },\r\n width = 960 - margin.left - margin.right,\r\n height = 500 - margin.top - margin.bottom;\r\n\r\n // set the ranges\r\n var y = d3.scaleBand()\r\n .range([height, 0])\r\n .padding(0.1);\r\n\r\n var x = d3.scaleLinear()\r\n .range([0, width]);\r\n\r\n // append the svg object to the body of the page\r\n // append a 'group' element to 'svg'\r\n // moves the 'group' element to the top left margin\r\n var svg = d3.select(\"#barChart\").append(\"svg\")\r\n .attr('preserveAspectRatio', 'xMinYMin meet')\r\n .attr(\r\n 'viewBox',\r\n '0 0 ' +\r\n (width + margin.left + margin.right) +\r\n ' ' +\r\n (height + margin.top + margin.bottom)\r\n )\r\n .append(\"g\")\r\n .attr(\"transform\",\r\n \"translate(\" + margin.left + \",\" + margin.top + \")\");\r\n\r\n // format the data\r\n data.forEach(function (d) {\r\n d.Value = +d.Value;\r\n });\r\n\r\n // Scale the range of the data in the domains\r\n x.domain([0, d3.max(data, function (d) { return d.Value; })])\r\n y.domain(data.map(function (d) { return d.KEY; }));\r\n //y.domain([0, d3.max(data, function(d) { return d.Value; })]);\r\n\r\n const siFormat = d3.formatPrefix(\".1\", 1e6);\r\n const siFormat2 = d3.formatPrefix(\".1\", 1e3)\r\n function tickFormat(num) {\r\n return siFormat(num);//.replace(\"G\", \"B\");\r\n };\r\n function tickFormat2(num) {\r\n return siFormat2(num);//.replace(\"G\", \"B\");\r\n };\r\n\r\n const xAxis = g => g\r\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\r\n .call(d3.axisBottom(x).ticks(7))\r\n //.call(d3.axisBottom(xScale).tickSize(-365))\r\n .call(props.type == 'Spend' ? d3.axisBottom(x).tickFormat(tickFormat) : props.type == 'Count' ? d3.axisBottom(x) : d3.axisBottom(x).tickFormat(tickFormat2))\r\n .call(g => g.selectAll(\".domain\").remove())\r\n .call(g => g.selectAll(\".tick text\")\r\n .attr(\"font-size\", \"15\"))\r\n\r\n const yAxis = g => g\r\n .attr(\"transform\", `translate(0,-32)`)\r\n .call(d3.axisRight(y).tickSize(0))\r\n .call(g => g.selectAll(\".domain\").remove())\r\n .call(g => g.selectAll(\".tick text\")\r\n .attr(\"font-size\", \"15\")\r\n .attr(\"font-weight\", \"700\")\r\n .attr(\"fill\", \"#4a4a4a\"))\r\n\r\n // append the rectangles for the bar chart\r\n svg.selectAll(\".bar\")\r\n .data(data)\r\n .enter().append(\"rect\")\r\n .attr(\"class\", \"bar\")\r\n //.attr(\"x\", function(d) { return x(d.Value); })\r\n .attr(\"width\", function (d) { return x(d.Value); })\r\n .attr(\"y\", function (d) { return y(d.KEY); })\r\n .attr(\"height\", y.bandwidth());\r\n\r\n svg.selectAll(\"text\")\r\n .data(data)\r\n .enter()\r\n .append(\"text\")\r\n .attr(\"class\", \"below\")\r\n .attr(\"x\", d => 970)\r\n .attr(\"y\", (d, i) => y(d.KEY) + 30)\r\n .attr(\"text-anchor\", \"left\")\r\n .text(function (d) { return (props.type == 'Spend' ? (props.currency + convertToMillion(d.value)) : props.type == 'Count' ? formatThousands(d.value) : convertToThousands(d.value)) })// convertToMillion(d.value, true);\r\n .attr(\"font-size\", \"15\")\r\n .attr(\"font-weight\", \"700\")\r\n .attr(\"fill\", \"#33C3FF\");\r\n\r\n // add the x Axis\r\n svg.append(\"g\")\r\n //.attr(\"transform\", \"translate(0,\" + height + \")\")\r\n // .call(d3.axisBottom(x));\r\n .call(xAxis);\r\n\r\n // add the y Axis\r\n svg.append(\"g\")\r\n .call(yAxis);\r\n // .call(d3.axisLeft(y));\r\n */","import React, { Component, PureComponent, Fragment } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport Select from 'react-select'\r\nimport StackedBarChart from 'components/UI/StackedBarChart'\r\nimport ZoomModal from 'components/UI/ZoomModal'\r\nimport HorizontalBarChart from 'components/UI/HorizontalBarChart'\r\nimport _ from 'lodash';\r\nimport {\r\n scopeSummarySuccess,\r\n scopeSummaryLoading,\r\n resetError,\r\n scopeSummaryFailure,\r\n getScopeSummarySolution,\r\n getBuyProcessSummary,\r\n getScopeSummaryBuyProcess,\r\n scopeSummaryBuyProcessSuccess,\r\n scopeSummaryBuyProcessLoading,\r\n scopeSummaryBuyProcessFailure,\r\n //getDefineScopesDetails\r\n} from 'actions/spendActions'\r\nimport { formatThousands } from 'utils/Utils'\r\n\r\nimport { validators } from 'Constants'\r\nimport VideoHelp from 'components/UI/VideoHelp'\r\n\r\nclass ScopeSummaryContainer extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n initialData: [],\r\n scopeSummaryData: [],\r\n buyProcessData: [],\r\n initialBuyProcessData: [],\r\n scopeSolution: [\r\n { label: \"Total Invoice Spend\", value: \"Total Invoice Spend\" },\r\n { label: \"Total Supplier Count\", value: \"Total Supplier Count\" },\r\n { label: \"Total Invoice Count\", value: \"Total Invoice Count\" }\r\n ],\r\n scopeSolutionFilter: 'Total Invoice Spend',\r\n type: 'Spend',\r\n currencySymbol: '',\r\n scopeSummaryData: [],\r\n scopeSummaryBuyProcessData: [],\r\n buyProcessSolutionSelected: 'All',\r\n solutionsOptions: [{ label: 'All', value: 'All' },\r\n { label: 'Sourcing', value: 'Sourcing' },\r\n { label: 'Commerce Automation', value: 'Commerce Automation' },\r\n { label: 'Buying and Invoicing', value: 'Buying and Invoicing' },\r\n { label: 'Fieldglass', value: 'Fieldglass' },\r\n { label: 'Discount/Terms Rationalization', value: 'Discount/Terms Rationalization' },\r\n { label: 'Supply Chain Collaboration', value: 'Supply Chain Collaboration' }],\r\n buyProcessSelected: 'All',\r\n buyProcessOptions: [],\r\n industryLevelSelected: '3',\r\n industryLevelOptions: [{ label: '3', value: 3 },\r\n { label: '4', value: 4 },\r\n { label: '5', value: 5 }],\r\n isError: false,\r\n errorMessage: ''\r\n }\r\n\r\n this.aggregateInvoiceSpend = this.aggregateSupplierValues.bind(this)\r\n }\r\n\r\n componentDidMount() {\r\n this.loadData()\r\n window.scrollTo(0, 0);\r\n }\r\n\r\n componentWillUnmount(){\r\n this.props.resetError();\r\n }\r\n\r\n loadData() {\r\n this.getScopeSummarySolution();\r\n this.getBuyProcessSummary();\r\n this.getScopeSummaryBuyProcess()\r\n }\r\n\r\n getScopeSummarySolution() {\r\n var scopeRequest_obj = {\r\n VS_ID: this.props.spendDetails.currentActiveRequest.VS_ID,\r\n DMC_ID: this.props.spendDetails.currentActiveRequest.DMC_ID,\r\n USER_ID: this.props.user.user.Email,\r\n }\r\n\r\n this.props.getScopeSummarySolution(scopeRequest_obj)\r\n .then((response) => {\r\n //this.props.scopeSummarySuccess(response.data.Message)\r\n let data = response.data.Result;\r\n //.filter(item => item == 'IN_SCOPE_AGG_SPEND' || item == 'OUT_SCOPE_AGG_SPEND')\r\n // IN_SCOPE_SPEND:null\r\n // OUT_SCOPE_SPEND:23846\r\n // SOLUTION_TYPE:\"Sourcing\"\r\n var array = [];\r\n data.forEach((element) => {\r\n if (element.IN_SCOPE_AGG_SPEND == null && element.OUT_SCOPE_AGG_SPEND == null) {\r\n array = [];\r\n }\r\n else {\r\n var obj = {};\r\n obj.IN_SCOPE_SPEND = element.IN_SCOPE_AGG_SPEND;\r\n obj.OUT_SCOPE_SPEND = element.OUT_SCOPE_AGG_SPEND;\r\n obj.SOLUTION_TYPE = element.SOLUTION_TYPE;\r\n obj[\"InScopeValue\"] = element.IN_SCOPE_AGG_SPEND;\r\n obj[\"OutScopeValue\"] = element.OUT_SCOPE_AGG_SPEND;\r\n array.push(obj);\r\n }\r\n });\r\n if (response.data.Result != undefined) {\r\n this.setState({ scopeSummaryData: array, initialData: response.data.Result });\r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.scopeSummaryFailure()\r\n }\r\n else {\r\n this.props.scopeSummaryFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n\r\n getBuyProcessSummary() {\r\n var scopeRequest_obj = {\r\n VS_ID: this.props.spendDetails.currentActiveRequest.VS_ID,\r\n DMC_ID: this.props.spendDetails.currentActiveRequest.DMC_ID,\r\n USER_ID: this.props.user.user.Email,\r\n }\r\n\r\n this.props.getBuyProcessSummary(scopeRequest_obj)\r\n .then((response) => {\r\n this.props.scopeSummarySuccess(response.data.Message)\r\n let data = response.data.Result;\r\n var array = [];\r\n var buyProcessOptions = [{ label: 'All', value: 'All' }]\r\n data.forEach((element) => {\r\n var obj = {};\r\n obj.value = element.AGGR_INV_SPEND;\r\n obj.name = element.SAP_ARIBA_BUY_PROCESS;\r\n array.push(obj);\r\n\r\n buyProcessOptions.push({ label: obj.name, value: obj.name })\r\n });\r\n if (response.data.Result != undefined) {\r\n buyProcessOptions.sort()\r\n this.setState({ buyProcessData: array, initialBuyProcessData: response.data.Result, buyProcessOptions: buyProcessOptions });\r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.scopeSummaryFailure()\r\n }\r\n else {\r\n this.props.scopeSummaryFailure(error.response.data.Message)\r\n }\r\n })\r\n }\r\n\r\n getScopeSummaryBuyProcess() {\r\n this.props.scopeSummaryBuyProcessLoading(true)\r\n this.setState({isError: false, errorMessage: ''})\r\n var buyProcessRequestObj = {\r\n VS_ID: this.props.spendDetails.currentActiveRequest.VS_ID,\r\n DMC_ID: this.props.spendDetails.currentActiveRequest.DMC_ID,\r\n USER_ID: this.props.user.user.Email,\r\n SOLUTION: this.state.buyProcessSolutionSelected === 'All' ? 'No Filter' : this.state.buyProcessSolutionSelected,\r\n BUY_PROCESS: this.state.buyProcessSelected === 'All' ? 'No Filter' : this.state.buyProcessSelected,\r\n INDUSTRY_LEVEL: Number.parseInt(this.state.industryLevelSelected)\r\n }\r\n\r\n this.props.getScopeSummaryBuyProcess(buyProcessRequestObj)\r\n .then((response) => {\r\n \r\n let data = response.data.Result;\r\n\r\n var array = [];\r\n data.forEach((element) => {\r\n var obj = {};\r\n obj.industryLevel = element.INDUSTRY_LEVEL;\r\n obj.industryDesc = element.INDUSTRY_DESC;\r\n obj.aggrInvSpend = element.AGG_INVOICE_SPEND;\r\n obj.aggrInvCount = element.AGG_INVOICE_COUNT;\r\n obj.supplierCount = element.SUPPLIER_COUNT;\r\n obj.aggrInvSpendPerc = element.AGG_INVOICE_SPEND_PERC;\r\n obj.aggrInvCountPerc = element.AGG_INVOICE_COUNT_PERC;\r\n obj.aggSupplierCountPerc = element.AGG_SUPPLIER_COUNT_PERC;\r\n obj.invSpendRank = element.INVOICE_SPEND_RANK\r\n obj.invCountRank = element.INVOICE_COUNT_RANK\r\n obj.supplierCountRank = element.SUPPLIER_COUNT_RANK\r\n\r\n array.push(obj);\r\n });\r\n\r\n if (response.data.Result != undefined) {\r\n this.setState({\r\n scopeSummaryBuyProcessData: array,\r\n currencySymbol: this.props.spendDetails.currentActiveRequest !== undefined && this.props.spendDetails.currentActiveRequest !== ''?\r\n this.props.currencySymbols[this.props.spendDetails.currentActiveRequest.Currency.trim()] : ''\r\n });\r\n }\r\n this.props.scopeSummaryBuyProcessSuccess(response.data.Message)\r\n }).catch((error) => {\r\n //console.log(error)\r\n var errorMessage = ''\r\n if (error.stack.includes('Network Error')) {\r\n errorMessage = 'Network Error.'\r\n this.props.scopeSummaryBuyProcessFailure('API Service is down.Kindly contact administrator.')\r\n }\r\n else {\r\n this.props.scopeSummaryBuyProcessFailure(error.response.data.Message)\r\n errorMessage = this.props.content.noDataFound\r\n }\r\n\r\n this.setState({isError: true, errorMessage: errorMessage})\r\n\r\n })\r\n }\r\n\r\n handleSolutionChange(scope) {\r\n this.setState({ scopeSolutionFilter: scope.value }, this.filterChange)\r\n }\r\n\r\n filterChange() {\r\n this.props.scopeSummaryBuyProcessLoading(true)\r\n let data = this.state.initialData;\r\n \r\n var array = [];\r\n data.forEach((element) => {\r\n var obj = {};\r\n if (this.state.scopeSolutionFilter == 'Total Invoice Spend') {\r\n if (element.IN_SCOPE_AGG_SPEND == null && element.OUT_SCOPE_AGG_SPEND == null) {\r\n array = [];\r\n }\r\n else {\r\n obj.IN_SCOPE_SPEND = element.IN_SCOPE_AGG_SPEND;\r\n obj.OUT_SCOPE_SPEND = element.OUT_SCOPE_AGG_SPEND;\r\n obj.SOLUTION_TYPE = element.SOLUTION_TYPE;\r\n obj[\"InScopeValue\"] = element.IN_SCOPE_AGG_SPEND;\r\n obj[\"OutScopeValue\"] = element.OUT_SCOPE_AGG_SPEND;\r\n array.push(obj);\r\n }\r\n } else if (this.state.scopeSolutionFilter == 'Total Supplier Count') {\r\n if (element.IN_SCOPE_SUPPLIER_COUNT == null && element.OUT_SCOPE_SUPPLIER_COUNT == null) {\r\n array = [];\r\n }\r\n else {\r\n obj.IN_SCOPE_SPEND = element.IN_SCOPE_SUPPLIER_COUNT;\r\n obj.OUT_SCOPE_SPEND = element.OUT_SCOPE_SUPPLIER_COUNT;\r\n obj.SOLUTION_TYPE = element.SOLUTION_TYPE;\r\n obj[\"InScopeValue\"] = element.IN_SCOPE_SUPPLIER_COUNT;\r\n obj[\"OutScopeValue\"] = element.OUT_SCOPE_SUPPLIER_COUNT;\r\n array.push(obj);\r\n }\r\n } else if (this.state.scopeSolutionFilter == 'Total Invoice Count') {\r\n if (element.IN_SCOPE_AGG_COUNT == null && element.OUT_SCOPE_AGG_COUNT == null) {\r\n array = [];\r\n }\r\n else {\r\n obj.IN_SCOPE_SPEND = element.IN_SCOPE_AGG_COUNT;\r\n obj.OUT_SCOPE_SPEND = element.OUT_SCOPE_AGG_COUNT;\r\n obj.SOLUTION_TYPE = element.SOLUTION_TYPE;\r\n obj[\"InScopeValue\"] = element.IN_SCOPE_AGG_COUNT;\r\n obj[\"OutScopeValue\"] = element.OUT_SCOPE_AGG_COUNT;\r\n array.push(obj);\r\n }\r\n }\r\n });\r\n\r\n let data2 = this.state.initialBuyProcessData;\r\n var array2 = [];\r\n data2.forEach((element) => {\r\n var obj2 = {};\r\n if (this.state.scopeSolutionFilter == 'Total Invoice Spend') {\r\n obj2.value = element.AGGR_INV_SPEND;\r\n obj2.name = element.SAP_ARIBA_BUY_PROCESS;\r\n array2.push(obj2);\r\n } else if (this.state.scopeSolutionFilter == 'Total Supplier Count') {\r\n obj2.value = element.SUPPLIER_COUNT;\r\n obj2.name = element.SAP_ARIBA_BUY_PROCESS;\r\n array2.push(obj2);\r\n } else if (this.state.scopeSolutionFilter == 'Total Invoice Count') {\r\n obj2.value = element.AGGR_INV_COUNT;\r\n obj2.name = element.SAP_ARIBA_BUY_PROCESS;\r\n array2.push(obj2);\r\n }\r\n });\r\n\r\n let type = '';\r\n if (this.state.scopeSolutionFilter == 'Total Invoice Spend') {\r\n type = 'Spend'\r\n } else if(this.state.scopeSolutionFilter == 'Total Supplier Count') {\r\n type = 'Count'\r\n }else{\r\n type = 'Invoice_Count'\r\n }\r\n\r\n this.setState({ scopeSummaryData: array, type: type, buyProcessData: array2 });\r\n this.props.scopeSummaryBuyProcessSuccess('')\r\n }\r\n\r\n shouldComponentUpdate() {\r\n return true\r\n }\r\n\r\n getBuyProcessArray() {\r\n var array = this.state.scopeSummaryBuyProcessData\r\n\r\n if (this.state.scopeSolutionFilter == 'Total Invoice Spend') {\r\n array.sort((item1, item2) => {\r\n return item1.invSpendRank - item2.invSpendRank\r\n })\r\n } else if (this.state.scopeSolutionFilter == 'Total Supplier Count') {\r\n array.sort((item1, item2) => {\r\n return item1.supplierCountRank - item2.supplierCountRank\r\n })\r\n } else if (this.state.scopeSolutionFilter == 'Total Invoice Count') {\r\n array.sort((item1, item2) => {\r\n return item1.invCountRank - item2.invCountRank\r\n })\r\n }\r\n\r\n var arrayFinal = array.slice(0, 10);\r\n var obj = {\r\n industryLevel: 0,\r\n industryDesc: 'Other Industries',\r\n aggrInvSpend: 0,\r\n aggrInvCount: 0,\r\n supplierCount: 0,\r\n aggrInvSpendPerc: 0,\r\n aggrInvCountPerc: 0,\r\n aggSupplierCountPerc: 0,\r\n invSpendRank: 0,\r\n invCountRank: 0,\r\n supplierCountRank: 0,\r\n }\r\n\r\n array.slice(0, 10).forEach((item) => {\r\n obj.aggrInvSpendPerc += Number(item.aggrInvSpendPerc === null? 100 : item.aggrInvSpendPerc.toFixed(1))\r\n obj.aggrInvCountPerc += Number(item.aggrInvCountPerc === null? 100 : item.aggrInvCountPerc.toFixed(1))\r\n obj.aggSupplierCountPerc += Number(item.aggSupplierCountPerc === null? 100 : item.aggSupplierCountPerc.toFixed(1))\r\n })\r\n\r\n var foundOtherIndustries = false\r\n array.slice(10).forEach((item) => {\r\n foundOtherIndustries = true\r\n obj.aggrInvSpend += Number(item.aggrInvSpend === null? 0 : item.aggrInvSpend.toFixed(2))\r\n obj.aggrInvCount += item.aggrInvCount\r\n obj.supplierCount += item.supplierCount\r\n })\r\n\r\n if (foundOtherIndustries) {\r\n obj.aggrInvSpendPerc = 100 - obj.aggrInvSpendPerc\r\n obj.aggrInvCountPerc = 100 - obj.aggrInvCountPerc\r\n obj.aggSupplierCountPerc = 100 - obj.aggSupplierCountPerc\r\n\r\n arrayFinal.push(obj)\r\n }\r\n\r\n return arrayFinal\r\n }\r\n\r\n buyProcessSolutionChange(value) {\r\n this.setState({ buyProcessSolutionSelected: value.label }, this.getScopeSummaryBuyProcess);\r\n }\r\n\r\n buyProcessChange(value) {\r\n this.setState({ buyProcessSelected: value.label }, this.getScopeSummaryBuyProcess);\r\n }\r\n\r\n industryLevelChange(value) {\r\n this.setState({ industryLevelSelected: value.label }, this.getScopeSummaryBuyProcess);\r\n }\r\n\r\n aggregateSupplierValues() {\r\n var total = 0;\r\n this.state.scopeSummaryBuyProcessData.forEach((item) => {\r\n if (this.state.scopeSolutionFilter == 'Total Invoice Spend') {\r\n total += Number(this.getRoundedValue(item.aggrInvSpend, 0, 2)) \r\n } else if (this.state.scopeSolutionFilter == 'Total Supplier Count') {\r\n total += Number(this.getRoundedValue(item.supplierCount, 0, 0))\r\n } else if (this.state.scopeSolutionFilter == 'Total Invoice Count') {\r\n total += Number(this.getRoundedValue(item.aggrInvCount, 0, 0))\r\n }\r\n \r\n })\r\n\r\n if (this.state.scopeSolutionFilter == 'Total Invoice Spend') {\r\n return this.state.currencySymbol+formatThousands(this.getRoundedValue(total / 1000000.0, 0, 2))+' M'\r\n } else if (this.state.scopeSolutionFilter == 'Total Supplier Count') {\r\n return formatThousands(total);\r\n } else if (this.state.scopeSolutionFilter == 'Total Invoice Count') {\r\n return formatThousands(this.getRoundedValue(total / 1000.0, 0, 2))+' K'\r\n }\r\n }\r\n\r\n getRoundedValue(value, defaultValue, roundDigits) {\r\n return (value === null || isNaN(value))? defaultValue : value.toFixed(roundDigits)\r\n }\r\n\r\n supplierPercentage(item) {\r\n if (this.state.scopeSolutionFilter == 'Total Invoice Spend') {\r\n return this.getRoundedValue(item.aggrInvSpendPerc, 100, 1)\r\n } else if (this.state.scopeSolutionFilter == 'Total Supplier Count') {\r\n return this.getRoundedValue(item.aggSupplierCountPerc, 100, 1)\r\n } else if (this.state.scopeSolutionFilter == 'Total Invoice Count') {\r\n return this.getRoundedValue(item.aggrInvCountPerc, 100, 1)\r\n }\r\n }\r\n\r\n supplierNumbers(item) {\r\n if (this.state.scopeSolutionFilter == 'Total Invoice Spend') {\r\n return this.state.currencySymbol+formatThousands(this.getRoundedValue(item.aggrInvSpend/1000000.00, 0, 2))+' M'\r\n } else if (this.state.scopeSolutionFilter == 'Total Supplier Count') {\r\n return formatThousands(this.getRoundedValue(item.supplierCount, 0, 0))\r\n } else if (this.state.scopeSolutionFilter == 'Total Invoice Count') {\r\n return formatThousands(this.getRoundedValue(item.aggrInvCount/1000, 0, 2))+' K'\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n // language: state.language,\r\n // ui: state.content.ui,\r\n user: state.default,\r\n content: state.content.spendAnalysis.scopeSummary,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n noData: state.content.spendAnalysis.defineScope,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n scopeSummarySuccess: message => dispatch(scopeSummarySuccess(message)),\r\n scopeSummaryFailure: error => dispatch(scopeSummaryFailure(error)),\r\n resetError: error => dispatch(resetError(error)),\r\n scopeSummaryLoading: bool => dispatch(scopeSummaryLoading(bool)),\r\n getScopeSummarySolution: (formValues) => dispatch(getScopeSummarySolution(formValues)),\r\n getBuyProcessSummary: (values) => dispatch(getBuyProcessSummary(values)),\r\n getScopeSummaryBuyProcess: (formValues) => dispatch(getScopeSummaryBuyProcess(formValues)),\r\n scopeSummaryBuyProcessSuccess: message => dispatch(scopeSummaryBuyProcessSuccess(message)),\r\n scopeSummaryBuyProcessFailure: error => dispatch(scopeSummaryBuyProcessFailure(error)),\r\n scopeSummaryBuyProcessLoading: bool => dispatch(scopeSummaryBuyProcessLoading(bool)),\r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(ScopeSummaryContainer)\r\n","import React from 'react';\r\nimport * as d3 from 'd3';\r\nimport * as topojson from \"topojson-client\";\r\nimport { convertToMillion, formatThousands, convertToThousands } from 'utils/Utils';\r\n\r\nclass WorldMap extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n mapData: [],\r\n }\r\n\r\n this.drawChart = this.drawChart.bind(this);\r\n }\r\n\r\n // componentDidMount() {\r\n // this.drawChart(this.props);\r\n // }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.dValue !== this.props.dValue && nextProps.domain.length > 0) {\r\n //Perform some operation\r\n this.drawChart(nextProps);\r\n }\r\n if (nextProps.countryData.length > 0 && nextProps.countryData !== this.state.mapData && nextProps.domain.length > 0) {\r\n this.setState({ mapData: nextProps.countryData }, this.drawChart(nextProps))\r\n }\r\n }\r\n\r\n\r\n drawChart = (props) => {\r\n d3.select(\"#worldMapId\").selectAll(\"svg\").remove();\r\n Promise.all([\r\n d3.json(\"data/world_countries.json\")\r\n ]).then(\r\n d => this.ready(null, d[0], props)\r\n );\r\n }\r\n\r\n\r\n ready(error, data, props) {\r\n let population = props.countryData\r\n\r\n const format = d3.format(',');\r\n // var colorscale = d3.schemeBlues[9];\r\n // var color = d3.scaleQuantize()\r\n // .domain(props.domain)\r\n // .range(colorscale);\r\n\r\n const color = d3.scaleThreshold()\r\n .domain(props.domain)\r\n .range([\r\n 'rgb(15, 170, 255)',\r\n 'rgb(0, 143, 211)',\r\n 'rgb(0, 118, 203)',\r\n 'rgb(15, 70, 167)',\r\n 'rgb(0, 50, 131)',\r\n 'rgb(0, 25, 90)'\r\n ]);\r\n // following is the vibgyor color patteren used for testing difference\r\n // .range([\r\n // 'rgb(255, 0, 0)',\r\n // 'rgb(255, 127, 0)',\r\n // 'rgb(255, 255, 0)',\r\n // 'rgb(0, 255, 0)',\r\n // 'rgb(0, 0, 255)',\r\n // 'rgb(75, 0, 130)' \r\n // ]);\r\n // .range([\r\n // // 'rgb(232,244,255)',\r\n // 'rgb(196,220,242)',\r\n // 'rgb(177,211,242)',\r\n // 'rgb(158,202,225)',\r\n // 'rgb(107,174,214)',\r\n // 'rgb(66,146,198)',\r\n // 'rgb(33,113,181)',\r\n // 'rgb(8,81,156)',\r\n // 'rgb(8,48,107)',\r\n // 'rgb(3,19,43)'\r\n // ]);\r\n\r\n // .range([\r\n // 'rgb(247,251,255)',\r\n // 'rgb(222,235,247)',\r\n // 'rgb(198,219,239)',\r\n // 'rgb(158,202,225)',\r\n // 'rgb(107,174,214)',\r\n // 'rgb(66,146,198)',\r\n // 'rgb(33,113,181)',\r\n // 'rgb(8,81,156)',\r\n // 'rgb(8,48,107)',\r\n // 'rgb(3,19,43)'\r\n // ]);\r\n\r\n const margin = { top: 0, right: 0, bottom: 0, left: 0 };\r\n const width = 960 - margin.left - margin.right;\r\n const height = 450 - margin.top - margin.bottom;\r\n\r\n // Define the div for the tooltip\r\n d3.select('#tooltipdiv').remove();\r\n var div = d3.select(\"body\").on(\"click\", () => {\r\n div.transition()\r\n .duration(100)\r\n .style(\"opacity\", 0);\r\n }).append(\"div\").attr(\"id\", 'tooltipdiv')\r\n .attr(\"class\", \"tooltip\")\r\n .style(\"opacity\", 0)\r\n .style(\"max-width\", \"12rem\");\r\n\r\n var svg = d3.select(\"#worldMapId\").append(\"svg\")\r\n .attr('preserveAspectRatio', 'xMinYMin meet')\r\n .attr(\r\n 'viewBox',\r\n '0 0 ' +\r\n (width + margin.left + margin.right) +\r\n ' ' +\r\n (height + margin.top + margin.bottom)\r\n )\r\n .append(\"g\")\r\n .attr(\"transform\",\r\n \"translate(\" + margin.left + \",\" + margin.top + \")\")\r\n .attr('class', 'map');\r\n\r\n const projection = d3.geoMercator()\r\n .scale(148)\r\n .rotate([352, 0, 0])\r\n .translate([width / 2, height / 2]);\r\n\r\n const path = d3.geoPath().projection(projection);\r\n\r\n const invoiceSpend = {};\r\n const country = {};\r\n const invoiceCount = {};\r\n const poSpend = {};\r\n const poCount = {};\r\n const vendorCount = {};\r\n\r\n // population.forEach(d => { populationById[d.ISO_COUNTRY_CODE] = +d.AGGR_INV_SPEND; country[d.ISO_COUNTRY_CODE] = d.name; count[d.ISO_COUNTRY_CODE] = +d.count; });\r\n // data.features.forEach(d => { d.AGGR_INV_SPEND = populationById[d.id]; d.name = country[d.id]; d.count = count[d.id] });\r\n population.forEach(d => {\r\n invoiceSpend[d.ISO_COUNTRY_CODE] = +d.AGGR_INV_SPEND;\r\n country[d.ISO_COUNTRY_CODE] = d.COUNTRY_NAME;\r\n invoiceCount[d.ISO_COUNTRY_CODE] = +d.AGGR_INV_CNT;\r\n poSpend[d.ISO_COUNTRY_CODE] = +d.AGGR_PO_SPEND;\r\n poCount[d.ISO_COUNTRY_CODE] = +d.AGGR_PO_CNT;\r\n vendorCount[d.ISO_COUNTRY_CODE] = +d.VENDOR_ID_CNT;\r\n });\r\n data.features.forEach(d => {\r\n d.AGGR_INV_SPEND = invoiceSpend[d.id] >= 0 ? invoiceSpend[d.id] : -1;\r\n d.name = country[d.id] != undefined && d.id !== 'FRA'? country[d.id] : d.properties.name;\r\n d.invoiceCount = invoiceCount[d.id] >= 0 ? invoiceCount[d.id] : -1;\r\n d.poSpend = poSpend[d.id] >= 0 ? poSpend[d.id] : -1;\r\n d.poCount = poCount[d.id] >= 0 ? poCount[d.id] : -1;\r\n d.vendorCount = vendorCount[d.id] >= 0 ? vendorCount[d.id] : -1;\r\n });\r\n\r\n function fillColor(d) {\r\n //return color(props.dValue == 'AGGR_INV_SPEND' ? invoiceSpend[d.id] : props.dValue == 'AGGR_INV_CNT'? invoiceCount[d.id] : props.dValue == 'AGGR_PO_SPEND' ? poSpend[d.id] : props.dValue == 'AGGR_PO_CNT' ? poCount[d.id] : vendorCount[d.id])\r\n var colorValue;\r\n if (props.dValue == 'AGGR_INV_SPEND') {\r\n colorValue = invoiceSpend[d.id] != undefined ? invoiceSpend[d.id] : -1;\r\n } else if (props.dValue == 'AGGR_INV_CNT') {\r\n colorValue = invoiceCount[d.id] != undefined ? invoiceCount[d.id] : -1;\r\n } else if (props.dValue == 'AGGR_PO_SPEND') {\r\n colorValue = poSpend[d.id] != undefined ? poSpend[d.id] : -1;\r\n } else if (props.dValue == 'AGGR_PO_CNT') {\r\n colorValue = poCount[d.id] != undefined ? poCount[d.id] : -1;\r\n } else {\r\n colorValue = vendorCount[d.id] != undefined ? vendorCount[d.id] : -1;\r\n }\r\n\r\n if (colorValue > 0) {\r\n return color(colorValue);\r\n } else {\r\n return 'lightgray';\r\n }\r\n\r\n }\r\n svg.append('g')\r\n .attr('class', 'countries')\r\n .selectAll('path')\r\n .data(data.features)\r\n .enter().append('path')\r\n .attr('d', path)\r\n .style('fill', d => fillColor(d))\r\n .style('stroke', 'white')\r\n .style('opacity', 0.8)\r\n .style('stroke-width', 0.3)\r\n .on('dblclick', function (data) {\r\n props.onDoubleClick(data)\r\n })\r\n // tooltips\r\n .on('mouseover', function (data) {\r\n d3.select(this)\r\n .style('opacity', 1)\r\n .style('stroke-width', 3)\r\n div.transition()\r\n .duration(200)\r\n .style(\"opacity\", 1).style(\"cursor\", 'pointer')\r\n // div.html(\"Country: \" + data.name + \"\r\n
\r\n \r\n
\r\n {(this.props.content.title)}{
\r\n {this.props.content.subTitle}
\r\n \r\n option.value === this.state.scopeSolutionFilter\r\n )}\r\n onChange={value => this.handleSolutionChange(value)}\r\n options={this.state.scopeSolution}\r\n isSearchable={false}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.props.content.scopeTitle}\r\n
\r\n \r\n {this.state.scopeSummaryData !== (null && '' && undefined) && this.state.scopeSummaryData.length > 0 ?\r\n
\r\n {this.props.noData.noDataFound}
\r\n }\r\n \r\n \r\n
\r\n \r\n
\r\n {this.state.type == 'Spend'? this.props.content.inScopeSpend : this.props.content.inScopeCount}
\r\n {this.state.type == 'Spend'? this.props.content.outScopeSpend : this.props.content.outScopeCount}
\r\n \r\n
\r\n \r\n {this.props.content.buyProcessTitle}\r\n
\r\n \r\n {this.state.buyProcessData !== (null && '' && undefined) && this.state.buyProcessData.length > 0 ?\r\n
\r\n {this.props.noData.noDataFound}
\r\n }\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {this.props.content.top10SupplierIndustries}
\r\n \r\n
\r\n \r\n {this.props.content.inScope}:\r\n {this.aggregateSupplierValues()}\r\n
\r\n \r\n \r\n option.label === this.state.buyProcessSolutionSelected)}\r\n onChange={(value) => this.buyProcessSolutionChange(value)}\r\n validators={{ required: validators.required }}\r\n validateOn='change'\r\n options={this.state.solutionsOptions}\r\n isSearchable={false}\r\n noOptionsMessage={() => null}\r\n />\r\n
\r\n \r\n \r\n option.label === this.state.buyProcessSelected)}\r\n onChange={(value) => this.buyProcessChange(value)}\r\n validators={{ required: validators.required }}\r\n validateOn='change'\r\n options={this.state.buyProcessOptions}\r\n isSearchable={false}\r\n noOptionsMessage={() => null}\r\n />\r\n
\r\n \r\n \r\n option.label === this.state.industryLevelSelected)}\r\n onChange={(value) => this.industryLevelChange(value)}\r\n validators={{ required: validators.required }}\r\n validateOn='change'\r\n options={this.state.industryLevelOptions}\r\n isSearchable={false}\r\n noOptionsMessage={() => null}\r\n />\r\n
\r\n \r\n {!this.state.isError ? {this.getBuyProcessArray().map((item, index) => {\r\n return ( :
\r\n \r\n
)\r\n })}{index + 1}
\r\n {item.industryDesc}
\r\n {this.supplierPercentage(item)}%
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.supplierPercentage(item)}\r\n
\r\n \r\n {this.supplierNumbers(item)}\r\n
\r\n {this.state.errorMessage}
}\r\n Population: \" + format(data.population) + \"\")\r\n // .style(\"left\", (d3.event.pageX) + \"px\")\r\n // .style(\"top\", (d3.event.pageY - 28) + \"px\")\r\n if (props.dValue == 'AGGR_INV_SPEND') {\r\n\r\n div.html(\"Country: \" + data.name + \"
Invoice Spend: \" + (data.AGGR_INV_SPEND > 0 ? props.currency + convertToMillion(data.AGGR_INV_SPEND, true) : 'N/A') + \"\")\r\n .style(\"left\", (d3.event.pageX) + \"px\")\r\n .style(\"top\", (d3.event.pageY - 28) + \"px\")\r\n\r\n } else if (props.dValue == 'AGGR_INV_CNT') {\r\n\r\n div.html(\"Country: \" + data.name + \"
Invoice Count: \" + (data.invoiceCount > 0 ? format(data.invoiceCount) : 'N/A') + \"\")\r\n .style(\"left\", (d3.event.pageX) + \"px\")\r\n .style(\"top\", (d3.event.pageY - 28) + \"px\")\r\n\r\n } else if (props.dValue == 'AGGR_PO_SPEND') {\r\n\r\n div.html(\"Country: \" + data.name + \"
PO Spend: \" + (data.poSpend > 0 ? props.currency + convertToMillion(data.poSpend, true) : 'N/A') + \"\")\r\n .style(\"left\", (d3.event.pageX) + \"px\")\r\n .style(\"top\", (d3.event.pageY - 28) + \"px\")\r\n\r\n } else if (props.dValue == 'AGGR_PO_CNT') {\r\n\r\n div.html(\"Country: \" + data.name + \"
PO Count: \" + (data.poCount > 0 ? format(data.poCount) : 'N/A') + \"\")\r\n .style(\"left\", (d3.event.pageX) + \"px\")\r\n .style(\"top\", (d3.event.pageY - 28) + \"px\")\r\n\r\n } else {\r\n\r\n div.html(\"Country: \" + data.name + \"
Vendor Count: \" + (data.vendorCount > 0 ? format(data.vendorCount) : 'N/A') + \"\")\r\n .style(\"left\", (d3.event.pageX) + \"px\")\r\n .style(\"top\", (d3.event.pageY - 28) + \"px\")\r\n\r\n }\r\n\r\n })\r\n .on('mouseout', function (d) {\r\n // tips.hide(d);\r\n d3.select(this)\r\n .style('opacity', 0.8)\r\n .style('stroke-width', 0.3);\r\n });\r\n\r\n svg.append('path')\r\n .datum(topojson.mesh(data.features, (a, b) => a.id !== b.id))\r\n .attr('class', 'names')\r\n .attr('d', path);\r\n\r\n // legend({\r\n // color: d3.scaleSequentialLog([1, 100], d3.interpolateBlues),\r\n // title: \"Energy (joules)\",\r\n // ticks: 10,\r\n // tickFormat: \".0s\"\r\n // })\r\n props.showLoading(false)\r\n }\r\n\r\n\r\n\r\n render() {\r\n return (\r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\n\r\nexport default WorldMap","import React from 'react';\r\nimport * as d3 from 'd3';\r\n\r\nimport { convertToMillion, formatThousands, convertToThousands } from 'utils/Utils'\r\n\r\n\r\nclass ColorLegend extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n summaryScopeData: [],\r\n\r\n }\r\n\r\n this.drawChart = this.drawChart.bind(this);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.dValue !== this.props.dValue && nextProps.domain.length > 0) {\r\n //Perform some operation\r\n this.drawChart(nextProps);\r\n }\r\n\r\n if (nextProps.countryData !== this.state.mapData && nextProps.domain.length > 0) {\r\n this.setState({ mapData: nextProps.countryData }, this.drawChart(nextProps))\r\n }\r\n }\r\n\r\n\r\n drawChart = (props) => {\r\n d3.select(\"#colorid\").selectAll(\"svg\").remove();\r\n var svg = d3.select(\"#colorid\").append(\"svg\");\r\n\r\n //var colorscale = d3.schemeBlues[9];\r\n // var color = d3.scaleQuantize()\r\n // .domain(props.range)\r\n // .range(colorscale);\r\n // var colorscale = [\r\n // // 'rgb(232,244,255)',\r\n // 'rgb(196,220,242)',\r\n // 'rgb(177,211,242)',\r\n // 'rgb(158,202,225)',\r\n // 'rgb(107,174,214)',\r\n // 'rgb(66,146,198)',\r\n // 'rgb(33,113,181)',\r\n // 'rgb(8,81,156)',\r\n // 'rgb(8,48,107)',\r\n // 'rgb(3,19,43)'\r\n // ];\r\n\r\n var colorscale = [\r\n 'rgb(15, 170, 255)',\r\n 'rgb(0, 143, 211)',\r\n 'rgb(0, 118, 203)',\r\n 'rgb(15, 70, 167)',\r\n 'rgb(0, 50, 131)',\r\n 'rgb(0, 25, 90)'\r\n ];\r\n // following is the vibgyor color patteren used for testing difference\r\n // var colorscale = [\r\n // 'rgb(255, 0, 0)',\r\n // 'rgb(255, 127, 0)',\r\n // 'rgb(255, 255, 0)',\r\n // 'rgb(0, 255, 0)',\r\n // 'rgb(0, 0, 255)',\r\n // 'rgb(75, 0, 130)'\r\n // ];\r\n const color = d3.scaleQuantize()\r\n .domain(props.range)\r\n .range(colorscale);\r\n\r\n\r\n drawColorScale();\r\n\r\n function drawColorScale() {\r\n var pallete = svg.append('g')\r\n .attr('id', 'pallete');\r\n\r\n const format = d3.format(',');\r\n var swatch = pallete.selectAll('rect').data(colorscale);\r\n swatch.enter().append('rect')\r\n .attr('fill', function (d) {\r\n return d;\r\n })\r\n .attr('x', function (d, i) {\r\n return i * 50;\r\n })\r\n .attr('y', 50)\r\n .attr('width', 50)\r\n .attr('height', 10);\r\n\r\n var texts = pallete.selectAll(\"foo\")\r\n .data(props.domain)\r\n .enter()\r\n .append(\"text\")\r\n .attr(\"font-size\", \"10px\")\r\n .attr(\"text-anchor\", \"middle\")\r\n .attr(\"y\", 80)\r\n .attr('x', function (d, i) {\r\n return i * 50 + 25;\r\n })\r\n .text(function (d, i) {\r\n return props.dValue == 'AGGR_INV_SPEND' || props.dValue == 'AGGR_PO_SPEND' ? i == 0 ? convertToMillion(0) : convertToMillion(props.domain[i - 1]) : i == 0 ? format(Math.round(0)) : format(Math.round(props.domain[i - 1]))\r\n })\r\n .append(\"tspan\")\r\n .attr(\"dy\", \"1.3em\")\r\n .attr('x', function (d, i) {\r\n return i * 50 + 25;\r\n })\r\n .text(\"to\")\r\n .append(\"tspan\")\r\n .attr(\"dy\", \"1.3em\")\r\n .attr('x', function (d, i) {\r\n return i * 50 + 25;\r\n })\r\n .text(function (d, i) {\r\n return props.dValue == 'AGGR_INV_SPEND' || props.dValue == 'AGGR_PO_SPEND' ? convertToMillion(props.domain[i]) : format(Math.round(props.domain[i]))\r\n })\r\n\r\n }\r\n }\r\n\r\n\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\n\r\nexport default ColorLegend","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { ControlTextE, SelectE, CheckboxE, ScreenE, PopupE, CustomGridE } from 'UI/CustomComponents/Controls';\r\nimport { WorldMapSupplierColumnsForPopUp } from 'Constants'\r\nimport TextfilterRenderer from 'UI/TextFilterRenderer';\r\nimport NumericFilterRenderer from 'UI/NumericFilterRenderer';\r\nimport AutoCompleteFilterAdv from 'UI/AutoCompleteFilterAdv';\r\nimport NumericEditor from 'UI/NumericEditor';\r\nimport { formatter, getNonEmptyValue, binarySearchIndex } from \"utils/Utils\";\r\nimport {\r\n resetError,\r\n getResultLoading, getResultSuccess, getResultFailure\r\n} from 'actions/spendActions'\r\n\r\nclass WorldMapSupplierDetailsPopup extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n data: props.suppliersData,\r\n columns: []\r\n }\r\n }\r\n componentDidMount() {\r\n let columns = this.initializeColumns()\r\n this.setState({ columns: columns })\r\n }\r\n\r\n // static getDerivedStateFromProps(nextProps, state) {\r\n // if (nextProps.suppliersData != state.data) {\r\n // return ({ data: nextProps.suppliersData })\r\n // }\r\n // }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.suppliersData != this.state.data) {\r\n this.setState({ data: nextProps.suppliersData })\r\n }\r\n }\r\n\r\n initializeColumns() {\r\n let columns = []\r\n let _self = this\r\n for (let index = 0; index < WorldMapSupplierColumnsForPopUp.length; index++) {\r\n const fieldConfig = WorldMapSupplierColumnsForPopUp[index];\r\n\r\n let tableColumn = {\r\n name: fieldConfig.screen_field_name,\r\n key: fieldConfig.field,\r\n width: 150,\r\n sortable: true,\r\n editable: fieldConfig.is_editable === 'Yes',\r\n resizable: true,\r\n filterable: true,\r\n screenSeq: fieldConfig.screen_seq,\r\n mandatory: fieldConfig.mandatory === 'Yes',\r\n exportFl: fieldConfig.export_fl === 'Yes',\r\n helpText: fieldConfig.screen_help_text\r\n }\r\n\r\n if (fieldConfig.filter_type !== 'default') {\r\n tableColumn['filterRenderer'] = fieldConfig.data_type === 'text' ? AutoCompleteFilterAdv : NumericFilterRenderer\r\n } else {\r\n tableColumn['filterRenderer'] = TextfilterRenderer\r\n }\r\n\r\n tableColumn.editable = tableColumn.editable && !this.props.readOnly\r\n\r\n tableColumn['formatter'] = formatter(fieldConfig.alignment)\r\n\r\n columns.push(tableColumn)\r\n }\r\n\r\n this.setState({ columnDefs: columns })\r\n return columns;\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n (this.customGridRef = ref)}\r\n columns={this.state.columns}\r\n data={this.state.data}\r\n keyColumn=\"REF_NUM\"\r\n />\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n userData: state.valueStory,\r\n user: state.default,\r\n content: state.content.spendAnalysis.worldMap,\r\n focusLabel: state.content.spendAnalysis.enablement.focusLabel,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getResultSuccess: message => dispatch(getResultSuccess(message)),\r\n getResultFailure: error => dispatch(getResultFailure(error)),\r\n getResultLoading: bool => dispatch(getResultLoading(bool)),\r\n resetError: error => dispatch(resetError(error))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(WorldMapSupplierDetailsPopup)","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport WorldMap from './WorldMap';\r\nimport ColorLegend from '../../UI/colorScale';\r\nimport Select from 'react-select'\r\nimport {path, modalStyle, modalContentStyle, changeModalBorderStyle, changeModalBorderRectStyle, drilldownModalBorderContentStyle } from 'Constants'\r\nimport {\r\n getHeatMapData,\r\n resetError,\r\n getResultLoading, getResultSuccess, getResultFailure, getWorldMapSuppliersDetails\r\n} from 'actions/spendActions'\r\nimport VideoHelp from 'components/UI/VideoHelp'\r\nimport Popup from \"reactjs-popup\";\r\nimport Modal from 'reboron/OutlineModal'\r\nimport WorldMapSupplierDetailsPopup from './WorldMapSupplierDetailsPopup'\r\n\r\nfunction getScales(minRange, maxRange, min, max) {\r\n var scales = [], // Prepare some variables\r\n ranges = maxRange - minRange, // Amount of elements to be returned.\r\n range = (max - min) / ranges; // Difference between min and max\r\n for (var i = 0; i < ranges; i++) {\r\n scales.push(min + range * (i + 1))\r\n }\r\n // console.log(\"Scale\", scales)\r\n return scales;\r\n}\r\n\r\nclass WorldMapContainer extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n dropDownValues: [\r\n { value: \"AGGR_INV_SPEND\", label: \"Invoice Spend\" },\r\n { value: \"AGGR_INV_CNT\", label: \"Invoice Count\" },\r\n { value: \"AGGR_PO_SPEND\", label: \"PO Spend\" },\r\n { value: \"AGGR_PO_CNT\", label: \"PO Count\" },\r\n { value: \"VENDOR_ID_CNT\", label: \"Vendor Count\" }\r\n ],\r\n selectedValue: 'AGGR_INV_SPEND',\r\n countryData: [],\r\n domain: [],\r\n range: [],\r\n isLoading: true,\r\n inputParam: null\r\n }\r\n this.loadData = this.loadData.bind(this);\r\n this.randomBetween = this.randomBetween.bind(this);\r\n this.randomBetweenRange = this.randomBetweenRange.bind(this);\r\n this.showLoading = this.showLoading.bind(this); \r\n this.showModal = this.showModal.bind(this);\r\n this.hideModal = this.hideModal.bind(this);\r\n }\r\n showLoading(value) {\r\n if (!value)\r\n this.props.getResultSuccess()\r\n this.setState({ isLoading: value })\r\n }\r\n\r\n showModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n this.refs[action].hide()\r\n }\r\n\r\n randomBetween = (a, b) => {\r\n return ((Math.random() * (b - a)) + a).toFixed(0);\r\n };\r\n\r\n randomBetweenRange = (num, range) => {\r\n const res = [];\r\n for (let i = 0; i < num;) {\r\n const random = this.randomBetween(range[0], range[1]);\r\n if (!res.includes(random)) {\r\n res.push(random);\r\n i++;\r\n };\r\n };\r\n return res;\r\n };\r\n\r\n componentDidMount() {\r\n this.loadData();\r\n }\r\n\r\n loadData() {\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsID = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let userEmail = this.props.user.user.Email;\r\n this.props.getResultLoading(true);\r\n this.props.getHeatMapData(dmcId, vsID, userEmail).then((response) => {\r\n try {\r\n let result = response.data.Result;\r\n this.setState({ countryData: response.data.Result })\r\n //Get max and min value records\r\n let maxResult = result.reduce(function (prev, current) {\r\n return (prev.AGGR_INV_SPEND > current.AGGR_INV_SPEND) ? prev : current\r\n })\r\n let minResult = result.reduce(function (prev, current) {\r\n return (prev.AGGR_INV_SPEND < current.AGGR_INV_SPEND) ? prev : current\r\n })\r\n let max = Math.round(maxResult.AGGR_INV_SPEND);\r\n let min = Math.round(minResult.AGGR_INV_SPEND);\r\n\r\n if (min == 0 && max == 0) {\r\n this.showLoading(false)\r\n this.setState({ errorMessage: \"The selected focus has no data\", isLoading: false, domain: [0, 0], range: [0, 0] });\r\n } else {\r\n let range = [min, max * 2];\r\n\r\n //create domain range for charts\r\n // let domain = this.randomBetweenRange(6, range);\r\n // domain.sort(function (a, b) { return a - b });\r\n let domain = getScales(0, 6, min, max);\r\n this.setState({ countryData: response.data.Result, domain: domain, range: range, errorMessage: '' })\r\n // console.log(\"random number domain\", domain);\r\n }\r\n\r\n }\r\n catch (e) {\r\n this.showLoading(false)\r\n }\r\n })\r\n .catch((response) => {\r\n this.props.getResultFailure(\"Request data not found\");\r\n this.setState({ isLoading: false })\r\n })\r\n }\r\n\r\n handleChange(data) {\r\n\r\n let value = data.value;\r\n let result = this.state.countryData;\r\n if (value != this.state.selectedValue) {\r\n this.setState({ isLoading: true })\r\n try {\r\n let maxResult = result.reduce(function (prev, current) {\r\n return (prev[value] > current[value]) ? prev : current\r\n })\r\n let minResult = result.reduce(function (prev, current) {\r\n return (prev[value] < current[value]) ? prev : current\r\n })\r\n let max = Math.round(maxResult[value]);\r\n let min = Math.round(minResult[value]);\r\n if (min == 0 && max == 0) {\r\n this.showLoading(false)\r\n // this.setState({ selectedValue: value })\r\n this.setState({ errorMessage: \"The selected focus has no data\", selectedValue: value, domain: [0, 0], range: [0, 0] });\r\n } else {\r\n let range = [min, max * 2];\r\n // let domain = this.randomBetweenRange(6, range);\r\n // domain.sort(function (a, b) { return a - b });\r\n let domain = getScales(0, 6, min, max);\r\n this.setState({ selectedValue: value, domain: domain, range: range, errorMessage: '' })\r\n }\r\n\r\n }\r\n catch (e) {\r\n this.setState({ isLoading: false })\r\n }\r\n }\r\n }\r\n\r\n onDoubleClick(data) {\r\n console.log(data)\r\n let dmcId = this.props.spendDetails.currentActiveRequest.DMC_ID;\r\n let vsID = this.props.spendDetails.currentActiveRequest.VS_ID;\r\n let userEmail = this.props.user.user.Email;\r\n let country = data.id;\r\n let inputData = {\r\n DMC_ID: dmcId, VS_ID: vsID, USER_ID: userEmail,\r\n ISO_COUNTRY_CODE: country\r\n }\r\n\r\n this.props.getWorldMapSuppliersDetails(inputData)\r\n .then((response) => {\r\n this.setState({ supplierData: response.data.Result, inputParam: inputData }, this.showModal(\"taskSuppliers\"))\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator', isError: 'Yes' }, this.showModal(\"taskSuppliers\"))\r\n }\r\n else {\r\n this.setState({ responseMsg: 'An error has occurred', isError: 'Yes' }, this.showModal(\"taskSuppliers\"))\r\n }\r\n })\r\n }\r\n\r\n render() {\r\n return (\r\n {this.props.input !== null ? this.props.input.ISO_COUNTRY_CODE : null}
\r\n {this.props.content.tabHeader}
\r\n \r\n this.onDoubleClick(e)} />\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n userData: state.valueStory,\r\n user: state.default,\r\n content: state.content.spendAnalysis.worldMap,\r\n focusLabel: state.content.spendAnalysis.enablement.focusLabel,\r\n spendDetails: state.spendDetails,\r\n currencySymbols: state.content.CurrencySymbols,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n getResultSuccess: message => dispatch(getResultSuccess(message)),\r\n getResultFailure: error => dispatch(getResultFailure(error)),\r\n getResultLoading: bool => dispatch(getResultLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n getHeatMapData: (DMC_ID, VS_ID, User_ID) => dispatch(getHeatMapData(DMC_ID, VS_ID, User_ID)),\r\n getWorldMapSuppliersDetails: (data) => dispatch(getWorldMapSuppliersDetails(data))\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(WorldMapContainer)\r\n","import React from 'react'\r\nimport{connect} from 'react-redux'\r\nimport EnablementInsightTabTable from './EnablementInsightTabTable'\r\nimport EnablementSupplierDetailsPopup from './EnablementSupplierDetailsPopup'\r\nimport ExpandableTable from './ExpandableTable'\r\nimport { path, dropdownColourStyles } from 'Constants'\r\nimport { ControlTextE, ScreenE, SelectE } from 'UI/CustomComponents/Controls';\r\n\r\n// Settings\r\nimport { changeModalBorderStyle, drilldownModalBorderContentStyle, changeModalBorderRectStyle } from 'Constants'\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nimport {\r\n enablementInsightSuccess,\r\n enablementInsightFailure,\r\n enablementInsightLoading, \r\n resetError,\r\n getEnablementDetails,\r\n getEnablementStrategyDetails,\r\n getEnablementFiltersDetails,\r\n currentActiveRequest,\r\n updateEnablementStrategyCurrentFocus\r\n} from 'actions/spendActions'\r\n\r\nclass EnablementDetails extends React.Component{\r\n constructor(props)\r\n {\r\n super(props);\r\n this.state={\r\n enablementWaveData: [],\r\n enablementWaveTotal: [],\r\n enablementWaveJson: [],\r\n enablementTypesJson: [],\r\n enablementTypes: [], \r\n grandTotal: [],\r\n isLoading: true,\r\n responseMsg: '',\r\n inputParam: {\r\n DMC_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.DMC_ID : 0\r\n , VS_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.VS_ID : 0,\r\n User_Email: this.props.spendDetails.currentActiveRequest !== undefined &&\r\n this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester,\r\n dedupStats: 'Unique',\r\n enabledCustomer: 'all',\r\n transactingCustomer: 'all',\r\n buyerRegion: 'all',\r\n businessUnit: 'all',\r\n erpSystem: 'all',\r\n l4IndustryName: 'all',\r\n erpCode: 'all',\r\n erpDesc: 'all',\r\n sicCode: 'all',\r\n sicDesc: 'all',\r\n \r\n goods: 'all',\r\n invoiceCountry: 'all',\r\n legalInvoice: 'all',\r\n aribaNwEligible: 'all',\r\n column1Name: 'SAP_ARIBA_BUY_ENABLE_MTHD_RECMD',\r\n column1Value: '',\r\n tableName: '',\r\n valuesUpdated: false,\r\n metricsType: 'Invoice Spend',\r\n directSpend: 'all' \r\n }, \r\n isL4Expand: true,\r\n isCountryExpand: true,\r\n isOnboardWrkExpand: true,\r\n isRECMDExpand: true,\r\n tableNameOption:[\r\n { value: \"l4Industry\", label: \"Enablement Strategy by Onboarding Workstream with L4 Industry Name\"},\r\n { value: \"isoCountry\", label: \"Enablement Strategy by Onboarding Workstream with ISO Country Code\"},\r\n { value: \"workstreamDetails\", label: \"Enablement Strategy by Onboarding Workstream with Details\"},\r\n { value: \"workstreamRecommendation\", label: \"Enablement Strategy by Onboarding Workstream with Enablement Recommendation\"},\r\n ],\r\n selectedTableView: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.ENABLEMENT_STRATEGY_FOCUS : \"l4Industry\",\r\n activeRequest: this.props.spendDetails.currentActiveRequest\r\n }\r\n this.showEnablementSupplierDetailsModal = this.showEnablementSupplierDetailsModal.bind(this)\r\n this.setVisibility = this.setVisibility.bind(this)\r\n this.outsidePopupClick = this.outsidePopupClick.bind(this)\r\n this.onSave = this.onSave.bind(this)\r\n this.reloadEnablementWave= this.reloadEnablementWave.bind(this)\r\n }\r\n\r\n componentDidMount(){ \r\n ////this.convertResponseToJson()\r\n this.GetEnablementDetails(this.state.inputParam)\r\n }\r\n\r\n reloadEnablementWave(){\r\n this.GetEnablementDetails(this.state.inputParam)\r\n }\r\n\r\n showEnablementSupplierDetailsModal(tableName, columnName, columnValue, columnValue2, columnValue3) {\r\n\r\n var inputParameter = this.state.inputParam\r\n inputParameter.tableName = tableName\r\n inputParameter.column1Name = columnName\r\n inputParameter.column1Value = columnValue\r\n\r\n inputParameter.column2Name = this.props.content.enablementWaveSecCol \r\n inputParameter.column2Value = columnValue2\r\n\r\n inputParameter.column3Value = columnValue3\r\n\r\n var thirdColumnName;\r\n switch(tableName){\r\n case this.props.content.enablementWaveDetails.enablementStrategyByL4Industry :\r\n thirdColumnName = this.props.content.enablementWaveL4IndustryCol\r\n break;\r\n case this.props.content.enablementWaveDetails.enablementStrategyByISOCountry :\r\n thirdColumnName = this.props.content.enablementWaveISOCountryCol\r\n break;\r\n case this.props.content.enablementWaveDetails.enablementStrategyByOnboardingWorkstream :\r\n thirdColumnName = this.props.content.enablementWaveWorkStreamDetailCol\r\n break;\r\n case this.props.content.enablementWaveDetails.enablementStrategyByRecommendation :\r\n thirdColumnName = this.props.content.enablementWaveThirdCol\r\n break; \r\n }\r\n\r\n inputParameter.column3Name = thirdColumnName;\r\n \r\n this.setState({\topenPopup: true, inputParam: inputParameter\t})\r\n }\r\n\r\n onSave(value) {\r\n this.setState({valuesUpdated: value})\r\n }\r\n\r\n setVisibility(isVisible) {\r\n this.handlePoupClose() \r\n }\r\n\r\n outsidePopupClick() { \r\n this.handlePoupClose()\r\n }\r\n \r\n handlePoupClose() {\r\n this.setState({ open: false, openPopup: false }, () => {\r\n if(this.state.valuesUpdated) {\r\n this.setState({valuesUpdated: false}, this.GetEnablementDetails(this.state.inputParam))\r\n }\r\n })\r\n }\r\n\r\n showAdvanceFilter(){\r\n var advanceFilterDiv = document.getElementById('advanceFilter').style; \r\n if (advanceFilterDiv.display === \"none\") {\r\n advanceFilterDiv.display = \"block\";\r\n } else {\r\n advanceFilterDiv.display = \"none\";\r\n }\r\n }\r\n\r\n GetEnablementDetails(inputParam) {\r\n\t\t\r\n\t\tthis.props.getEnablementStrategyDetails(inputParam)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tif (response !== undefined && response.status === 200 && response.data.Result !== undefined) {\r\n //\tsetTimeout(() => { this.props.defineScopeSuccess('') }, 2000)\r\n var enablementWaveData; var enablementWaveTotal;\r\n var l4IndustryData; var l4IndustryDataTotal;\r\n var onWorkStreamData; var onWorkStreamDataTotal;\r\n var isoCountryCodeData; var isoCountryCodeDataTotal;\r\n var enablementWaveANIDsData; var headerLevelGrandTotal; var ganttChartWorkStreamData;\r\n \r\n\r\n var tables = response.data.Result.map(\r\n function (table) {\r\n // if(table['ENABLEMENT_WAVE']!== undefined){\r\n \r\n // enablementWaveData = table['ENABLEMENT_WAVE']\r\n // enablementWaveTotal = table['GrandTotal']\r\n // }\r\n \r\n if(table['ENABLEMENT_WAVE']!== undefined){\r\n \r\n enablementWaveData = table['ENABLEMENT_WAVE']\r\n enablementWaveTotal = table['GrandTotal']\r\n }\r\n\r\n if(table['L4_INDUSTRY_GICS_ID']!== undefined){\r\n \r\n l4IndustryData = table['L4_INDUSTRY_GICS_ID']\r\n l4IndustryDataTotal = table['GrandTotal']\r\n }\r\n \r\n if(table['ISO_COUNTRY_CODE']!== undefined){\r\n \r\n isoCountryCodeData = table['ISO_COUNTRY_CODE']\r\n isoCountryCodeDataTotal = table['GrandTotal']\r\n }\r\n\r\n if(table['ONBOARDING_WORKSTREAM_DETAILS']!== undefined){\r\n \r\n onWorkStreamData = table['ONBOARDING_WORKSTREAM_DETAILS']\r\n onWorkStreamDataTotal = table['GrandTotal']\r\n }\r\n \r\n if(table['ENABLEMENT_WAVE_ANIDs']!== undefined){\r\n enablementWaveANIDsData = table['ENABLEMENT_WAVE_ANIDs'] \r\n headerLevelGrandTotal = table['GrandTotal'] \r\n }\r\n\r\n if(table['GANTT_CHART_WORKSTREAM_NAME']!== undefined){\r\n ganttChartWorkStreamData = table['GANTT_CHART_WORKSTREAM_NAME'] \r\n }\r\n }\r\n )\r\n\r\n const l4IndustryDataTemp = this.convertResponseToJson(l4IndustryData,enablementWaveANIDsData, ganttChartWorkStreamData, \"FIELD_DESC\")\r\n\r\n const isoCountryDataTemp = this.convertResponseToJson(isoCountryCodeData,enablementWaveANIDsData, ganttChartWorkStreamData, \"ISO_COUNTRY_CODE\")\r\n\r\n const onWorkStreamDataTemp = this.convertResponseToJson(onWorkStreamData,enablementWaveANIDsData, ganttChartWorkStreamData, \"ONBOARDING_WORKSTREAM_DETAILS\")\r\n\r\n const enablementWaveDataTemp = this.convertResponseToJson(enablementWaveData,enablementWaveANIDsData, ganttChartWorkStreamData, \"SAP_ARIBA_BUY_ENABLE_MTHD_RECMD\")\r\n \r\n this.setState({ enablementWaveJson: enablementWaveDataTemp, enablementWaveTotal: headerLevelGrandTotal, isLoading: false \r\n , l4IndustryDataJson: l4IndustryDataTemp, isoCountryDataJson: isoCountryDataTemp, onWorkStreamDataJson: onWorkStreamDataTemp\r\n });\r\n \r\n this.props.enablementInsightSuccess(true)\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure('API service is down. Please contact administrator.')\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n this.setState({ responseMsg: 'An error has occurred', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure(this.props.content.error)\r\n\t\t\t\t}\r\n\t\t\t})\r\n }\r\n \r\n convertResponseToJson(enablementData, aggregatedData, ganttChartWorkStreamData, thirdLevel)\r\n {\r\n let data = []\r\n let total = []\r\n let waveToItem = []\r\n let ganttChartTotal = []\r\n let ganttChartToItem = []\r\n //const enablementWaveData = this.state.enablementWaveData\r\n enablementData.forEach(item => {\r\n let datum = {\r\n ENABLEMENT_WAVE: item.ENABLEMENT_WAVE, \r\n GANTT_CHART_WORKSTREAM_NAME: item.GANTT_CHART_WORKSTREAM_NAME, \r\n [thirdLevel]: item[thirdLevel],//.SAP_ARIBA_BUY_ENABLE_MTHD_RECMD,\r\n CNT_VENDOR_NAME: isNaN(item.CNT_VENDOR_NAME)? 0 : item.CNT_VENDOR_NAME,\r\n CNT_VENDOR_PER: isNaN(item.CNT_VENDOR_PER)? 0 : Number.parseFloat(item.CNT_VENDOR_PER),\r\n CNT_UNIQ_VENDOR_AN_ID: isNaN(item.CNT_UNIQ_VENDOR_AN_ID)? 0 : Number.parseFloat(item.CNT_UNIQ_VENDOR_AN_ID),\r\n SUM_AGGR_SPEND: isNaN(item.SUM_AGGR_SPEND)? 0 : item.SUM_AGGR_SPEND,\r\n SUM_AGGR_SPEND_PER: isNaN(item.SUM_AGGR_SPEND_PER)? 0 : Number.parseFloat(item.SUM_AGGR_SPEND_PER),\r\n \r\n SUM_SAP_ARIBA_DOC_PROXY: isNaN(item.SUM_SAP_ARIBA_DOC_PROXY)? 0 : item.SUM_SAP_ARIBA_DOC_PROXY,\r\n SAP_ARIBA_DOC_PROXY_PER: isNaN(item.SAP_ARIBA_DOC_PROXY_PER)? 0 : Number.parseFloat(item.SAP_ARIBA_DOC_PROXY_PER)\r\n }\r\n\r\n data.push(datum)\r\n\r\n let datumCopy = {...datum}\r\n let datumCopy1 = {...datum}\r\n \r\n if(item.ENABLEMENT_WAVE in total) {\r\n waveToItem[item.ENABLEMENT_WAVE].push(datumCopy1)\r\n \r\n let partialTotal = total[item.ENABLEMENT_WAVE]\r\n partialTotal.CNT_VENDOR_NAME = 0\r\n partialTotal.CNT_VENDOR_PER = 0\r\n partialTotal.CNT_UNIQ_VENDOR_AN_ID = 0\r\n partialTotal.SUM_AGGR_SPEND = 0\r\n partialTotal.SUM_AGGR_SPEND_PER = 0\r\n\r\n partialTotal.SUM_AGGR_PO_SPEND = 0\r\n partialTotal.SUM_AGGR_PO_SPEND_PER = 0\r\n\r\n partialTotal.SUM_SAP_ARIBA_DOC_PROXY = 0\r\n partialTotal.SAP_ARIBA_DOC_PROXY_PER = 0\r\n\r\n } else {\r\n \r\n total[item.ENABLEMENT_WAVE] = datumCopy\r\n waveToItem[item.ENABLEMENT_WAVE] = [datumCopy1]\r\n }\r\n\r\n if(item.GANTT_CHART_WORKSTREAM_NAME in ganttChartTotal) {\r\n ganttChartToItem[item.GANTT_CHART_WORKSTREAM_NAME].push(datumCopy1)\r\n \r\n let partialTotal = ganttChartTotal[item.GANTT_CHART_WORKSTREAM_NAME]\r\n partialTotal.CNT_VENDOR_NAME = 0\r\n partialTotal.CNT_VENDOR_PER = 0\r\n partialTotal.CNT_UNIQ_VENDOR_AN_ID = 0\r\n partialTotal.SUM_AGGR_SPEND = 0\r\n partialTotal.SUM_AGGR_SPEND_PER = 0\r\n\r\n partialTotal.SUM_AGGR_PO_SPEND = 0\r\n partialTotal.SUM_AGGR_PO_SPEND_PER = 0\r\n\r\n partialTotal.SUM_SAP_ARIBA_DOC_PROXY = 0\r\n partialTotal.SAP_ARIBA_DOC_PROXY_PER = 0\r\n\r\n } else {\r\n \r\n ganttChartTotal[item.GANTT_CHART_WORKSTREAM_NAME] = datumCopy\r\n ganttChartToItem[item.GANTT_CHART_WORKSTREAM_NAME] = [datumCopy1]\r\n }\r\n\r\n })\r\n\r\n let enablementWaveDetails = {\r\n rows: []\r\n }\r\n \r\n // console.log(\"waveToItem.....\", waveToItem)\r\n // console.log(\"ganttChartToItem......\", ganttChartToItem)\r\n\r\n for (const [key, value] of Object.entries(waveToItem)) {\r\n\r\n let recommendationChild = []\r\n\r\n \r\n for (const [recKey, recValue] of Object.entries(ganttChartToItem)) { \r\n \r\n let tempData = recValue.filter(item=>item.ENABLEMENT_WAVE === key && item.GANTT_CHART_WORKSTREAM_NAME === recKey)\r\n\r\n tempData.forEach((item, index) => {\r\n recommendationChild.push({\r\n childContentId: index, \r\n content: item[thirdLevel],//.SAP_ARIBA_BUY_ENABLE_MTHD_RECMD, \r\n parent: item.GANTT_CHART_WORKSTREAM_NAME,\r\n enablementWave: item.ENABLEMENT_WAVE, \r\n data: item,\r\n expand: false\r\n })\r\n }) \r\n }\r\n \r\n let collapseChild = [] \r\n let idx = 0\r\n value.forEach((item, index) => { \r\n if(!collapseChild.some(i=>i.content === item.GANTT_CHART_WORKSTREAM_NAME)){ \r\n \r\n collapseChild.push({\r\n childContentId: index, \r\n content: item.GANTT_CHART_WORKSTREAM_NAME, \r\n enablementWave: key, \r\n data: ganttChartWorkStreamData.filter(a=> a.ENABLEMENT_WAVE===key && a.GANTT_CHART_WORKSTREAM_NAME === item.GANTT_CHART_WORKSTREAM_NAME )[0], \r\n expand: false\r\n ,collapseChild: recommendationChild.filter(rec=> rec.enablementWave === key && rec.parent === item.GANTT_CHART_WORKSTREAM_NAME)\r\n })\r\n }\r\n })\r\n\r\n enablementWaveDetails.rows.push({ \r\n \"content\" : key,\r\n \"contentId\" : idx++,\r\n \"data\": aggregatedData.filter(item=> item.ENABLEMENT_WAVE===key )[0], \r\n expand: false,\r\n collapseChild : collapseChild\r\n });\r\n }\r\n\r\n //console.log(\"jsonData\", enablementWaveDetails)\r\n return enablementWaveDetails\r\n }\r\n\r\n componentWillReceiveProps(nextProps, nextState){\r\n if (this.state.Test !== nextProps.filterData && 'dedupStats' in nextProps.filterData)\r\n {\r\n var inputParameter = this.state.inputParam\r\n inputParameter.dedupStats = nextProps.filterData.dedupStats\r\n inputParameter.enabledCustomer= nextProps.filterData.enabledCustomer\r\n inputParameter.transactingCustomer= nextProps.filterData.transactingCustomer\r\n inputParameter.buyerRegion= nextProps.filterData.buyerRegion\r\n inputParameter.businessUnit= nextProps.filterData.businessUnit\r\n inputParameter.erpSystem= nextProps.filterData.erpSystem\r\n inputParameter.l4IndustryName= nextProps.filterData.l4IndustryName\r\n inputParameter.erpCode= nextProps.filterData.erpCode \r\n inputParameter.erpDesc= nextProps.filterData.erpDesc \r\n inputParameter.sicCode= nextProps.filterData.sicCode \r\n inputParameter.sicDesc= nextProps.filterData.sicDesc\r\n inputParameter.goods= nextProps.filterData.goods\r\n inputParameter.invoiceCountry= nextProps.filterData.invoiceCountry\r\n inputParameter.legalInvoice= nextProps.filterData.legalInvoice\r\n inputParameter.aribaNwEligible= nextProps.filterData.aribaNwEligible\r\n inputParameter.metricsType= nextProps.filterData.metricsType\r\n inputParameter.directSpend= nextProps.filterData.directSpend \r\n \r\n setTimeout(() => {\r\n this.GetEnablementDetails(inputParameter);\r\n }, 1000);\r\n \r\n this.setState({Test:nextProps.filterData , inputParam: Object.keys(nextProps.filterData).length !== 0 ? nextProps.filterData : this.state.inputParam})\r\n //console.log(\"if enablemtn details filetr props-\")\r\n }\r\n else{\r\n // console.log(\"else enablemtn details filetr props-\")\r\n }\r\n \r\n }\r\n\r\n onExpandClick(e){\r\n switch(e.target.id){\r\n case \"l4Industry\":\r\n this.setState({ isL4Expand: !this.state.isL4Expand})\r\n break;\r\n \r\n case \"country\":\r\n this.setState({ isCountryExpand : !this.state.isCountryExpand})\r\n break;\r\n \r\n case \"onboardWrk\":\r\n this.setState({ isOnboardWrkExpand: !this.state.isOnboardWrkExpand})\r\n break;\r\n\r\n case \"recmd\":\r\n this.setState({ isRECMDExpand: !this.state.isRECMDExpand})\r\n break; \r\n\r\n } \r\n this.GetEnablementDetails(this.state.inputParam) \r\n }\r\n\r\n handleFocusChange(data){ \r\n var activeRequestData= this.state.activeRequest\r\n activeRequestData.ENABLEMENT_STRATEGY_FOCUS = data.value\r\n this.setState({selectedTableView : data.value, isLoading : true})\r\n \r\n var requestParam={\r\n VS_ID: this.state.inputParam.VS_ID,\r\n DMC_ID: this.state.inputParam.DMC_ID,\r\n ENABLEMENT_STRATEGY_FOCUS: data.value\r\n }\r\n \r\n this.updateEnablementStrategyFocus(requestParam)\r\n this.props.currentActiveRequest(activeRequestData)\r\n this.GetEnablementDetails(this.state.inputParam) \r\n }\r\n\r\n updateEnablementStrategyFocus(requestParam) {\r\n\t\t\r\n\t\tthis.props.updateEnablementStrategyCurrentFocus(requestParam.VS_ID, requestParam.DMC_ID, requestParam.ENABLEMENT_STRATEGY_FOCUS)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tif (response !== undefined && response.status === 200 && response.data.Result !== undefined) {\r\n \r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure('API service is down. Please contact administrator.')\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n this.setState({ responseMsg: 'An error has occurred', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure(this.props.content.error)\r\n\t\t\t\t}\r\n\t\t\t})\r\n }\r\n\r\n render()\r\n {\r\n return(\r\n \r\n
\r\n {/* \r\n
\r\n {this.props.content.title}{
\r\n {this.props.content.subTitle}
\r\n {this.props.content.note}
\r\n \r\n
\r\n \r\n option.value === this.state.selectedValue\r\n )}\r\n onChange={value => this.handleChange(value)}\r\n options={this.state.dropDownValues}\r\n isSearchable={true}\r\n isDisabled={this.state.isLoading}\r\n />\r\n
\r\n {this.props.focusLabel}
\r\n \r\n
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n
\r\n \r\n {
\r\n {this.props.content.note}
*/}\r\n {this.state.errorMessage}
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n {this.state.supplierData !== undefined && this.state.supplierData !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n \r\n \r\n
\r\n {this.state.selectedTableView===\"l4Industry\" ? \r\n\r\n //
\r\n )\r\n }\r\n\r\n}\r\n\r\n\r\nconst mapStateToProps = state => {\r\n\treturn {\r\n content: state.content.enablementInsight,\r\n //content: state.content.subLeverCalculations,\r\n\t\tui: state.content.ui,\r\n\t\tcurrency: decodeURIComponent(state.valueStory.Currency),\r\n\t\tuserData: state.valueStory,\r\n\t\tspendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n\t\tbenchMarkCalculations: state.benchMarksData,\r\n\t\tallContent: state.content,\r\n language: state.language,\r\n spendDetails: state.spendDetails,\r\n user: state.default \r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n\treturn {\r\n enablementInsightSuccess: message => dispatch(enablementInsightSuccess(message)),\r\n enablementInsightFailure: error => dispatch(enablementInsightFailure(error)),\r\n enablementInsightLoading: bool => dispatch(enablementInsightLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n getEnablementDetails: (data) => dispatch(getEnablementDetails(data)),\r\n getEnablementStrategyDetails: (data) => dispatch(getEnablementStrategyDetails(data)),\r\n getEnablementFiltersDetails: (data) => dispatch(getEnablementFiltersDetails(data)),\r\n currentActiveRequest: (requestDetails) => dispatch(currentActiveRequest(requestDetails)),\r\n updateEnablementStrategyCurrentFocus: (VS_ID, DMC_ID, ENABLEMENT_STRATEGY_FOCUS) => dispatch(updateEnablementStrategyCurrentFocus(VS_ID, DMC_ID, ENABLEMENT_STRATEGY_FOCUS))\r\n\t}\r\n}\r\n\r\nexport default connect(\tmapStateToProps, mapDispatchToProps)(EnablementDetails)\r\n\r\n","import React from 'react'\r\nimport{connect} from 'react-redux'\r\nimport EnablementInsightTabTable from './EnablementInsightTabTable'\r\nimport EnablementSupplierDetailsPopup from './EnablementSupplierDetailsPopup'\r\nimport ExpandableTable from './ExpandableTable'\r\nimport { path, dropdownColourStyles } from 'Constants'\r\nimport { ControlTextE, ScreenE, SelectE } from 'UI/CustomComponents/Controls';\r\n\r\n// Settings\r\nimport { changeModalBorderStyle, drilldownModalBorderContentStyle, changeModalBorderRectStyle } from 'Constants'\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nimport {\r\n enablementInsightSuccess,\r\n enablementInsightFailure,\r\n enablementInsightLoading, \r\n resetError,\r\n getEnablementDetails,\r\n getEnablementStrategyDetails,\r\n getEnablementFiltersDetails,\r\n currentActiveRequest,\r\n updateEnablementStrategyCurrentFocus,\r\n getOnboardingWorkstreamDetails\r\n} from 'actions/spendActions'\r\n\r\nclass OnboardingWorkstreamDetails extends React.Component{\r\n constructor(props)\r\n {\r\n super(props);\r\n this.state={\r\n enablementWaveData: [],\r\n enablementWaveTotal: [],\r\n enablementWaveJson: [],\r\n enablementTypesJson: [],\r\n enablementTypes: [], \r\n grandTotal: [],\r\n isLoading: true,\r\n responseMsg: '',\r\n inputParam: {\r\n DMC_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.DMC_ID : 0\r\n , VS_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.VS_ID : 0,\r\n User_Email: this.props.spendDetails.currentActiveRequest !== undefined &&\r\n this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester,\r\n dedupStats: 'Unique',\r\n enabledCustomer: 'all',\r\n transactingCustomer: 'all',\r\n buyerRegion: 'all',\r\n businessUnit: 'all',\r\n erpSystem: 'all',\r\n l4IndustryName: 'all',\r\n erpCode: 'all',\r\n erpDesc: 'all',\r\n sicCode: 'all',\r\n sicDesc: 'all',\r\n \r\n goods: 'all',\r\n invoiceCountry: 'all',\r\n legalInvoice: 'all',\r\n aribaNwEligible: 'all',\r\n column1Name: 'SAP_ARIBA_BUY_ENABLE_MTHD_RECMD',\r\n column1Value: '',\r\n tableName: '',\r\n valuesUpdated: false,\r\n metricsType: 'Invoice Spend',\r\n directSpend: 'all' \r\n }, \r\n isL4Expand: true,\r\n isCountryExpand: true,\r\n isOnboardWrkExpand: true,\r\n isRECMDExpand: true,\r\n tableNameOption:[\r\n { value: \"l4Industry\", label: \"Enablement Strategy by Onboarding Workstream with L4 Industry Name\"},\r\n { value: \"isoCountry\", label: \"Enablement Strategy by ISO Country Code\"},\r\n { value: \"workstreamDetails\", label: \"Enablement Strategy by Onboarding Workstream with Details\"},\r\n { value: \"workstreamRecommendation\", label: \"Enablement Strategy by Onboarding Workstream with Enablement Recommendation\"},\r\n ],\r\n selectedTableView: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.ENABLEMENT_STRATEGY_FOCUS : \"l4Industry\",\r\n activeRequest: this.props.spendDetails.currentActiveRequest\r\n }\r\n this.showEnablementSupplierDetailsModal = this.showEnablementSupplierDetailsModal.bind(this)\r\n this.setVisibility = this.setVisibility.bind(this)\r\n this.outsidePopupClick = this.outsidePopupClick.bind(this)\r\n this.onSave = this.onSave.bind(this)\r\n this.reloadEnablementWave= this.reloadEnablementWave.bind(this)\r\n }\r\n\r\n componentDidMount(){ \r\n ////this.convertResponseToJson()\r\n this.GetEnablementDetails(this.state.inputParam)\r\n }\r\n\r\n reloadEnablementWave(){\r\n this.GetEnablementDetails(this.state.inputParam)\r\n }\r\n\r\n showEnablementSupplierDetailsModal(tableName, columnName, columnValue, columnValue2, columnValue3) {\r\n\r\n var inputParameter = this.state.inputParam\r\n inputParameter.tableName = tableName\r\n inputParameter.column1Name = columnName\r\n inputParameter.column1Value = columnValue\r\n\r\n inputParameter.column2Name = this.props.content.enablementWaveSecCol \r\n inputParameter.column2Value = columnValue2\r\n\r\n inputParameter.column3Value = columnValue3\r\n\r\n var thirdColumnName;\r\n switch(tableName){\r\n case this.props.content.enablementWaveDetails.enablementStrategyByL4Industry :\r\n thirdColumnName = this.props.content.enablementWaveL4IndustryCol\r\n break;\r\n case this.props.content.enablementWaveDetails.enablementStrategyByISOCountry :\r\n thirdColumnName = this.props.content.enablementWaveISOCountryCol\r\n break;\r\n case this.props.content.enablementWaveDetails.enablementStrategyByOnboardingWorkstream :\r\n thirdColumnName = this.props.content.enablementWaveWorkStreamDetailCol\r\n break;\r\n case this.props.content.enablementWaveDetails.enablementStrategyByRecommendation :\r\n thirdColumnName = this.props.content.enablementWaveThirdCol\r\n break; \r\n }\r\n\r\n inputParameter.column3Name = thirdColumnName;\r\n \r\n this.setState({\topenPopup: true, inputParam: inputParameter\t})\r\n }\r\n\r\n onSave(value) {\r\n this.setState({valuesUpdated: value})\r\n }\r\n\r\n setVisibility(isVisible) {\r\n this.handlePoupClose() \r\n }\r\n\r\n outsidePopupClick() { \r\n this.handlePoupClose()\r\n }\r\n \r\n handlePoupClose() {\r\n this.setState({ open: false, openPopup: false }, () => {\r\n if(this.state.valuesUpdated) {\r\n this.setState({valuesUpdated: false}, this.GetEnablementDetails(this.state.inputParam))\r\n }\r\n })\r\n }\r\n\r\n showAdvanceFilter(){\r\n var advanceFilterDiv = document.getElementById('advanceFilter').style; \r\n if (advanceFilterDiv.display === \"none\") {\r\n advanceFilterDiv.display = \"block\";\r\n } else {\r\n advanceFilterDiv.display = \"none\";\r\n }\r\n }\r\n\r\n GetEnablementDetails(inputParam) {\r\n\t\t\r\n\t\tthis.props.getOnboardingWorkstreamDetails(inputParam)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tif (response !== undefined && response.status === 200 && response.data.Result !== undefined) {\r\n //\tsetTimeout(() => { this.props.defineScopeSuccess('') }, 2000)\r\n var enablementWaveData; var enablementWaveTotal;\r\n var l4IndustryData; var l4IndustryDataParent; var l4IndustryDataTotal;\r\n var onWorkStreamData; var onWorkStreamDataTotal;\r\n var isoCountryCodeData; var isoCountryCodeDataTotal;\r\n var enablementWaveANIDsData; var headerLevelGrandTotal; var ganttChartWorkStreamData;\r\n \r\n\r\n var tables = response.data.Result.map(\r\n function (table) {\r\n // // if(table['ENABLEMENT_WAVE']!== undefined){\r\n \r\n // // enablementWaveData = table['ENABLEMENT_WAVE']\r\n // // enablementWaveTotal = table['GrandTotal']\r\n // // }\r\n \r\n // // if(table['ENABLEMENT_WAVE']!== undefined){\r\n \r\n // // enablementWaveData = table['ENABLEMENT_WAVE']\r\n // // enablementWaveTotal = table['GrandTotal']\r\n // // }\r\n\r\n if(table['ONBOARDING_WORKSTREAM_DETAILS_CHILD']!== undefined){\r\n \r\n l4IndustryData = table['ONBOARDING_WORKSTREAM_DETAILS_CHILD']\r\n l4IndustryDataTotal = table['GrandTotal']\r\n }\r\n\r\n if(table['ONBOARDING_WORKSTREAM_DETAILS_PARENT']!== undefined){\r\n \r\n l4IndustryDataParent = table['ONBOARDING_WORKSTREAM_DETAILS_PARENT'] \r\n }\r\n \r\n // // if(table['ISO_COUNTRY_CODE']!== undefined){\r\n \r\n // // isoCountryCodeData = table['ISO_COUNTRY_CODE']\r\n // // isoCountryCodeDataTotal = table['GrandTotal']\r\n // // }\r\n\r\n // // if(table['ONBOARDING_WORKSTREAM_DETAILS']!== undefined){\r\n \r\n // // onWorkStreamData = table['ONBOARDING_WORKSTREAM_DETAILS']\r\n // // onWorkStreamDataTotal = table['GrandTotal']\r\n // // }\r\n \r\n // if(table['ENABLEMENT_WAVE_ANIDs']!== undefined){\r\n // enablementWaveANIDsData = table['ENABLEMENT_WAVE_ANIDs'] \r\n // headerLevelGrandTotal = table['GrandTotal'] \r\n // }\r\n\r\n // if(table['GANTT_CHART_WORKSTREAM_NAME']!== undefined){\r\n // ganttChartWorkStreamData = table['GANTT_CHART_WORKSTREAM_NAME'] \r\n // }\r\n }\r\n )\r\n\r\n const l4IndustryDataTemp = this.convertResponseToJson(l4IndustryData,l4IndustryDataParent, ganttChartWorkStreamData, \"FIELD_DESC\")\r\n \r\n this.setState({isLoading: false , l4IndustryDataJson: l4IndustryDataTemp , l4IndustryDataJsonTotal : l4IndustryDataTotal});\r\n \r\n this.props.enablementInsightSuccess(true)\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure('API service is down. Please contact administrator.')\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n this.setState({ responseMsg: 'An error has occurred', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure(this.props.content.error)\r\n\t\t\t\t}\r\n\t\t\t})\r\n }\r\n \r\n convertResponseToJson(onboardingWorkstreamDataChild, onboardingWorkstreamDataParent, ganttChartWorkStreamData, thirdLevel)\r\n {\r\n let data = []\r\n let total = []\r\n let waveToItem = []\r\n let ganttChartTotal = []\r\n let ganttChartToItem = []\r\n //const enablementWaveData = this.state.enablementWaveData\r\n onboardingWorkstreamDataChild.forEach(item => {\r\n let datum = {\r\n ENABLEMENT_WAVE: item.GANTT_CHART_WORKSTREAM_NAME, \r\n GANTT_CHART_WORKSTREAM_NAME: item.ONBOARDING_WORKSTREAM_DETAILS, \r\n [thirdLevel]: item[thirdLevel],//.SAP_ARIBA_BUY_ENABLE_MTHD_RECMD,\r\n CNT_VENDOR_NAME: isNaN(item.CNT_VENDOR_NAME)? 0 : item.CNT_VENDOR_NAME,\r\n CNT_VENDOR_PER: isNaN(item.CNT_VENDOR_PER)? 0 : Number.parseFloat(item.CNT_VENDOR_PER),\r\n CNT_UNIQ_VENDOR_AN_ID: isNaN(item.CNT_UNIQ_VENDOR_AN_ID)? 0 : Number.parseFloat(item.CNT_UNIQ_VENDOR_AN_ID),\r\n SUM_AGGR_SPEND: isNaN(item.SUM_AGGR_SPEND)? 0 : item.SUM_AGGR_SPEND,\r\n SUM_AGGR_SPEND_PER: isNaN(item.SUM_AGGR_SPEND_PER)? 0 : Number.parseFloat(item.SUM_AGGR_SPEND_PER),\r\n \r\n SUM_SAP_ARIBA_DOC_PROXY: isNaN(item.SUM_SAP_ARIBA_DOC_PROXY)? 0 : item.SUM_SAP_ARIBA_DOC_PROXY,\r\n SAP_ARIBA_DOC_PROXY_PER: isNaN(item.SAP_ARIBA_DOC_PROXY_PER)? 0 : Number.parseFloat(item.SAP_ARIBA_DOC_PROXY_PER)\r\n }\r\n\r\n data.push(datum)\r\n\r\n let datumCopy = {...datum}\r\n let datumCopy1 = {...datum}\r\n \r\n if(item.GANTT_CHART_WORKSTREAM_NAME in total) {\r\n waveToItem[item.GANTT_CHART_WORKSTREAM_NAME].push(datumCopy1)\r\n \r\n let partialTotal = total[item.GANTT_CHART_WORKSTREAM_NAME]\r\n partialTotal.CNT_VENDOR_NAME = 0\r\n partialTotal.CNT_VENDOR_PER = 0\r\n partialTotal.CNT_UNIQ_VENDOR_AN_ID = 0\r\n partialTotal.SUM_AGGR_SPEND = 0\r\n partialTotal.SUM_AGGR_SPEND_PER = 0\r\n\r\n partialTotal.SUM_AGGR_PO_SPEND = 0\r\n partialTotal.SUM_AGGR_PO_SPEND_PER = 0\r\n\r\n partialTotal.SUM_SAP_ARIBA_DOC_PROXY = 0\r\n partialTotal.SAP_ARIBA_DOC_PROXY_PER = 0\r\n\r\n } else {\r\n \r\n total[item.GANTT_CHART_WORKSTREAM_NAME] = datumCopy\r\n waveToItem[item.GANTT_CHART_WORKSTREAM_NAME] = [datumCopy1]\r\n }\r\n\r\n if(item.GANTT_CHART_WORKSTREAM_NAME in ganttChartTotal) {\r\n ganttChartToItem[item.GANTT_CHART_WORKSTREAM_NAME].push(datumCopy1)\r\n \r\n let partialTotal = ganttChartTotal[item.GANTT_CHART_WORKSTREAM_NAME]\r\n partialTotal.CNT_VENDOR_NAME = 0\r\n partialTotal.CNT_VENDOR_PER = 0\r\n partialTotal.CNT_UNIQ_VENDOR_AN_ID = 0\r\n partialTotal.SUM_AGGR_SPEND = 0\r\n partialTotal.SUM_AGGR_SPEND_PER = 0\r\n\r\n partialTotal.SUM_AGGR_PO_SPEND = 0\r\n partialTotal.SUM_AGGR_PO_SPEND_PER = 0\r\n\r\n partialTotal.SUM_SAP_ARIBA_DOC_PROXY = 0\r\n partialTotal.SAP_ARIBA_DOC_PROXY_PER = 0\r\n\r\n } else {\r\n \r\n ganttChartTotal[item.GANTT_CHART_WORKSTREAM_NAME] = datumCopy\r\n ganttChartToItem[item.GANTT_CHART_WORKSTREAM_NAME] = [datumCopy1]\r\n }\r\n\r\n })\r\n\r\n let enablementWaveDetails = {\r\n rows: []\r\n }\r\n \r\n // console.log(\"waveToItem.....\", waveToItem)\r\n // console.log(\"ganttChartToItem......\", ganttChartToItem)\r\n\r\n for (const [key, value] of Object.entries(waveToItem)) {\r\n\r\n let recommendationChild = []\r\n\r\n \r\n for (const [recKey, recValue] of Object.entries(ganttChartToItem)) { \r\n \r\n let tempData = recValue.filter(item=>item.GANTT_CHART_WORKSTREAM_NAME === key && item.GANTT_CHART_WORKSTREAM_NAME === recKey)\r\n\r\n tempData.forEach((item, index) => {\r\n recommendationChild.push({\r\n childContentId: index, \r\n content: item[thirdLevel],//.SAP_ARIBA_BUY_ENABLE_MTHD_RECMD, \r\n parent: item.GANTT_CHART_WORKSTREAM_NAME,\r\n enablementWave: item.GANTT_CHART_WORKSTREAM_NAME, \r\n data: item,\r\n expand: false\r\n })\r\n }) \r\n }\r\n \r\n let collapseChild = [] \r\n let idx = 0\r\n value.forEach((item, index) => { \r\n if(!collapseChild.some(i=>i.content === item.GANTT_CHART_WORKSTREAM_NAME)){ \r\n \r\n collapseChild.push({\r\n childContentId: index, \r\n content: item.GANTT_CHART_WORKSTREAM_NAME, \r\n enablementWave: key, \r\n //data: ganttChartWorkStreamData.filter(a=> a.ENABLEMENT_WAVE===key && a.GANTT_CHART_WORKSTREAM_NAME === item.GANTT_CHART_WORKSTREAM_NAME )[0],\r\n data: data.filter(a=> a.ENABLEMENT_WAVE===key && a.GANTT_CHART_WORKSTREAM_NAME === item.GANTT_CHART_WORKSTREAM_NAME)[0], \r\n expand: false\r\n ,collapseChild: recommendationChild.filter(rec=> rec.enablementWave === key && rec.parent === item.GANTT_CHART_WORKSTREAM_NAME)\r\n })\r\n }\r\n })\r\n\r\n enablementWaveDetails.rows.push({ \r\n \"content\" : key,\r\n \"contentId\" : idx++,\r\n //\"data\": aggregatedData.filter(item=> item.ENABLEMENT_WAVE===key )[0],\r\n data: onboardingWorkstreamDataParent.filter(item=> item.GANTT_CHART_WORKSTREAM_NAME===key)[0], \r\n expand: false,\r\n collapseChild : collapseChild\r\n });\r\n }\r\n\r\n //console.log(\"jsonData\", enablementWaveDetails)\r\n return enablementWaveDetails\r\n }\r\n\r\n componentWillReceiveProps(nextProps, nextState){\r\n if (this.state.Test !== nextProps.filterData && 'dedupStats' in nextProps.filterData)\r\n {\r\n var inputParameter = this.state.inputParam\r\n inputParameter.dedupStats = nextProps.filterData.dedupStats\r\n inputParameter.enabledCustomer= nextProps.filterData.enabledCustomer\r\n inputParameter.transactingCustomer= nextProps.filterData.transactingCustomer\r\n inputParameter.buyerRegion= nextProps.filterData.buyerRegion\r\n inputParameter.businessUnit= nextProps.filterData.businessUnit\r\n inputParameter.erpSystem= nextProps.filterData.erpSystem\r\n inputParameter.l4IndustryName= nextProps.filterData.l4IndustryName\r\n inputParameter.erpCode= nextProps.filterData.erpCode \r\n inputParameter.erpDesc= nextProps.filterData.erpDesc \r\n inputParameter.sicCode= nextProps.filterData.sicCode \r\n inputParameter.sicDesc= nextProps.filterData.sicDesc\r\n inputParameter.goods= nextProps.filterData.goods\r\n inputParameter.invoiceCountry= nextProps.filterData.invoiceCountry\r\n inputParameter.legalInvoice= nextProps.filterData.legalInvoice\r\n inputParameter.aribaNwEligible= nextProps.filterData.aribaNwEligible\r\n inputParameter.metricsType= nextProps.filterData.metricsType\r\n inputParameter.directSpend= nextProps.filterData.directSpend \r\n \r\n setTimeout(() => {\r\n this.GetEnablementDetails(inputParameter);\r\n }, 1000);\r\n \r\n this.setState({Test:nextProps.filterData , inputParam: Object.keys(nextProps.filterData).length !== 0 ? nextProps.filterData : this.state.inputParam})\r\n //console.log(\"if enablemtn details filetr props-\")\r\n }\r\n else{\r\n // console.log(\"else enablemtn details filetr props-\")\r\n }\r\n \r\n }\r\n\r\n onExpandClick(e){\r\n switch(e.target.id){\r\n case \"l4Industry\":\r\n this.setState({ isL4Expand: !this.state.isL4Expand})\r\n break;\r\n \r\n case \"country\":\r\n this.setState({ isCountryExpand : !this.state.isCountryExpand})\r\n break;\r\n \r\n case \"onboardWrk\":\r\n this.setState({ isOnboardWrkExpand: !this.state.isOnboardWrkExpand})\r\n break;\r\n\r\n case \"recmd\":\r\n this.setState({ isRECMDExpand: !this.state.isRECMDExpand})\r\n break; \r\n\r\n } \r\n this.GetEnablementDetails(this.state.inputParam) \r\n } \r\n\r\n // handleFocusChange(data){ \r\n // var activeRequestData= this.state.activeRequest\r\n // activeRequestData.ENABLEMENT_STRATEGY_FOCUS = data.value\r\n // this.setState({selectedTableView : data.value, isLoading : true})\r\n \r\n // var requestParam={\r\n // VS_ID: this.state.inputParam.VS_ID,\r\n // DMC_ID: this.state.inputParam.DMC_ID,\r\n // ENABLEMENT_STRATEGY_FOCUS: data.value\r\n // }\r\n \r\n // this.updateEnablementStrategyFocus(requestParam)\r\n // this.props.currentActiveRequest(activeRequestData)\r\n // this.GetEnablementDetails(this.state.inputParam) \r\n // }\r\n\r\n // updateEnablementStrategyFocus(requestParam) {\r\n\t\t\r\n\t// \tthis.props.updateEnablementStrategyCurrentFocus(requestParam.VS_ID, requestParam.DMC_ID, requestParam.ENABLEMENT_STRATEGY_FOCUS)\r\n\t// \t\t.then((response) => {\r\n\t// \t\t\tif (response !== undefined && response.status === 200 && response.data.Result !== undefined) {\r\n \r\n\t// \t\t\t}\r\n\t// \t\t}).catch((error) => {\r\n\t// \t\t\tif (error.stack.includes('Network Error')) {\r\n // this.setState({ responseMsg: 'API service is down. Please contact administrator', isError: 'Yes' })\r\n\t// \t\t\t\tthis.props.enablementInsightFailure('API service is down. Please contact administrator.')\r\n\t// \t\t\t}\r\n\t// \t\t\telse {\r\n // this.setState({ responseMsg: 'An error has occurred', isError: 'Yes' })\r\n\t// \t\t\t\tthis.props.enablementInsightFailure(this.props.content.error)\r\n\t// \t\t\t}\r\n\t// \t\t})\r\n // }\r\n\r\n render()\r\n {\r\n return(\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n\r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n
\r\n\r\n \r\n \r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t{\"Focus\"}
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t option.value === this.state.selectedTableView\r\n )}\r\n\t\t\t\t\t\t\t\t\t\tnoOptionsMessage={() => null}\r\n onChange={value => this.handleFocusChange(value)}\r\n options={this.state.tableNameOption}\r\n isSearchable={false} \r\n\t\t\t\t\t\t\t\t\t\tstyles={dropdownColourStyles}\r\n isDisabled={this.state.isLoading}\r\n />\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n \r\n {this.state.selectedTableView===\"l4Industry\" ? \r\n\r\n //
\r\n //
\r\n\r\n \r\n \r\n //
\r\n // {\"Enablement Strategy by Onboarding Workstream with L4 Industry Name\"}
\r\n // this.onExpandClick(e)} >{this.state.isL4Expand ? \"-\": \"+\"}
\r\n // \r\n
\r\n \r\n : null}\r\n\r\n {/* \r\n {this.state.l4IndustryDataJson !== undefined && this.state.l4IndustryDataJson !== null ?\r\n
\r\n {this.props.content.noDataFound}
} \r\n \r\n
*/}\r\n\r\n {this.state.selectedTableView === \"isoCountry\"? \r\n \r\n
\r\n {\"Enablement Strategy by ISO Country Code\"}
\r\n this.onExpandClick(e)} >{this.state.isCountryExpand ? \"-\": \"+\"}
\r\n \r\n
\r\n : null }\r\n\r\n {/* \r\n {this.state.isoCountryDataJson !== undefined && this.state.isoCountryDataJson !== null ?\r\n
\r\n {this.props.content.noDataFound}
} \r\n \r\n
*/}\r\n\r\n {this.state.selectedTableView === \"workstreamDetails\" ? \r\n \r\n
\r\n {\"Enablement Strategy by Onboarding Workstream with Details\"}
\r\n this.onExpandClick(e)} >{this.state.isOnboardWrkExpand ? \"-\": \"+\"}
\r\n \r\n
\r\n : null }\r\n\r\n {/* \r\n {this.state.onWorkStreamDataJson !== undefined && this.state.onWorkStreamDataJson !== null ?\r\n
\r\n {this.props.content.noDataFound}
} \r\n \r\n
*/}\r\n\r\n {this.state.selectedTableView === \"workstreamRecommendation\"? \r\n \r\n
\r\n {\"Enablement Strategy by Onboarding Workstream with Enablement Recommendation\"}
\r\n this.onExpandClick(e)} >{this.state.isRECMDExpand ? \"-\": \"+\"}
\r\n \r\n
\r\n :\r\n null } \r\n\r\n \r\n {this.state.enablementWaveJson !== undefined && this.state.enablementWaveJson !== null ?\r\n
\r\n {this.props.content.noDataFound}
} \r\n \r\n {this.refs.enablementSupplier ? this.state.openPopup ?\r\n this.refs.enablementSupplier.show() :\r\n this.refs.enablementSupplier.hide() : ''} \r\n \r\n
\r\n {/* \r\n
\r\n \r\n {\r\n
\r\n \r\n \r\n
\r\n {this.state.selectedTableView===\"l4Industry\" ? \r\n\r\n //
\r\n )\r\n }\r\n\r\n}\r\n\r\n\r\nconst mapStateToProps = state => {\r\n\treturn {\r\n content: state.content.enablementInsight,\r\n //content: state.content.subLeverCalculations,\r\n\t\tui: state.content.ui,\r\n\t\tcurrency: decodeURIComponent(state.valueStory.Currency),\r\n\t\tuserData: state.valueStory,\r\n\t\tspendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n\t\tbenchMarkCalculations: state.benchMarksData,\r\n\t\tallContent: state.content,\r\n language: state.language,\r\n spendDetails: state.spendDetails,\r\n user: state.default \r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n\treturn {\r\n enablementInsightSuccess: message => dispatch(enablementInsightSuccess(message)),\r\n enablementInsightFailure: error => dispatch(enablementInsightFailure(error)),\r\n enablementInsightLoading: bool => dispatch(enablementInsightLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n getEnablementDetails: (data) => dispatch(getEnablementDetails(data)),\r\n getEnablementStrategyDetails: (data) => dispatch(getEnablementStrategyDetails(data)),\r\n getEnablementFiltersDetails: (data) => dispatch(getEnablementFiltersDetails(data)),\r\n currentActiveRequest: (requestDetails) => dispatch(currentActiveRequest(requestDetails)),\r\n updateEnablementStrategyCurrentFocus: (VS_ID, DMC_ID, ENABLEMENT_STRATEGY_FOCUS) => dispatch(updateEnablementStrategyCurrentFocus(VS_ID, DMC_ID, ENABLEMENT_STRATEGY_FOCUS)),\r\n getOnboardingWorkstreamDetails: (data) => dispatch(getOnboardingWorkstreamDetails(data)),\r\n }\r\n}\r\n\r\nexport default connect(\tmapStateToProps, mapDispatchToProps)(OnboardingWorkstreamDetails)\r\n\r\n","import React from 'react'\r\nimport EnablementSupplierDetailsPopup from './EnablementSupplierDetailsPopup'\r\nimport EnablementInsightTabTable from './EnablementInsightTabTable';\r\nimport ExpandableTable from './ExpandableTable'\r\nimport { path } from 'Constants'\r\n\r\n// Settings\r\nimport { changeModalBorderStyle, drilldownModalBorderContentStyle, changeModalBorderRectStyle } from 'Constants'\r\nimport Modal from 'reboron/OutlineModal'\r\nimport {connect} from 'react-redux'\r\n\r\nimport {\r\n enablementInsightSuccess,\r\n enablementInsightFailure,\r\n enablementInsightLoading, \r\n resetError,\r\n getNetworkMatchDetails,\r\n} from 'actions/spendActions'\r\n\r\n\r\nclass NetworkMatchTab extends React.Component{\r\n constructor(props)\r\n {\r\n super(props);\r\n this.state={\r\n selectedDedupeStats:'',\r\n selectedEnabledCustomer:'',\r\n selectedTransactingCustomer:'',\r\n networkEligibleData:[],\r\n sapAribaNetworkEligibleData:[],\r\n catalogMatchData: [],\r\n catalogMatchTotal: [],\r\n integrationMatchTypeData: [],\r\n integrationMatchTypeTotal: [], \r\n enablementMatchTypesData: [],\r\n grandTotal: [],\r\n nwgrandTotal: [],\r\n isLoading: true,\r\n responseMsg: '',\r\n inputParam: {\r\n DMC_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.DMC_ID : 0\r\n , VS_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.VS_ID : 0,\r\n User_Email: this.props.spendDetails.currentActiveRequest !== undefined &&\r\n this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester,\r\n dedupStats: 'Unique',\r\n enabledCustomer: 'all',\r\n transactingCustomer: 'all',\r\n buyerRegion: 'all',\r\n businessUnit: 'all',\r\n erpSystem: 'all',\r\n l4IndustryName: 'all',\r\n erpCode: 'all',\r\n erpDesc: 'all',\r\n sicCode: 'all',\r\n sicDesc: 'all',\r\n \r\n goods: 'all',\r\n invoiceCountry: 'all',\r\n legalInvoice: 'all',\r\n aribaNwEligible: 'all',\r\n column1Name: '',\r\n column1Value: '',\r\n tableName: '',\r\n valuesUpdated: false,\r\n metricsType: 'Invoice Spend',\r\n directSpend: 'all' \r\n }, \r\n }\r\n this.showEnablementSupplierDetailsModal = this.showEnablementSupplierDetailsModal.bind(this)\r\n this.setVisibility = this.setVisibility.bind(this)\r\n this.outsidePopupClick = this.outsidePopupClick.bind(this)\r\n this.convertResponseToJson = this.convertResponseToJson.bind(this)\r\n this.onSave = this.onSave.bind(this)\r\n }\r\n\r\n componentDidMount(){ \r\n this.GetNetworkMatchDetails(this.state.inputParam);\r\n }\r\n\r\n showEnablementSupplierDetailsModal(tableName, columnName, columnValue, columnValue2) {\r\n\r\n var inputParameter = this.state.inputParam\r\n inputParameter.tableName = tableName\r\n inputParameter.column1Name = columnName\r\n inputParameter.column1Value = columnValue\r\n\r\n inputParameter.column2Value = columnValue2\r\n\r\n\t\tthis.setState({\topenPopup: true, inputParam: inputParameter\t})\r\n }\r\n\r\n onSave(value) {\r\n this.setState({valuesUpdated: value})\r\n }\r\n\r\n setVisibility(isVisible) {\r\n this.handlePoupClose() \r\n }\r\n\r\n outsidePopupClick() { \r\n this.handlePoupClose()\r\n }\r\n \r\n handlePoupClose() {\r\n this.setState({ open: false, openPopup: false }, () => {\r\n if(this.state.valuesUpdated) {\r\n this.setState({valuesUpdated: false}, this.GetNetworkMatchDetails(this.state.inputParam))\r\n }\r\n })\r\n }\r\n \r\n GetNetworkMatchDetails(inputParam) {\r\n\t\t\r\n\t\tthis.props.getNetworkMatchDetails(inputParam)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tif (response !== undefined && response.status === 200 && response.data.Result !== undefined) {\r\n var enablementMatchData; var enablementMatchTotal;\r\n var networkEligibleData; var networkEligibleTotal;\r\n var catalogMatchData; var catalogMatchTotal;\r\n var integrationMatchTypeData; var integrationMatchTypeTotal;\r\n var catalogMatchANIDsData; var catalogMatchANIDsTotal;\r\n var integrationMatchTypeANIDsData; var integrationMatchTypeANIDsTotal;\r\n\r\n var tables = response.data.Result.map(\r\n function (table) {\r\n if(table['ENABLEMENT_MATCH_TYPE']!== undefined){\r\n enablementMatchData = table['ENABLEMENT_MATCH_TYPE']\r\n enablementMatchTotal = table['GrandTotal']\r\n }\r\n\r\n if(table['SAP_ARIBA_NETWORK_ELIGIBLE']!== undefined){\r\n networkEligibleData = table['SAP_ARIBA_NETWORK_ELIGIBLE']\r\n networkEligibleTotal=table['GrandTotal']\r\n }\r\n\r\n if(table['CATALOG_MATCH_TYPE']!== undefined){\r\n catalogMatchData = table['CATALOG_MATCH_TYPE']\r\n catalogMatchTotal=table['GrandTotal']\r\n }\r\n\r\n if(table['INTEGRATION_MATCH_TYPE']!== undefined){\r\n integrationMatchTypeData = table['INTEGRATION_MATCH_TYPE']\r\n integrationMatchTypeTotal=table['GrandTotal']\r\n }\r\n\r\n if(table['CATALOG_MATCH_TYPE_ANIDs']!== undefined){\r\n catalogMatchANIDsData = table['CATALOG_MATCH_TYPE_ANIDs']\r\n catalogMatchANIDsTotal=table['GrandTotal']\r\n }\r\n\r\n if(table['INTEGRATION_MATCH_TYPE_ANIDs']!== undefined){\r\n integrationMatchTypeANIDsData = table['INTEGRATION_MATCH_TYPE_ANIDs']\r\n integrationMatchTypeANIDsTotal=table['GrandTotal']\r\n }\r\n }\r\n )\r\n //\tsetTimeout(() => { this.props.defineScopeSuccess('') }, 2000)\r\n \r\n this.setState({ enablementMatchTypesData: enablementMatchData, grandTotal: enablementMatchTotal, sapAribaNetworkEligibleData: networkEligibleData, \r\n nwgrandTotal: networkEligibleTotal, catalogMatchData: this.convertResponseToJson(catalogMatchData, 'CATALOG_MATCH_TYPE',catalogMatchANIDsData), catalogMatchTotal: catalogMatchANIDsTotal,\r\n integrationMatchTypeData: this.convertResponseToJson(integrationMatchTypeData, 'INTEGRATION_MATCH_TYPE',integrationMatchTypeANIDsData), integrationMatchTypeTotal: integrationMatchTypeANIDsTotal, isLoading: false \r\n });\r\n \r\n this.props.enablementInsightSuccess(true)\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure('API service is down. Please contact administrator.')\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n this.setState({ responseMsg: 'An error has occurred', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure(this.props.content.error)\r\n\t\t\t\t}\r\n\t\t\t})\r\n }\r\n\r\n convertResponseToJson(enablementData, keyColumn, aggregatedData)\r\n {\r\n let data = []\r\n let total = []\r\n let waveToItem = []\r\n\r\n enablementData.forEach(item => {\r\n let datum = {\r\n SUPPLIER_NAME: item.SUPPLIER_NAME, \r\n CNT_VENDOR_NAME: isNaN(item.CNT_VENDOR_NAME)? 0 : item.CNT_VENDOR_NAME,\r\n CNT_VENDOR_PER: isNaN(item.CNT_VENDOR_PER)? 0 : Number.parseFloat(item.CNT_VENDOR_PER),\r\n CNT_UNIQ_VENDOR_AN_ID: isNaN(item.CNT_UNIQ_VENDOR_AN_ID)? 0 : Number.parseFloat(item.CNT_UNIQ_VENDOR_AN_ID),\r\n SUM_AGGR_SPEND: isNaN(item.SUM_AGGR_SPEND)? 0 : item.SUM_AGGR_SPEND,\r\n SUM_AGGR_SPEND_PER: isNaN(item.SUM_AGGR_SPEND_PER)? 0 : Number.parseFloat(item.SUM_AGGR_SPEND_PER),\r\n \r\n SUM_SAP_ARIBA_DOC_PROXY: isNaN(item.SUM_SAP_ARIBA_DOC_PROXY)? 0 : item.SUM_SAP_ARIBA_DOC_PROXY,\r\n SAP_ARIBA_DOC_PROXY_PER: isNaN(item.SAP_ARIBA_DOC_PROXY_PER)? 0 : Number.parseFloat(item.SAP_ARIBA_DOC_PROXY_PER)\r\n }\r\n\r\n datum[keyColumn] = item[keyColumn]\r\n\r\n data.push(datum)\r\n\r\n let datumCopy = {...datum}\r\n let datumCopy1 = {...datum}\r\n\r\n if(item[keyColumn] in total) {\r\n waveToItem[item[keyColumn]].push(datumCopy1)\r\n \r\n let partialTotal = total[item[keyColumn]]\r\n partialTotal.CNT_VENDOR_NAME = 0\r\n partialTotal.CNT_VENDOR_PER = 0\r\n partialTotal.CNT_UNIQ_VENDOR_AN_ID = 0\r\n partialTotal.SUM_AGGR_SPEND = 0\r\n partialTotal.SUM_AGGR_SPEND_PER = 0\r\n partialTotal.SUM_AGGR_PO_SPEND = 0\r\n partialTotal.SUM_AGGR_PO_SPEND_PER = 0\r\n partialTotal.SUM_SAP_ARIBA_DOC_PROXY = 0\r\n partialTotal.SAP_ARIBA_DOC_PROXY_PER = 0\r\n\r\n } else {\r\n \r\n total[item[keyColumn]] = datumCopy\r\n waveToItem[item[keyColumn]] = [datumCopy1]\r\n }\r\n \r\n // waveToItem[item.ENABLEMENT_WAVE].push(datumCopy1)\r\n // if(!item.ENABLEMENT_WAVE in total) {\r\n // total[item.ENABLEMENT_WAVE] = {} \r\n // }\r\n\r\n })\r\n \r\n let enablementWaveDetails = {\r\n rows: []\r\n }\r\n \r\n \r\n for (const [key, value] of Object.entries(waveToItem)) {\r\n let collapseChild = []\r\n let idx = 0\r\n value.forEach((item, index) => {\r\n collapseChild.push({childContentId: index, content: item.SUPPLIER_NAME, catalogMatchType: key, data: item, expand: false})\r\n })\r\n\r\n enablementWaveDetails.rows.push({ \r\n \"content\" : key,\r\n \"contentId\" : idx++,\r\n \"data\": aggregatedData.filter(item=> item[keyColumn]===key )[0],\r\n expand: false,\r\n collapseChild : collapseChild\r\n });\r\n }\r\n\r\n return enablementWaveDetails\r\n }\r\n \r\n componentWillReceiveProps(nextProps, nextState){\r\n if (this.state.Test !== nextProps.filterData && 'dedupStats' in nextProps.filterData)\r\n {\r\n var inputParameter = this.state.inputParam\r\n inputParameter.dedupStats = nextProps.filterData.dedupStats\r\n inputParameter.enabledCustomer= nextProps.filterData.enabledCustomer\r\n inputParameter.transactingCustomer= nextProps.filterData.transactingCustomer\r\n inputParameter.buyerRegion= nextProps.filterData.buyerRegion\r\n inputParameter.businessUnit= nextProps.filterData.businessUnit\r\n inputParameter.erpSystem= nextProps.filterData.erpSystem\r\n inputParameter.l4IndustryName= nextProps.filterData.l4IndustryName\r\n inputParameter.erpCode= nextProps.filterData.erpCode \r\n inputParameter.erpDesc= nextProps.filterData.erpDesc \r\n inputParameter.sicCode= nextProps.filterData.sicCode \r\n inputParameter.sicDesc= nextProps.filterData.sicDesc\r\n inputParameter.goods= nextProps.filterData.goods\r\n inputParameter.invoiceCountry= nextProps.filterData.invoiceCountry\r\n inputParameter.legalInvoice= nextProps.filterData.legalInvoice\r\n inputParameter.aribaNwEligible= nextProps.filterData.aribaNwEligible\r\n inputParameter.metricsType= nextProps.filterData.metricsType\r\n inputParameter.directSpend= nextProps.filterData.directSpend\r\n\r\n this.GetNetworkMatchDetails(inputParameter)\r\n this.setState({Test:nextProps.filterData , inputParam: Object.keys(nextProps.filterData).length !== 0 ? nextProps.filterData : this.state.inputParam})\r\n }\r\n else{\r\n }\r\n \r\n }\r\n\r\n\r\n render()\r\n {\r\n return(\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n\r\n {/* {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n
*/}\r\n\r\n \r\n \r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t{\"Focus\"}
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t option.value === this.state.selectedTableView\r\n )}\r\n\t\t\t\t\t\t\t\t\t\tnoOptionsMessage={() => null}\r\n onChange={value => this.handleFocusChange(value)}\r\n options={this.state.tableNameOption}\r\n isSearchable={false} \r\n\t\t\t\t\t\t\t\t\t\tstyles={dropdownColourStyles}\r\n isDisabled={this.state.isLoading}\r\n />\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n \r\n {this.state.selectedTableView===\"l4Industry\" ? \r\n\r\n //
\r\n //
\r\n\r\n \r\n \r\n //
\r\n // {\"Enablement Strategy by Onboarding Workstream with L4 Industry Name\"}
\r\n // this.onExpandClick(e)} >{this.state.isL4Expand ? \"-\": \"+\"}
\r\n // \r\n
\r\n \r\n : null}\r\n\r\n \r\n\r\n \r\n {this.state.l4IndustryDataJson !== undefined && this.state.l4IndustryDataJson !== null ?\r\n
\r\n {this.props.content.noDataFound}
} \r\n \r\n {this.refs.enablementSupplier ? this.state.openPopup ?\r\n this.refs.enablementSupplier.show() :\r\n this.refs.enablementSupplier.hide() : ''} \r\n \r\n
\r\n {/* \r\n
\r\n \r\n {\r\n
\r\n \r\n\r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\n\r\nconst mapStateToProps = state => {\r\n\treturn {\r\n content: state.content.enablementInsight,\r\n //content: state.content.subLeverCalculations,\r\n\t\tui: state.content.ui,\r\n\t\tcurrency: decodeURIComponent(state.valueStory.Currency),\r\n\t\tuserData: state.valueStory,\r\n\t\tspendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n\t\tbenchMarkCalculations: state.benchMarksData,\r\n\t\tallContent: state.content,\r\n language: state.language,\r\n spendDetails: state.spendDetails,\r\n user: state.default\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n\treturn {\r\n enablementInsightSuccess: message => dispatch(enablementInsightSuccess(message)),\r\n enablementInsightFailure: error => dispatch(enablementInsightFailure(error)),\r\n enablementInsightLoading: bool => dispatch(enablementInsightLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n getNetworkMatchDetails: (data) => dispatch(getNetworkMatchDetails(data)),\r\n \r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps,mapDispatchToProps) (NetworkMatchTab)","import React from 'react'\r\nimport{connect} from 'react-redux'\r\nimport EnablementInsightTabTable from './EnablementInsightTabTable'\r\nimport EnablementSupplierDetailsPopup from './EnablementSupplierDetailsPopup'\r\nimport { path } from 'Constants'\r\n// Settings\r\nimport { changeModalBorderStyle, drilldownModalBorderContentStyle, changeModalBorderRectStyle } from 'Constants'\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nimport {\r\n enablementInsightSuccess,\r\n enablementInsightFailure,\r\n enablementInsightLoading, \r\n resetError,\r\n getSpendDocBuyProcessDetails,\r\n} from 'actions/spendActions'\r\n\r\nclass SpendDocumentBuyProcessTab extends React.Component{\r\n constructor(props)\r\n {\r\n super(props);\r\n this.state={\r\n segmentationByDocument: [],\r\n segDocGrandTotal: [],\r\n segmentationBySpend: [],\r\n segSpendGrandTotal: [],\r\n segmentationByBuyProcess: [],\r\n segBuyProceeGrandTotal:[],\r\n buyerSupplierRelationship: [],\r\n buyerSupplierRelationshipGrandTotal: [],\r\n isLoading: true,\r\n responseMsg: '',\r\n inputParam: {\r\n DMC_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.DMC_ID : 0\r\n , VS_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.VS_ID : 0,\r\n User_Email: this.props.spendDetails.currentActiveRequest !== undefined &&\r\n this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester,\r\n dedupStats: 'Unique',\r\n enabledCustomer: 'all',\r\n transactingCustomer: 'all',\r\n buyerRegion: 'all',\r\n businessUnit: 'all',\r\n erpSystem: 'all',\r\n l4IndustryName: 'all',\r\n erpCode: 'all',\r\n erpDesc: 'all',\r\n sicCode: 'all',\r\n sicDesc: 'all', \r\n goods: 'all',\r\n invoiceCountry: 'all',\r\n legalInvoice: 'all',\r\n aribaNwEligible: 'all',\r\n directSpend: 'all',\r\n column1Name: '',\r\n column1Value: '',\r\n tableName: '',\r\n valuesUpdated: false \r\n }, \r\n\r\n }\r\n this.showEnablementSupplierDetailsModal = this.showEnablementSupplierDetailsModal.bind(this)\r\n this.setVisibility = this.setVisibility.bind(this)\r\n this.outsidePopupClick = this.outsidePopupClick.bind(this)\r\n this.onSave = this.onSave.bind(this)\r\n }\r\n\r\n componentDidMount(){\r\n this.GetSpendDocBuyProcessDetails(this.state.inputParam)\r\n }\r\n\r\n showEnablementSupplierDetailsModal(tableName, columnName, columnValue) {\r\n\r\n var inputParameter = this.state.inputParam\r\n inputParameter.tableName = tableName\r\n inputParameter.column1Name = columnName\r\n inputParameter.column1Value = columnValue\r\n\r\n this.setState({\topenPopup: true, inputParam: inputParameter\t})\r\n }\r\n\r\n onSave(value) {\r\n this.setState({valuesUpdated: value})\r\n }\r\n\r\n setVisibility(isVisible) {\r\n this.handlePoupClose() \r\n }\r\n\r\n outsidePopupClick() { \r\n this.handlePoupClose()\r\n }\r\n \r\n handlePoupClose() {\r\n this.setState({ open: false, openPopup: false }, () => {\r\n if(this.state.valuesUpdated) {\r\n this.setState({valuesUpdated: false}, this.GetSpendDocBuyProcessDetails(this.state.inputParam))\r\n }\r\n })\r\n }\r\n \r\n GetSpendDocBuyProcessDetails(inputParam) {\t\t\r\n\t\tthis.props.getSpendDocBuyProcessDetails(inputParam)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tif (response !== undefined && response.status === 200 && response.data.Result !== undefined) {\r\n var docSegmentation; var docSegTotal;\r\n var spendSegmentation; var spendSegTotal;\r\n var aribaBuyProcess; var aribaBuyProcessTotal;\r\n var buySupplierRelationship; var buySupplierRelationshipTotal;\r\n var tables = response.data.Result.map(\r\n function (table) {\r\n if(table['DOC_COUNT_SEGMENTATION']!== undefined){\r\n docSegmentation = table['DOC_COUNT_SEGMENTATION']\r\n docSegTotal=table['GrandTotal']\r\n }\r\n\r\n if(table['SPEND_SEGMENTATION']!== undefined){\r\n spendSegmentation = table['SPEND_SEGMENTATION']\r\n spendSegTotal=table['GrandTotal']\r\n }\r\n\r\n if(table['SAP_ARIBA_BUY_PROCESS']!== undefined){\r\n aribaBuyProcess = table['SAP_ARIBA_BUY_PROCESS']\r\n aribaBuyProcessTotal=table['GrandTotal']\r\n }\r\n\r\n if(table['BUYER_SUPPLIER_RELATIONSHIP']!== undefined){\r\n buySupplierRelationship = table['BUYER_SUPPLIER_RELATIONSHIP']\r\n buySupplierRelationshipTotal = table['GrandTotal']\r\n }\r\n }\r\n )\r\n \r\n this.setState({ segmentationByDocument: docSegmentation, segDocGrandTotal: docSegTotal, segmentationByBuyProcess: aribaBuyProcess, \r\n segBuyProceeGrandTotal: aribaBuyProcessTotal, segmentationBySpend: spendSegmentation, segSpendGrandTotal: spendSegTotal, buyerSupplierRelationship: buySupplierRelationship,\r\n buyerSupplierRelationshipGrandTotal: buySupplierRelationshipTotal, isLoading:false });\r\n \r\n this.props.enablementInsightSuccess(true)\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure('API service is down. Please contact administrator.')\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n this.setState({ responseMsg: 'An error has occurred', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure(this.props.content.error)\r\n\t\t\t\t}\r\n\t\t\t})\r\n }\r\n \r\n componentWillReceiveProps(nextProps, nextState){\r\n if (this.state.Test !== nextProps.filterData && 'dedupStats' in nextProps.filterData)\r\n {\r\n var inputParameter = this.state.inputParam\r\n inputParameter.dedupStats = nextProps.filterData.dedupStats\r\n inputParameter.enabledCustomer= nextProps.filterData.enabledCustomer\r\n inputParameter.transactingCustomer= nextProps.filterData.transactingCustomer\r\n inputParameter.buyerRegion= nextProps.filterData.buyerRegion\r\n inputParameter.businessUnit= nextProps.filterData.businessUnit\r\n inputParameter.erpSystem= nextProps.filterData.erpSystem\r\n inputParameter.l4IndustryName= nextProps.filterData.l4IndustryName\r\n inputParameter.erpCode= nextProps.filterData.erpCode \r\n inputParameter.erpDesc= nextProps.filterData.erpDesc \r\n inputParameter.sicCode= nextProps.filterData.sicCode \r\n inputParameter.sicDesc= nextProps.filterData.sicDesc\r\n inputParameter.goods= nextProps.filterData.goods\r\n inputParameter.invoiceCountry= nextProps.filterData.invoiceCountry\r\n inputParameter.legalInvoice= nextProps.filterData.legalInvoice\r\n inputParameter.aribaNwEligible= nextProps.filterData.aribaNwEligible\r\n inputParameter.metricsType= nextProps.filterData.metricsType\r\n inputParameter.directSpend= nextProps.filterData.directSpend\r\n\r\n this.GetSpendDocBuyProcessDetails(inputParameter)\r\n this.setState({Test:nextProps.filterData , inputParam: Object.keys(nextProps.filterData).length !== 0 ? nextProps.filterData : this.state.inputParam})\r\n //console.log(\"if enablemtn details filetr props-\")\r\n }\r\n else{\r\n // console.log(\"else enablemtn details filetr props-\")\r\n }\r\n \r\n }\r\n\r\n render()\r\n {\r\n return(\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n \r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n
\r\n\r\n \r\n {/*
*/}\r\n */}\r\n\r\n
\r\n \r\n
\r\n\r\n \r\n {this.state.enablementMatchTypesData !== undefined && this.state.enablementMatchTypesData !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n \r\n
\r\n \r\n \r\n {this.state.integrationMatchTypeData !== undefined && this.state.integrationMatchTypeData !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n \r\n
\r\n\r\n \r\n \r\n\r\n {this.state.catalogMatchData !== undefined && this.state.catalogMatchData !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n\r\n \r\n
\r\n {/* \r\n
\r\n \r\n \r\n \r\n\r\n {this.state.sapAribaNetworkEligibleData !== undefined && this.state.sapAribaNetworkEligibleData !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n\r\n \r\n {this.refs.enablementSupplier ? this.state.openPopup ?\r\n this.refs.enablementSupplier.show() :\r\n this.refs.enablementSupplier.hide() : ''} \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\n\r\nconst mapStateToProps = state => {\r\n\treturn {\r\n content: state.content.enablementInsight,\r\n //content: state.content.subLeverCalculations,\r\n\t\tui: state.content.ui,\r\n\t\tcurrency: decodeURIComponent(state.valueStory.Currency),\r\n\t\tuserData: state.valueStory,\r\n\t\tspendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n\t\tbenchMarkCalculations: state.benchMarksData,\r\n\t\tallContent: state.content,\r\n language: state.language,\r\n spendDetails: state.spendDetails,\r\n user: state.default\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n\treturn {\r\n enablementInsightSuccess: message => dispatch(enablementInsightSuccess(message)),\r\n enablementInsightFailure: error => dispatch(enablementInsightFailure(error)),\r\n enablementInsightLoading: bool => dispatch(enablementInsightLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n getSpendDocBuyProcessDetails: (data) => dispatch(getSpendDocBuyProcessDetails(data)),\r\n \r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps) (SpendDocumentBuyProcessTab)","import React from 'react'\r\nimport{connect} from 'react-redux'\r\nimport EnablementInsightTabTable from './EnablementInsightTabTable'\r\nimport EnablementSupplierDetailsPopup from './EnablementSupplierDetailsPopup'\r\nimport { path } from 'Constants'\r\n\r\n// Settings\r\nimport { changeModalBorderStyle, drilldownModalBorderContentStyle, changeModalBorderRectStyle } from 'Constants'\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nimport {\r\n enablementInsightSuccess,\r\n enablementInsightFailure,\r\n enablementInsightLoading, \r\n resetError,\r\n getCategoryInsightDetails,\r\n} from 'actions/spendActions'\r\n\r\nclass CategoryInsightsTab extends React.Component{\r\n constructor(props)\r\n {\r\n super(props);\r\n this.state={\r\n topSpendCategory: [],\r\n topSpendGrandTotal: [],\r\n topDocumentCategory: [],\r\n topDocGrandTotal: [],\r\n outOfScopeL4IndustryCategory: [],\r\n l4IndustryGrandTotal: [],\r\n l2IndustryCategory: [],\r\n l2IndustryGrandTotal: [],\r\n valuesUpdated: false,\r\n isLoading: true,\r\n responseMsg: '',\r\n inputParam: {\r\n DMC_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.DMC_ID : 0\r\n , VS_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.VS_ID : 0,\r\n User_Email: this.props.spendDetails.currentActiveRequest !== undefined &&\r\n this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester,\r\n dedupStats: 'Unique',\r\n enabledCustomer: 'all',\r\n transactingCustomer: 'all',\r\n buyerRegion: 'all',\r\n businessUnit: 'all',\r\n erpSystem: 'all',\r\n l4IndustryName: 'all',\r\n erpCode: 'all',\r\n erpDesc: 'all',\r\n sicCode: 'all',\r\n sicDesc: 'all',\r\n \r\n goods: 'all',\r\n invoiceCountry: 'all',\r\n legalInvoice: 'all',\r\n aribaNwEligible: 'all',\r\n directSpend: 'all',\r\n column1Name: '',\r\n column1Value: '',\r\n tableName: '',\r\n metricsType: 'Invoice Spend' \r\n }, \r\n \r\n }\r\n this.showEnablementSupplierDetailsModal = this.showEnablementSupplierDetailsModal.bind(this)\r\n this.setVisibility = this.setVisibility.bind(this)\r\n this.outsidePopupClick = this.outsidePopupClick.bind(this)\r\n this.onSave = this.onSave.bind(this)\r\n }\r\n\r\n componentDidMount(){\r\n this.GetCategoryInsightDetails(this.state.inputParam) \r\n }\r\n\r\n showEnablementSupplierDetailsModal(tableName, columnName, columnValue) {\r\n\r\n var inputParameter = this.state.inputParam\r\n inputParameter.tableName = tableName\r\n inputParameter.column1Name = columnName\r\n inputParameter.column1Value = columnValue\r\n\r\n console.log(\"Column Details\", columnName +\" \"+ columnValue)\r\n\t\tthis.setState({\topenPopup: true, inputParam: inputParameter\t})\r\n }\r\n\r\n onSave(value) {\r\n this.setState({valuesUpdated: value})\r\n }\r\n\r\n setVisibility(isVisible) {\r\n this.handlePoupClose() \r\n }\r\n\r\n outsidePopupClick() { \r\n this.handlePoupClose()\r\n }\r\n \r\n handlePoupClose() {\r\n this.setState({ open: false, openPopup: false }, () => {\r\n if(this.state.valuesUpdated) {\r\n this.setState({valuesUpdated: false}, this.GetCategoryInsightDetails(this.state.inputParam))\r\n }\r\n })\r\n }\r\n \r\n GetCategoryInsightDetails(inputParam) {\t\t\r\n\t\tthis.props.getCategoryInsightDetails(inputParam)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tif (response !== undefined && response.status === 200 && response.data.Result !== undefined) {\r\n var topSpendData; var topSpendTotal;\r\n var topDocData; var topDocTotal;\r\n var outOfScopeL4Data; var outOfScopeL4Total;\r\n var l2IndustryData; var l2IndustryTotal;\r\n var tables = response.data.Result.map(\r\n function (table) {\r\n if(table['NET_SPEND_CAT_SEGMENTATION']!== undefined){\r\n topSpendData = table['NET_SPEND_CAT_SEGMENTATION']\r\n topSpendTotal = table['GrandTotal']\r\n }\r\n\r\n if(table['NET_DOC_CAT_SEGMENTATION']!== undefined){\r\n topDocData = table['NET_DOC_CAT_SEGMENTATION']\r\n topDocTotal=table['GrandTotal']\r\n }\r\n\r\n if(table['L2_INDUSTRY_NAME']!== undefined){\r\n l2IndustryData = table['L2_INDUSTRY_NAME']\r\n l2IndustryTotal=table['GrandTotal']\r\n } \r\n \r\n if(table['L4_INDUSTRY_NAME']!== undefined){\r\n outOfScopeL4Data = table['L4_INDUSTRY_NAME']\r\n outOfScopeL4Total = table['GrandTotal']\r\n }\r\n }\r\n )\r\n \r\n this.setState({ topSpendCategory : topSpendData, topSpendGrandTotal: topSpendTotal, topDocumentCategory: topDocData, topDocGrandTotal: topDocTotal,\r\n outOfScopeL4IndustryCategory: outOfScopeL4Data, l4IndustryGrandTotal: outOfScopeL4Total, l2IndustryCategory: l2IndustryData,\r\n l2IndustryGrandTotal: l2IndustryTotal, isLoading:false })\r\n this.props.enablementInsightSuccess(true)\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure('API service is down. Please contact administrator.')\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n this.setState({ responseMsg: 'An error has occurred', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure(this.props.content.error)\r\n\t\t\t\t}\r\n\t\t\t})\r\n }\r\n \r\n componentWillReceiveProps(nextProps, nextState){\r\n if (this.state.Test !== nextProps.filterData && 'dedupStats' in nextProps.filterData)\r\n {\r\n var inputParameter = this.state.inputParam\r\n inputParameter.dedupStats = nextProps.filterData.dedupStats\r\n inputParameter.enabledCustomer= nextProps.filterData.enabledCustomer\r\n inputParameter.transactingCustomer= nextProps.filterData.transactingCustomer\r\n inputParameter.buyerRegion= nextProps.filterData.buyerRegion\r\n inputParameter.businessUnit= nextProps.filterData.businessUnit\r\n inputParameter.erpSystem= nextProps.filterData.erpSystem\r\n inputParameter.l4IndustryName= nextProps.filterData.l4IndustryName\r\n inputParameter.erpCode= nextProps.filterData.erpCode \r\n inputParameter.erpDesc= nextProps.filterData.erpDesc \r\n inputParameter.sicCode= nextProps.filterData.sicCode \r\n inputParameter.sicDesc= nextProps.filterData.sicDesc\r\n inputParameter.goods= nextProps.filterData.goods\r\n inputParameter.invoiceCountry= nextProps.filterData.invoiceCountry\r\n inputParameter.legalInvoice= nextProps.filterData.legalInvoice\r\n inputParameter.aribaNwEligible= nextProps.filterData.aribaNwEligible\r\n inputParameter.metricsType= nextProps.filterData.metricsType\r\n inputParameter.directSpend= nextProps.filterData.directSpend\r\n\r\n this.GetCategoryInsightDetails(inputParameter)\r\n this.setState({Test:nextProps.filterData , inputParam: Object.keys(nextProps.filterData).length !== 0 ? nextProps.filterData : this.state.inputParam})\r\n //console.log(\"if enablemtn details filetr props-\")\r\n }\r\n else{\r\n // console.log(\"else enablemtn details filetr props-\")\r\n }\r\n \r\n }\r\n\r\n render()\r\n {\r\n return(\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n\r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n
\r\n \r\n \r\n {/*
\r\n */}\r\n\r\n
\r\n \r\n
\r\n \r\n {/* \r\n {this.state.segmentationByDocument !== undefined && this.state.segmentationByDocument !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n */}\r\n
*/}\r\n \r\n
\r\n\r\n \r\n {this.state.segmentationBySpend !== undefined && this.state.segmentationBySpend !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n \r\n
\r\n\r\n \r\n {this.state.segmentationByBuyProcess !== undefined && this.state.segmentationByBuyProcess !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n \r\n
\r\n \r\n {/* \r\n {this.state.buyerSupplierRelationship !== undefined && this.state.buyerSupplierRelationship !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n \r\n {this.refs.enablementSupplier ? this.state.openPopup ?\r\n this.refs.enablementSupplier.show() :\r\n this.refs.enablementSupplier.hide() : ''} \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n
\r\n \r\n\r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\n\r\n\r\nconst mapStateToProps = state => {\r\n\treturn {\r\n content: state.content.enablementInsight,\r\n //content: state.content.subLeverCalculations,\r\n\t\tui: state.content.ui,\r\n\t\tcurrency: decodeURIComponent(state.valueStory.Currency),\r\n\t\tuserData: state.valueStory,\r\n\t\tspendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n\t\tbenchMarkCalculations: state.benchMarksData,\r\n\t\tallContent: state.content,\r\n language: state.language,\r\n spendDetails: state.spendDetails,\r\n user: state.default\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n\treturn {\r\n enablementInsightSuccess: message => dispatch(enablementInsightSuccess(message)),\r\n enablementInsightFailure: error => dispatch(enablementInsightFailure(error)),\r\n enablementInsightLoading: bool => dispatch(enablementInsightLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n getCategoryInsightDetails: (data) => dispatch(getCategoryInsightDetails(data)),\r\n \r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps,mapDispatchToProps) (CategoryInsightsTab)","import React from 'react'\r\nimport{connect} from 'react-redux'\r\nimport EnablementInsightTabTable from './EnablementInsightTabTable'\r\nimport EnablementSupplierDetailsPopup from './EnablementSupplierDetailsPopup'\r\nimport { path } from 'Constants'\r\n\r\n// Settings\r\nimport { changeModalBorderStyle, drilldownModalBorderContentStyle, changeModalBorderRectStyle } from 'Constants'\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nimport {\r\n enablementInsightSuccess,\r\n enablementInsightFailure,\r\n enablementInsightLoading, \r\n resetError,\r\n getCategoryInsightDetails,\r\n} from 'actions/spendActions'\r\n\r\nclass CategoryOutOfScopeTab extends React.Component{\r\n constructor(props)\r\n {\r\n super(props);\r\n this.state={\r\n topSpendCategory: [],\r\n topSpendGrandTotal: [],\r\n topDocumentCategory: [],\r\n topDocGrandTotal: [],\r\n outOfScopeL4IndustryCategory: [],\r\n l4IndustryGrandTotal: [],\r\n l2IndustryCategory: [],\r\n l2IndustryGrandTotal: [],\r\n valuesUpdated: false,\r\n isLoading: true,\r\n responseMsg: '',\r\n inputParam: {\r\n DMC_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.DMC_ID : 0\r\n , VS_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.VS_ID : 0,\r\n User_Email: this.props.spendDetails.currentActiveRequest !== undefined &&\r\n this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester,\r\n dedupStats: 'Unique',\r\n enabledCustomer: 'all',\r\n transactingCustomer: 'all',\r\n buyerRegion: 'all',\r\n businessUnit: 'all',\r\n erpSystem: 'all',\r\n l4IndustryName: 'all',\r\n erpCode: 'all',\r\n erpDesc: 'all',\r\n sicCode: 'all',\r\n sicDesc: 'all',\r\n \r\n goods: 'all',\r\n invoiceCountry: 'all',\r\n legalInvoice: 'all',\r\n aribaNwEligible: 'all',\r\n directSpend: 'all',\r\n column1Name: '',\r\n column1Value: '',\r\n tableName: '',\r\n metricsType: 'Invoice Spend' \r\n }, \r\n \r\n }\r\n this.showEnablementSupplierDetailsModal = this.showEnablementSupplierDetailsModal.bind(this)\r\n this.setVisibility = this.setVisibility.bind(this)\r\n this.outsidePopupClick = this.outsidePopupClick.bind(this)\r\n this.onSave = this.onSave.bind(this)\r\n }\r\n\r\n componentDidMount(){\r\n this.GetCategoryInsightDetails(this.state.inputParam) \r\n }\r\n\r\n showEnablementSupplierDetailsModal(tableName, columnName, columnValue) {\r\n\r\n var inputParameter = this.state.inputParam\r\n inputParameter.tableName = tableName\r\n inputParameter.column1Name = columnName\r\n inputParameter.column1Value = columnValue\r\n\r\n console.log(\"Column Details\", columnName +\" \"+ columnValue)\r\n\t\tthis.setState({\topenPopup: true, inputParam: inputParameter\t})\r\n }\r\n\r\n onSave(value) {\r\n this.setState({valuesUpdated: value})\r\n }\r\n\r\n setVisibility(isVisible) {\r\n this.handlePoupClose() \r\n }\r\n\r\n outsidePopupClick() { \r\n this.handlePoupClose()\r\n }\r\n \r\n handlePoupClose() {\r\n this.setState({ open: false, openPopup: false }, () => {\r\n if(this.state.valuesUpdated) {\r\n this.setState({valuesUpdated: false}, this.GetCategoryInsightDetails(this.state.inputParam))\r\n }\r\n })\r\n }\r\n \r\n GetCategoryInsightDetails(inputParam) {\t\t\r\n\t\tthis.props.getCategoryInsightDetails(inputParam)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tif (response !== undefined && response.status === 200 && response.data.Result !== undefined) {\r\n var topSpendData; var topSpendTotal;\r\n var topDocData; var topDocTotal;\r\n var outOfScopeL4Data; var outOfScopeL4Total;\r\n var l2IndustryData; var l2IndustryTotal;\r\n var tables = response.data.Result.map(\r\n function (table) {\r\n if(table['NET_SPEND_CAT_SEGMENTATION']!== undefined){\r\n topSpendData = table['NET_SPEND_CAT_SEGMENTATION']\r\n topSpendTotal = table['GrandTotal']\r\n }\r\n\r\n if(table['NET_DOC_CAT_SEGMENTATION']!== undefined){\r\n topDocData = table['NET_DOC_CAT_SEGMENTATION']\r\n topDocTotal=table['GrandTotal']\r\n }\r\n\r\n if(table['L2_INDUSTRY_NAME']!== undefined){\r\n l2IndustryData = table['L2_INDUSTRY_NAME']\r\n l2IndustryTotal=table['GrandTotal']\r\n } \r\n \r\n if(table['L4_INDUSTRY_NAME']!== undefined){\r\n outOfScopeL4Data = table['L4_INDUSTRY_NAME']\r\n outOfScopeL4Total = table['GrandTotal']\r\n }\r\n }\r\n )\r\n \r\n this.setState({ topSpendCategory : topSpendData, topSpendGrandTotal: topSpendTotal, topDocumentCategory: topDocData, topDocGrandTotal: topDocTotal,\r\n outOfScopeL4IndustryCategory: outOfScopeL4Data, l4IndustryGrandTotal: outOfScopeL4Total, l2IndustryCategory: l2IndustryData,\r\n l2IndustryGrandTotal: l2IndustryTotal, isLoading:false })\r\n this.props.enablementInsightSuccess(true)\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure('API service is down. Please contact administrator.')\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n this.setState({ responseMsg: 'An error has occurred', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure(this.props.content.error)\r\n\t\t\t\t}\r\n\t\t\t})\r\n }\r\n \r\n componentWillReceiveProps(nextProps, nextState){\r\n if (this.state.Test !== nextProps.filterData && 'dedupStats' in nextProps.filterData)\r\n {\r\n var inputParameter = this.state.inputParam\r\n inputParameter.dedupStats = nextProps.filterData.dedupStats\r\n inputParameter.enabledCustomer= nextProps.filterData.enabledCustomer\r\n inputParameter.transactingCustomer= nextProps.filterData.transactingCustomer\r\n inputParameter.buyerRegion= nextProps.filterData.buyerRegion\r\n inputParameter.businessUnit= nextProps.filterData.businessUnit\r\n inputParameter.erpSystem= nextProps.filterData.erpSystem\r\n inputParameter.l4IndustryName= nextProps.filterData.l4IndustryName\r\n inputParameter.erpCode= nextProps.filterData.erpCode \r\n inputParameter.erpDesc= nextProps.filterData.erpDesc \r\n inputParameter.sicCode= nextProps.filterData.sicCode \r\n inputParameter.sicDesc= nextProps.filterData.sicDesc\r\n inputParameter.goods= nextProps.filterData.goods\r\n inputParameter.invoiceCountry= nextProps.filterData.invoiceCountry\r\n inputParameter.legalInvoice= nextProps.filterData.legalInvoice\r\n inputParameter.aribaNwEligible= nextProps.filterData.aribaNwEligible\r\n inputParameter.metricsType= nextProps.filterData.metricsType\r\n inputParameter.directSpend= nextProps.filterData.directSpend\r\n\r\n this.GetCategoryInsightDetails(inputParameter)\r\n this.setState({Test:nextProps.filterData , inputParam: Object.keys(nextProps.filterData).length !== 0 ? nextProps.filterData : this.state.inputParam})\r\n //console.log(\"if enablemtn details filetr props-\")\r\n }\r\n else{\r\n // console.log(\"else enablemtn details filetr props-\")\r\n }\r\n \r\n }\r\n\r\n render()\r\n {\r\n return(\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n\r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n
\r\n \r\n \r\n {/*
\r\n */}\r\n\r\n
\r\n \r\n
\r\n\r\n \r\n {this.state.topDocumentCategory !== undefined && this.state.topDocumentCategory !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n \r\n
\r\n \r\n \r\n {this.state.topSpendCategory !== undefined && this.state.topSpendCategory !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n \r\n
\r\n\r\n {/* \r\n {this.state.l2IndustryCategory !== undefined && this.state.l2IndustryCategory !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n */}\r\n \r\n \r\n
*/}\r\n \r\n
\r\n \r\n {/* \r\n {this.state.outOfScopeL4IndustryCategory !== undefined && this.state.outOfScopeL4IndustryCategory !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n \r\n {this.refs.enablementSupplier ? this.state.openPopup ?\r\n this.refs.enablementSupplier.show() :\r\n this.refs.enablementSupplier.hide() : ''} \r\n \r\n
\r\n \r\n {/* \r\n
\r\n \r\n {\r\n
\r\n \r\n\r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\n\r\n\r\nconst mapStateToProps = state => {\r\n\treturn {\r\n content: state.content.enablementInsight,\r\n //content: state.content.subLeverCalculations,\r\n\t\tui: state.content.ui,\r\n\t\tcurrency: decodeURIComponent(state.valueStory.Currency),\r\n\t\tuserData: state.valueStory,\r\n\t\tspendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n\t\tbenchMarkCalculations: state.benchMarksData,\r\n\t\tallContent: state.content,\r\n language: state.language,\r\n spendDetails: state.spendDetails,\r\n user: state.default\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n\treturn {\r\n enablementInsightSuccess: message => dispatch(enablementInsightSuccess(message)),\r\n enablementInsightFailure: error => dispatch(enablementInsightFailure(error)),\r\n enablementInsightLoading: bool => dispatch(enablementInsightLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n getCategoryInsightDetails: (data) => dispatch(getCategoryInsightDetails(data)),\r\n \r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps,mapDispatchToProps) (CategoryOutOfScopeTab)","import React from 'react'\r\nimport{connect} from 'react-redux'\r\nimport Select from 'react-select'\r\nimport EnablementInsightTabTable from './EnablementInsightTabTable'\r\nimport EnablementSupplierDetailsPopup from './EnablementSupplierDetailsPopup'\r\nimport { path } from 'Constants'\r\n\r\n// Settings\r\nimport { changeModalBorderStyle, drilldownModalBorderContentStyle, changeModalBorderRectStyle } from 'Constants'\r\nimport Modal from 'reboron/OutlineModal'\r\n\r\nimport {\r\n enablementInsightSuccess,\r\n enablementInsightFailure,\r\n enablementInsightLoading, \r\n resetError,\r\n getGlobalDetails,\r\n} from 'actions/spendActions'\r\n\r\nclass GlobalTab extends React.Component{\r\n constructor(props)\r\n {\r\n super(props);\r\n this.state={\r\n country: [],\r\n countryGrandTotal: [],\r\n buyerRegion: [],\r\n buyerRegionGrandTotal: [],\r\n businessUnit: [],\r\n businessUnitGrandTotal: [],\r\n erpDetails: [],\r\n erpGrandTotal: [],\r\n legalEinvoicing: [],\r\n legalInvoiceGrandTotal: [],\r\n isLoading: true,\r\n responseMsg: '',\r\n inputParam: {\r\n DMC_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.DMC_ID : 0\r\n , VS_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.VS_ID : 0,\r\n User_Email: this.props.spendDetails.currentActiveRequest !== undefined &&\r\n this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester,\r\n dedupStats: 'Unique',\r\n enabledCustomer: 'all',\r\n transactingCustomer: 'all',\r\n buyerRegion: 'all',\r\n businessUnit: 'all',\r\n erpSystem: 'all',\r\n l4IndustryName: 'all',\r\n erpCode: 'all',\r\n erpDesc: 'all',\r\n sicCode: 'all',\r\n sicDesc: 'all',\r\n \r\n goods: 'all',\r\n invoiceCountry: 'all',\r\n legalInvoice: 'all',\r\n aribaNwEligible: 'all',\r\n directSpend: 'all',\r\n column1Name: '',\r\n column1Value: '',\r\n tableName: '',\r\n valuesUpdated: false,\r\n } \r\n \r\n }\r\n this.showEnablementSupplierDetailsModal = this.showEnablementSupplierDetailsModal.bind(this)\r\n this.setVisibility = this.setVisibility.bind(this)\r\n this.outsidePopupClick = this.outsidePopupClick.bind(this)\r\n this.onSave = this.onSave.bind(this)\r\n }\r\n\r\n componentDidMount(){ \r\n this.GetGlobalDetails(this.state.inputParam)\r\n }\r\n\r\n showEnablementSupplierDetailsModal(tableName, columnName, columnValue) {\r\n\r\n var inputParameter = this.state.inputParam\r\n inputParameter.tableName = tableName\r\n inputParameter.column1Name = columnName\r\n inputParameter.column1Value = columnValue\r\n\r\n // console.log(\"Column Details\", columnName +\" \"+ columnValue)\r\n\t\tthis.setState({\topenPopup: true, inputParam: inputParameter\t})\r\n }\r\n\r\n onSave(value) {\r\n this.setState({valuesUpdated: value})\r\n }\r\n\r\n setVisibility(isVisible) {\r\n this.handlePoupClose() \r\n }\r\n\r\n outsidePopupClick() { \r\n this.handlePoupClose()\r\n }\r\n \r\n handlePoupClose() {\r\n this.setState({ open: false, openPopup: false }, () => {\r\n if(this.state.valuesUpdated) {\r\n this.setState({valuesUpdated: false}, this.GetGlobalDetails(this.state.inputParam))\r\n }\r\n })\r\n }\r\n\r\n GetGlobalDetails(inputParam) {\t\t\r\n\t\tthis.props.getGlobalDetails(inputParam)\r\n\t\t\t.then((response) => {\r\n\t\t\t\tif (response !== undefined && response.status === 200 && response.data.Result !== undefined) {\r\n var countryData; var countryTotal;\r\n var buyerRegionData; var buyerRegionTotal;\r\n var businessUnitData; var businessUnitTotal;\r\n var erpData; var erpTotal;\r\n var legalEInvoicingData; var legalEInvoicingTotal;\r\n\r\n var tables = response.data.Result.map(\r\n function (table) {\r\n if(table['AN_SUPPLIER_COUNTRY']!== undefined){\r\n countryData = table['AN_SUPPLIER_COUNTRY']\r\n countryTotal = table['GrandTotal']\r\n }\r\n\r\n if(table['BUSINESS_UNIT']!== undefined){\r\n businessUnitData = table['BUSINESS_UNIT']\r\n businessUnitTotal = table['GrandTotal']\r\n }\r\n\r\n if(table['BUYER_REGION']!== undefined){\r\n buyerRegionData = table['BUYER_REGION']\r\n buyerRegionTotal = table['GrandTotal']\r\n } \r\n \r\n if(table['ERP_SYSTEM']!== undefined){\r\n erpData = table['ERP_SYSTEM']\r\n erpTotal = table['GrandTotal']\r\n }\r\n\r\n if(table['LEGAL_E_INVOICING']!== undefined){\r\n legalEInvoicingData = table['LEGAL_E_INVOICING']\r\n legalEInvoicingTotal = table['GrandTotal']\r\n }\r\n \r\n }\r\n )\r\n this.setState({ country : countryData, countryGrandTotal : countryTotal, buyerRegion: buyerRegionData, buyerRegionGrandTotal: buyerRegionTotal,\r\n businessUnit: businessUnitData, businessUnitGrandTotal: businessUnitTotal, erpDetails: erpData, erpGrandTotal: erpTotal, \r\n legalEinvoicing: legalEInvoicingData, legalInvoiceGrandTotal: legalEInvoicingTotal, isLoading: false })\r\n \r\n this.props.enablementInsightSuccess(true)\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tif (error.stack.includes('Network Error')) {\r\n this.setState({ responseMsg: 'API service is down. Please contact administrator', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure('API service is down. Please contact administrator.')\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n this.setState({ responseMsg: 'An error has occurred', isError: 'Yes' })\r\n\t\t\t\t\tthis.props.enablementInsightFailure(this.props.content.error)\r\n\t\t\t\t}\r\n\t\t\t})\r\n }\r\n \r\n \r\n componentWillReceiveProps(nextProps, nextState){\r\n if (this.state.Test !== nextProps.filterData && 'dedupStats' in nextProps.filterData)\r\n {\r\n var inputParameter = this.state.inputParam\r\n inputParameter.dedupStats = nextProps.filterData.dedupStats\r\n inputParameter.enabledCustomer= nextProps.filterData.enabledCustomer\r\n inputParameter.transactingCustomer= nextProps.filterData.transactingCustomer\r\n inputParameter.buyerRegion= nextProps.filterData.buyerRegion\r\n inputParameter.businessUnit= nextProps.filterData.businessUnit\r\n inputParameter.erpSystem= nextProps.filterData.erpSystem\r\n inputParameter.l4IndustryName= nextProps.filterData.l4IndustryName\r\n inputParameter.erpCode= nextProps.filterData.erpCode \r\n inputParameter.erpDesc= nextProps.filterData.erpDesc \r\n inputParameter.sicCode= nextProps.filterData.sicCode \r\n inputParameter.sicDesc= nextProps.filterData.sicDesc\r\n inputParameter.goods= nextProps.filterData.goods\r\n inputParameter.invoiceCountry= nextProps.filterData.invoiceCountry\r\n inputParameter.legalInvoice= nextProps.filterData.legalInvoice\r\n inputParameter.aribaNwEligible= nextProps.filterData.aribaNwEligible\r\n inputParameter.metricsType= nextProps.filterData.metricsType\r\n inputParameter.directSpend= nextProps.filterData.directSpend\r\n\r\n this.GetGlobalDetails(inputParameter)\r\n this.setState({Test:nextProps.filterData , inputParam: Object.keys(nextProps.filterData).length !== 0 ? nextProps.filterData : this.state.inputParam})\r\n //console.log(\"if enablemtn details filetr props-\")\r\n }\r\n else{\r\n // console.log(\"else enablemtn details filetr props-\")\r\n }\r\n \r\n }\r\n\r\n\r\n render()\r\n {\r\n return(\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n\r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {this.state.outOfScopeL4IndustryCategory !== undefined && this.state.outOfScopeL4IndustryCategory !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n \r\n {this.refs.enablementSupplier ? this.state.openPopup ?\r\n this.refs.enablementSupplier.show() :\r\n this.refs.enablementSupplier.hide() : ''} \r\n \r\n
\r\n \r\n {/* \r\n
\r\n \r\n {\r\n
\r\n \r\n\r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\n\r\nconst mapStateToProps = state => {\r\n\treturn {\r\n content: state.content.enablementInsight,\r\n //content: state.content.subLeverCalculations,\r\n\t\tui: state.content.ui,\r\n\t\tcurrency: decodeURIComponent(state.valueStory.Currency),\r\n\t\tuserData: state.valueStory,\r\n\t\tspendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n\t\tbenchMarkCalculations: state.benchMarksData,\r\n\t\tallContent: state.content,\r\n language: state.language,\r\n spendDetails: state.spendDetails,\r\n user: state.default\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n\treturn {\r\n enablementInsightSuccess: message => dispatch(enablementInsightSuccess(message)),\r\n enablementInsightFailure: error => dispatch(enablementInsightFailure(error)),\r\n enablementInsightLoading: bool => dispatch(enablementInsightLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n getGlobalDetails: (data) => dispatch(getGlobalDetails(data)),\r\n \r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps,mapDispatchToProps) (GlobalTab)","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport Select from 'react-select'\r\nimport Button from 'UI/Button'\r\nimport { MultiSelect } from 'primereact/multiselect';\r\nimport Popup from \"reactjs-popup\";\r\nimport {\r\n enablementInsightSuccess,\r\n enablementInsightFailure,\r\n enablementInsightLoading,\r\n resetError,\r\n getEnablementFiltersDetails,\r\n storeEnablementInsightSelectedFilter,\r\n storeUserSpendSelection,\r\n trackUserSpendSelections\r\n} from 'actions/spendActions'\r\n\r\nclass EnablementInsightTabFilters extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n\r\n selectedDedupeStats: '',\r\n selectedEnabledCustomer: '',\r\n selectedTransactingCustomer: '',\r\n dedupeStatsOption: [\r\n { label: \"All\", value: \"all\" },\r\n { label: \"Unique\", value: \"Unique\" },\r\n { label: \"Duplicated\", value: \"Duplicated\" }\r\n ],\r\n enabledCustomer: [\r\n { label: \"All\", value: \"all\" },\r\n { label: \"Yes\", value: \"Y\" },\r\n { label: \"No\", value: \"N\" }\r\n ],\r\n transactingCustomer: [\r\n { label: \"All\", value: \"all\" },\r\n { label: \"Yes\", value: \"Y\" },\r\n { label: \"No\", value: \"N\" }\r\n ],\r\n metricsTypeOption: [\r\n { label: \"Invoice & PO\", value: \"Invoice & PO\" },\r\n { label: \"Invoice Only\", value: \"Invoice Only\" },\r\n { label: \"PO Only\", value: \"PO Only\" }, \r\n { label: \"Spend & Document Proxies\", value: \"Spend & Document Proxies\" } \r\n ],\r\n directSpendOptions: [\r\n\t\t\t\t{ label: \"All\", value: \"all\" },\r\n\t\t\t\t{ label: \"Yes\", value: \"Yes\" },\r\n\t\t\t\t{ label: \"No\", value: \"No\" }\r\n\t\t\t],\r\n buyerOption: [],\r\n businessUnitOption: [],\r\n erpSystemOption: [],\r\n l4IndustryOption: [],\r\n erpCodeOption: [],\r\n erpDescOption: [],\r\n sicCodeOption: [],\r\n sicDescOption: [],\r\n goodsOption: [],\r\n invoiceCountryOption: [],\r\n legalInvoiceOption: [],\r\n aribaNetworkEligibleOption: [],\r\n\r\n enablementInsightFilters: {\r\n DMC_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.DMC_ID : 0\r\n , VS_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.VS_ID : 0,\r\n User_Email: this.props.spendDetails.currentActiveRequest !== undefined &&\r\n this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester,\r\n\r\n dedupStats: 'Unique',\r\n enabledCustomer: 'all',\r\n transactingCustomer: 'all',\r\n buyerRegion: ['all'],\r\n businessUnit: ['all'],\r\n erpSystem: ['all'],\r\n l4IndustryName: ['all'],\r\n erpCode: ['all'],\r\n erpDesc: ['all'],\r\n sicCode: ['all'],\r\n sicDesc: ['all'],\r\n\r\n goods: ['all'],\r\n invoiceCountry: ['all'],\r\n legalInvoice: ['all'],\r\n aribaNwEligible: ['all'],\r\n metricsType: 'Invoice & PO',\r\n directSpend: 'all',\r\n\r\n },\r\n\r\n inputParam: {\r\n DMC_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.DMC_ID : 0\r\n , VS_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.VS_ID : 0,\r\n User_Email: this.props.spendDetails.currentActiveRequest !== undefined &&\r\n this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester,\r\n dedupStats: 'Unique',\r\n enabledCustomer: 'all',\r\n transactingCustomer: 'all',\r\n buyerRegion: ['all'],\r\n businessUnit: ['all'],\r\n erpSystem: ['all'],\r\n l4IndustryName: ['all'],\r\n erpCode: ['all'],\r\n erpDesc: ['all'],\r\n sicCode: ['all'],\r\n sicDesc: ['all'],\r\n goods: ['all'],\r\n invoiceCountry: ['all'],\r\n legalInvoice: ['all'],\r\n aribaNwEligible: ['all'],\r\n metricsType: 'Invoice & PO',\r\n directSpend: 'all',\r\n },\r\n businessUnitFilter: 'all',\r\n buyerRegionFilter: 'all',\r\n l4IndustryFilter: 'all',\r\n erpSystemFilter: 'all',\r\n erpCodeFilter: 'all',\r\n erpDescFilter: 'all',\r\n sicCodeFilter: 'all',\r\n sicDescFilter: 'all',\r\n goodsFilter: 'all',\r\n invoiceCountryFilter: 'all',\r\n legalInvoiceFilter: 'all',\r\n aribaNwEligibleFilter: 'all',\r\n isFilterChanges: false,\r\n\r\n }\r\n }\r\n\r\n handleDedupeStatsChange(data) {\r\n //this.setState({selectedDedupeStats:value.label})\r\n\r\n var objFilters = this.state.enablementInsightFilters\r\n objFilters.dedupStats = data.value\r\n this.setState({ enablementInsightFilters: objFilters, isFilterChanges: true })\r\n //console.log(\"EnablementFilters: \", this.state.enablementInsightFilters)\r\n }\r\n\r\n handleEnabledCustomerChange(data) {\r\n //this.setState({selectedEnabledCustomer: value.label})\r\n\r\n var objFilters = this.state.enablementInsightFilters\r\n objFilters.enabledCustomer = data.value\r\n this.setState({ enablementInsightFilters: objFilters, isFilterChanges: true })\r\n }\r\n\r\n handleTransactCustomerChange(data) {\r\n //this.setState({selectedTransactingCustomer: value.label})\r\n\r\n var objFilters = this.state.enablementInsightFilters\r\n objFilters.transactingCustomer = data.value\r\n this.setState({ enablementInsightFilters: objFilters, isFilterChanges: true })\r\n }\r\n\r\n handleMetricsTypeChange(data) {\r\n //this.setState({selectedTransactingCustomer: value.label})\r\n\r\n var objFilters = this.state.enablementInsightFilters\r\n objFilters.metricsType = data.value\r\n this.setState({ enablementInsightFilters: objFilters, isFilterChanges: true })\r\n }\r\n\r\n handleBuyerRegionChange(data) {\r\n var objFilters = this.state.enablementInsightFilters\r\n objFilters.buyerRegion = data.value.length > 0 ? data.value : ['all'];\r\n if (data.value.length > 1 && data.value[0] == 'all') {\r\n data.value.shift()\r\n objFilters.buyerRegion = data.value\r\n }\r\n if (data.value.length > 1 && data.value.includes('all')) {\r\n objFilters.buyerRegion = [];\r\n objFilters.buyerRegion = ['all'];\r\n }\r\n let str = objFilters.buyerRegion.toString();\r\n this.setState({ enablementInsightFilters: objFilters, buyerRegionFilter: str, isFilterChanges: true })\r\n }\r\n\r\n handleBusinessUnitChange(data) {\r\n var objFilters = this.state.enablementInsightFilters\r\n objFilters.businessUnit = data.value.length > 0 ? data.value : ['all'];\r\n if (data.value.length > 1 && data.value[0] == 'all') {\r\n data.value.shift()\r\n objFilters.businessUnit = data.value\r\n }\r\n if (data.value.length > 1 && data.value.includes('all')) {\r\n objFilters.businessUnit = [];\r\n objFilters.businessUnit = ['all'];\r\n }\r\n let str = objFilters.businessUnit.toString();\r\n this.setState({ enablementInsightFilters: objFilters, businessUnitFilter: str, isFilterChanges: true })\r\n }\r\n\r\n handleErpSystemChange(data) {\r\n var objFilters = this.state.enablementInsightFilters\r\n objFilters.erpSystem = data.value.length > 0 ? data.value : ['all'];\r\n if (data.value.length > 1 && data.value[0] == 'all') {\r\n data.value.shift()\r\n objFilters.erpSystem = data.value\r\n }\r\n if (data.value.length > 1 && data.value.includes('all')) {\r\n objFilters.erpSystem = [];\r\n objFilters.erpSystem = ['all'];\r\n }\r\n let str = objFilters.erpSystem.toString();\r\n this.setState({ enablementInsightFilters: objFilters, erpSystemFilter: str, isFilterChanges: true })\r\n }\r\n\r\n handleL4IndustryChange(data) {\r\n var objFilters = this.state.enablementInsightFilters\r\n objFilters.l4IndustryName = data.value.length > 0 ? data.value : ['all'];\r\n \r\n let str;\r\n if(data.value.length == this.state.l4IndustryOption.length)\r\n {\r\n str = 'all';\r\n }\r\n else{\r\n str = objFilters.l4IndustryName.toString();\r\n }\r\n this.setState({ enablementInsightFilters: objFilters, l4IndustryFilter: str, isFilterChanges: true })\r\n }\r\n\r\n handleErpCodeChange(data) {\r\n var objFilters = this.state.enablementInsightFilters\r\n objFilters.erpCode = data.value.length > 0 ? data.value : ['all'];\r\n \r\n let str;\r\n if(data.value.length == this.state.erpCodeOption.length)\r\n {\r\n str = 'all';\r\n }\r\n else{\r\n str = objFilters.erpCode.toString();\r\n }\r\n this.setState({ enablementInsightFilters: objFilters, erpCodeFilter: str, isFilterChanges: true })\r\n }\r\n\r\n handleErpDescChange(data) {\r\n var objFilters = this.state.enablementInsightFilters\r\n objFilters.erpDesc = data.value.length > 0 ? data.value : ['all'];\r\n \r\n let str;\r\n if(data.value.length == this.state.erpDescOption.length)\r\n {\r\n str= 'all';\r\n }\r\n else{\r\n str = objFilters.erpDesc.toString();\r\n }\r\n this.setState({ enablementInsightFilters: objFilters, erpDescFilter: str, isFilterChanges: true })\r\n }\r\n\r\n handleSicCodeChange(data) {\r\n var objFilters = this.state.enablementInsightFilters\r\n objFilters.sicCode = data.value.length > 0 ? data.value : ['all'];\r\n if (data.value.length > 1 && data.value[0] == 'all') {\r\n data.value.shift()\r\n objFilters.sicCode = data.value\r\n }\r\n if (data.value.length > 1 && data.value.includes('all')) {\r\n objFilters.sicCode = [];\r\n objFilters.sicCode = ['all'];\r\n }\r\n let str = objFilters.sicCode.toString();\r\n this.setState({ enablementInsightFilters: objFilters, sicCodeFilter: str, isFilterChanges: true })\r\n }\r\n\r\n handleSicDescChange(data) {\r\n var objFilters = this.state.enablementInsightFilters\r\n objFilters.sicDesc = data.value.length > 0 ? data.value : ['all'];\r\n if (data.value.length > 1 && data.value[0] == 'all') {\r\n data.value.shift()\r\n objFilters.sicDesc = data.value\r\n }\r\n if (data.value.length > 1 && data.value.includes('all')) {\r\n objFilters.sicDesc = [];\r\n objFilters.sicDesc = ['all'];\r\n }\r\n let str = objFilters.sicDesc.toString();\r\n this.setState({ enablementInsightFilters: objFilters, sicDescFilter: str, isFilterChanges: true })\r\n }\r\n\r\n handleGoodsChange(data) {\r\n var objFilters = this.state.enablementInsightFilters\r\n objFilters.goods = data.value.length > 0 ? data.value : ['all'];\r\n if (data.value.length > 1 && data.value[0] == 'all') {\r\n data.value.shift()\r\n objFilters.goods = data.value\r\n }\r\n if (data.value.length > 1 && data.value.includes('all')) {\r\n objFilters.goods = [];\r\n objFilters.goods = ['all'];\r\n }\r\n let str = objFilters.goods.toString();\r\n this.setState({ enablementInsightFilters: objFilters, goodsFilter: str, isFilterChanges: true })\r\n }\r\n\r\n handleDirectSpendChange(data) {\r\n\t\tvar objFilters = this.state.enablementInsightFilters\r\n\t\tobjFilters.directSpend = data.value \r\n this.setState({ enablementInsightFilters: objFilters, isFilterChanges:true }) \r\n }\r\n\r\n handleLegalInvoiceChange(data) {\r\n var objFilters = this.state.enablementInsightFilters\r\n objFilters.legalInvoice = data.value.length > 0 ? data.value : ['all'];\r\n if (data.value.length > 1 && data.value[0] == 'all') {\r\n data.value.shift()\r\n objFilters.legalInvoice = data.value\r\n }\r\n if (data.value.length > 1 && data.value.includes('all')) {\r\n objFilters.legalInvoice = [];\r\n objFilters.legalInvoice = ['all'];\r\n }\r\n let str = objFilters.legalInvoice.toString();\r\n this.setState({ enablementInsightFilters: objFilters, legalInvoiceFilter: str, isFilterChanges: true })\r\n }\r\n\r\n handleInvoiceCountryChange(data) {\r\n var objFilters = this.state.enablementInsightFilters\r\n objFilters.invoiceCountry = data.value.length > 0 ? data.value : ['all'];\r\n \r\n let str;\r\n if(data.value.length == this.state.invoiceCountryOption.length)\r\n {\r\n str = 'all';\r\n }\r\n else{\r\n str = objFilters.invoiceCountry.toString();\r\n }\r\n this.setState({ enablementInsightFilters: objFilters, invoiceCountryFilter: str, isFilterChanges: true })\r\n }\r\n\r\n handleAribaNetworkEligibleChange(data) {\r\n var objFilters = this.state.enablementInsightFilters\r\n objFilters.aribaNwEligible = data.value.length > 0 ? data.value : ['all'];\r\n if (data.value.length > 1 && data.value[0] == 'all') {\r\n data.value.shift()\r\n objFilters.aribaNwEligible = data.value\r\n }\r\n if (data.value.length > 1 && data.value.includes('all')) {\r\n objFilters.aribaNwEligible = [];\r\n objFilters.aribaNwEligible = ['all'];\r\n }\r\n\r\n let str = objFilters.aribaNwEligible.toString();\r\n\r\n if (str.includes(\"Not B&I, CA or SCC Eligible\")) {\r\n //replace comma (,) from (~~) in datavalue to consider it as single value \r\n str = str.replace(\"Not B&I, CA or SCC Eligible\", \"Not B&I~~ CA or SCC Eligible\")\r\n }\r\n\r\n this.setState({ enablementInsightFilters: objFilters, aribaNwEligibleFilter: str, isFilterChanges: true })\r\n }\r\n\r\n\r\n showAdvanceFilter() {\r\n var advanceFilterDiv = document.getElementById('advanceFilter').style;\r\n if (advanceFilterDiv.display === \"none\") {\r\n advanceFilterDiv.display = \"block\";\r\n } else {\r\n advanceFilterDiv.display = \"none\";\r\n }\r\n }\r\n\r\n handleApplyFilter() {\r\n //this.props.storeEnablementInsightSelectedFilter(this.state.enablementInsightFilters)\r\n var objFilters = this.state.inputParam\r\n objFilters.buyerRegion = this.state.buyerRegionFilter\r\n objFilters.businessUnit = this.state.businessUnitFilter\r\n objFilters.erpSystem = this.state.erpSystemFilter\r\n objFilters.l4IndustryName = this.state.l4IndustryFilter\r\n objFilters.erpCode = this.state.erpCodeFilter\r\n objFilters.erpDesc = this.state.erpDescFilter\r\n objFilters.sicCode = this.state.sicCodeFilter\r\n objFilters.sicDesc = this.state.sicDescFilter\r\n objFilters.goods = this.state.goodsFilter\r\n objFilters.invoiceCountry = this.state.invoiceCountryFilter\r\n objFilters.legalInvoice = this.state.legalInvoiceFilter\r\n objFilters.aribaNwEligible = this.state.aribaNwEligibleFilter\r\n objFilters.dedupStats = this.state.enablementInsightFilters.dedupStats\r\n objFilters.enabledCustomer = this.state.enablementInsightFilters.enabledCustomer\r\n objFilters.transactingCustomer = this.state.enablementInsightFilters.transactingCustomer\r\n objFilters.metricsType = this.state.enablementInsightFilters.metricsType\r\n objFilters.directSpend = this.state.enablementInsightFilters.directSpend\r\n\r\n //this.setState({ enablementInsightFilters: objFilters})\r\n let selectedFilter = Object.assign({}, objFilters)//this.state.enablementInsightFilters)\r\n this.props.setFilters(selectedFilter)\r\n this.setState({ isFilterChanges: false})\r\n\r\n var userEmail = this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester;\r\n var VSId = this.props.spendDetails.currentActiveRequest.VS_ID\r\n var DMCId = this.props.spendDetails.currentActiveRequest.DMC_ID\r\n this.props.storeUserSpendSelection(VSId, DMCId, 'Enablement Insight', 'Enablement Insight', 'Metric Type', this.state.enablementInsightFilters.metricsType, userEmail)\r\n .then((response) => {\r\n this.props.trackUserSpendSelections(response.data.Result)\r\n }).catch((error) => {\r\n this.props.enablementInsightFailure(error.response.data.Message)\r\n })\r\n }\r\n\r\n handleResetFilter() {\r\n var objFilters = this.state.enablementInsightFilters\r\n objFilters.dedupStats = 'Unique'\r\n objFilters.enabledCustomer = 'all'\r\n objFilters.transactingCustomer = 'all'\r\n objFilters.buyerRegion = ['all']\r\n objFilters.businessUnit = ['all']\r\n objFilters.erpSystem = ['all']\r\n objFilters.l4IndustryName = ['all']\r\n objFilters.erpCode = ['all']\r\n objFilters.erpDesc = ['all']\r\n objFilters.sicCode = ['all']\r\n objFilters.sicDesc = ['all']\r\n objFilters.goods = ['all']\r\n objFilters.legalInvoice = ['all']\r\n objFilters.invoiceCountry = ['all']\r\n objFilters.aribaNwEligible = ['all']\r\n objFilters.metricsType = 'Invoice & PO'\r\n objFilters.directSpend = 'all'\r\n\r\n var objInput = this.state.inputParam\r\n objInput.dedupStats = 'Unique'\r\n objInput.enabledCustomer = 'all'\r\n objInput.transactingCustomer = 'all'\r\n objInput.buyerRegion = 'all'\r\n objInput.businessUnit = 'all'\r\n objInput.erpSystem = 'all'\r\n objInput.l4IndustryName = 'all'\r\n objInput.erpCode = 'all'\r\n objInput.erpDesc = 'all'\r\n objInput.sicCode = 'all'\r\n objInput.sicDesc = 'all'\r\n objInput.goods = 'all'\r\n objInput.legalInvoice = 'all'\r\n objInput.invoiceCountry = 'all'\r\n objInput.aribaNwEligible = 'all'\r\n objInput.metricsType = 'Invoice & PO'\r\n objFilters.directSpend = 'all'\r\n\r\n this.setState({\r\n enablementInsightFilters: objFilters, inputParam: objInput, isFilterChanges: false,\r\n buyerRegionFilter: 'all',\r\n businessUnitFilter: 'all',\r\n erpSystemFilter: 'all',\r\n l4IndustryFilter: 'all',\r\n erpCodeFilter: 'all',\r\n erpDescFilter: 'all',\r\n sicCodeFilter: 'all',\r\n sicDescFilter: 'all',\r\n goodsFilter: 'all',\r\n invoiceCountryFilter: 'all',\r\n legalInvoiceFilter: 'all',\r\n aribaNwEligibleFilter: 'all',\r\n }, () => this.props.setFilters(objInput))\r\n\r\n var userEmail = this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester;\r\n var VSId = this.props.spendDetails.currentActiveRequest.VS_ID\r\n var DMCId = this.props.spendDetails.currentActiveRequest.DMC_ID\r\n this.props.storeUserSpendSelection(VSId, DMCId, 'Enablement Insight', 'Enablement Insight', 'Metric Type', 'Invoice Spend', userEmail)\r\n .then((response) => {\r\n this.props.trackUserSpendSelections(response.data.Result)\r\n }).catch((error) => {\r\n this.props.enablementInsightFailure(error.response.data.Message)\r\n })\r\n }\r\n\r\n componentDidMount() {\r\n this.loadFiltersData()\r\n }\r\n\r\n loadFiltersData() {\r\n\r\n this.props.getEnablementFiltersDetails(this.state.inputParam)\r\n .then((response) => {\r\n if (response !== undefined && response.status === 200 && response.data.Result !== undefined) {\r\n //\tsetTimeout(() => { this.props.defineScopeSuccess('') }, 2000)\r\n\r\n var l4IndustryData = [];// [{ label: \"All\", value: \"all\" }];\r\n if (response.data.Result['L4_INDUSTRY_NAME'] !== null) {\r\n response.data.Result['L4_INDUSTRY_NAME'].forEach(item => {\r\n let value = Object.values(item)\r\n l4IndustryData.push({ label: value[0], value: value[0] });\r\n });\r\n }\r\n\r\n var buyerData = [{ label: \"All Buyer Regions\", value: \"all\" }];\r\n if (response.data.Result['BUYER_REGION'] !== null) {\r\n response.data.Result['BUYER_REGION'].forEach(item => {\r\n let value = Object.values(item)\r\n buyerData.push({ label: value[0], value: value[0] });\r\n });\r\n }\r\n\r\n var businessUnitData = [{ label: \"All Business Units\", value: \"all\" }];\r\n if (response.data.Result['BUSINESS_UNIT'] !== null) {\r\n response.data.Result['BUSINESS_UNIT'].forEach(item => {\r\n let value = Object.values(item)\r\n businessUnitData.push({ label: value[0], value: value[0] });\r\n });\r\n }\r\n\r\n var erpData = [{ label: \"All\", value: \"all\" }];\r\n if (response.data.Result['ERP_SYSTEM'] !== null) {\r\n response.data.Result['ERP_SYSTEM'].forEach(item => {\r\n let value = Object.values(item)\r\n erpData.push({ label: value[0], value: value[0] });\r\n });\r\n }\r\n\r\n var erpCodeData = [];//[{ label: \"All\", value: \"all\" }];\r\n if (response.data.Result['ERP_COMMODITY_CODE1'] !== null) {\r\n response.data.Result['ERP_COMMODITY_CODE1'].forEach(item => {\r\n let value = Object.values(item)\r\n erpCodeData.push({ label: value[0], value: value[0] });\r\n });\r\n }\r\n\r\n var erpDescData = [];//[{ label: \"All\", value: \"all\" }];\r\n if (response.data.Result['ERP_COMMODITY_CODE2'] !== null) {\r\n response.data.Result['ERP_COMMODITY_CODE2'].forEach(item => {\r\n let value = Object.values(item)\r\n erpDescData.push({ label: value[0], value: value[0] });\r\n });\r\n }\r\n\r\n var sicCodeData = [{ label: \"All\", value: \"all\" }];\r\n if (response.data.Result['SIC_UNSPSC_CODE'] !== null) {\r\n response.data.Result['SIC_UNSPSC_CODE'].forEach(item => {\r\n let value = Object.values(item)\r\n sicCodeData.push({ label: value[0], value: value[0] });\r\n });\r\n }\r\n\r\n var sicDescData = [{ label: \"All\", value: \"all\" }];\r\n if (response.data.Result['SIC_UNSPSC_DESC'] !== null) {\r\n response.data.Result['SIC_UNSPSC_DESC'].forEach(item => {\r\n let value = Object.values(item)\r\n sicDescData.push({ label: value[0], value: value[0] });\r\n });\r\n }\r\n\r\n var goodsData = [{ label: \"All\", value: \"all\" }];\r\n if (response.data.Result['GOODS_OR_SERVICE'] !== null) {\r\n response.data.Result['GOODS_OR_SERVICE'].forEach(item => {\r\n let value = Object.values(item)\r\n goodsData.push({ label: value[0], value: value[0] });\r\n });\r\n }\r\n\r\n\r\n var invCountryData = [];//[{ label: \"All\", value: \"all\" }];\r\n if (response.data.Result['INV_ORIGINATION_CNTRY'] !== null) {\r\n response.data.Result['INV_ORIGINATION_CNTRY'].forEach(item => {\r\n let value = Object.values(item)\r\n invCountryData.push({ label: value[0], value: value[0] });\r\n });\r\n }\r\n\r\n\r\n var legalInvoiceData = [{ label: \"All\", value: \"all\" }];\r\n if (response.data.Result['LEGAL_E_INVOICING'] !== null) {\r\n response.data.Result['LEGAL_E_INVOICING'].forEach(item => {\r\n let value = Object.values(item)\r\n legalInvoiceData.push({ label: value[0], value: value[0] });\r\n });\r\n }\r\n\r\n var networkEligibleData = [{ label: \"All\", value: \"all\" }];\r\n if (response.data.Result['SAP_ARIBA_NETWORK_ELIGIBLE'] !== null) {\r\n response.data.Result['SAP_ARIBA_NETWORK_ELIGIBLE'].forEach(item => {\r\n let value = Object.values(item)\r\n networkEligibleData.push({ label: value[0], value: value[0] });\r\n });\r\n }\r\n\r\n this.setState({\r\n buyerOption: buyerData,\r\n businessUnitOption: businessUnitData,\r\n erpSystemOption: erpData,\r\n l4IndustryOption: l4IndustryData,\r\n erpCodeOption: erpCodeData,\r\n erpDescOption: erpDescData,\r\n sicCodeOption: sicCodeData,\r\n sicDescOption: sicDescData,\r\n goodsOption: goodsData,\r\n invoiceCountryOption: invCountryData,\r\n legalInvoiceOption: legalInvoiceData,\r\n aribaNetworkEligibleOption: networkEligibleData\r\n });\r\n\r\n var target = this.props.spendDetails.userSpendFilterSelections.find((obj) => {\r\n return (obj.CriteriaName === 'Metric Type')\r\n })\r\n var selectedMetricType = target.UserPreference === '' ? target.DefaultValue : target.UserPreference\r\n\r\n var objEnablementInsight = this.state.enablementInsightFilters;\r\n objEnablementInsight.metricsType = selectedMetricType;\r\n\r\n var objFilters = this.state.inputParam;\r\n objFilters.buyerRegion = this.state.buyerRegionFilter\r\n objFilters.businessUnit = this.state.businessUnitFilter\r\n objFilters.erpSystem = this.state.erpSystemFilter\r\n objFilters.l4IndustryName = this.state.l4IndustryFilter\r\n objFilters.erpCode = this.state.erpCodeFilter\r\n objFilters.erpDesc = this.state.erpDescFilter\r\n objFilters.sicCode = this.state.sicCodeFilter\r\n objFilters.sicDesc = this.state.sicDescFilter\r\n objFilters.goods = this.state.goodsFilter\r\n objFilters.invoiceCountry = this.state.invoiceCountryFilter\r\n objFilters.legalInvoice = this.state.legalInvoiceFilter\r\n objFilters.aribaNwEligible = this.state.aribaNwEligibleFilter\r\n objFilters.dedupStats = this.state.enablementInsightFilters.dedupStats\r\n objFilters.enabledCustomer = this.state.enablementInsightFilters.enabledCustomer\r\n objFilters.transactingCustomer = this.state.enablementInsightFilters.transactingCustomer\r\n objFilters.metricsType = selectedMetricType\r\n objFilters.directSpend = this.state.enablementInsightFilters.directSpend\r\n\r\n\r\n let selectedFilter = Object.assign({}, objFilters)//this.state.enablementInsightFilters)\r\n this.props.setFilters(selectedFilter)\r\n\r\n this.props.enablementInsightSuccess(true)\r\n }\r\n }).catch((error) => {\r\n if (error.stack.includes('Network Error')) {\r\n this.props.enablementInsightFailure('API service is down. Please contact administrator.')\r\n }\r\n else {\r\n this.props.enablementInsightFailure(this.props.content.error)\r\n }\r\n })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n\r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n
\r\n \r\n \r\n {/*
\r\n */}\r\n\r\n
\r\n \r\n
\r\n\r\n \r\n {this.state.buyerRegion !== undefined && this.state.buyerRegion !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n \r\n
\r\n \r\n\r\n {/* \r\n {this.state.country !== undefined && this.state.country !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n */}\r\n
*/}\r\n \r\n
\r\n\r\n \r\n {this.state.businessUnit !== undefined && this.state.businessUnit !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n \r\n
\r\n\r\n \r\n {this.state.erpDetails !== undefined && this.state.erpDetails !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n \r\n
\r\n \r\n {/* \r\n {this.state.legalEinvoicing !== undefined && this.state.legalEinvoicing !== null ?\r\n
\r\n {this.props.content.noDataFound}
}\r\n \r\n {this.refs.enablementSupplier ? this.state.openPopup ?\r\n this.refs.enablementSupplier.show() :\r\n this.refs.enablementSupplier.hide() : ''} \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n content: state.content.enablementInsight,\r\n //content: state.content.subLeverCalculations,\r\n ui: state.content.ui,\r\n currency: decodeURIComponent(state.valueStory.Currency),\r\n userData: state.valueStory,\r\n allContent: state.content,\r\n language: state.language,\r\n spendDetails: state.spendDetails,\r\n user: state.default,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n enablementInsightSuccess: message => dispatch(enablementInsightSuccess(message)),\r\n enablementInsightFailure: error => dispatch(enablementInsightFailure(error)),\r\n enablementInsightLoading: bool => dispatch(enablementInsightLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n getEnablementFiltersDetails: (data) => dispatch(getEnablementFiltersDetails(data)),\r\n storeEnablementInsightSelectedFilter: (data) => dispatch(storeEnablementInsightSelectedFilter(data)),\r\n storeUserSpendSelection: (VSId, DMCId, spendModule, spendSubModule, criteriaName, selectedValue, userEmail) => dispatch(storeUserSpendSelection(VSId, DMCId, spendModule, spendSubModule, criteriaName, selectedValue, userEmail)),\r\n trackUserSpendSelections: (userSelections) => dispatch(trackUserSpendSelections(userSelections))\r\n\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EnablementInsightTabFilters)\r\n\r\n","import React from 'react';\r\nimport { connect } from 'react-redux'\r\nimport SubTabsPanel from '../../Tabs/SubTabsPanel'\r\nimport EnablementDetails from './EnablementDetails'\r\nimport OnboardingWorkstreamDetails from './OnboardingWorkstreamDetails'\r\n// import EnablementRecommendations from './EnablementRecommendations'\r\nimport NetworkMatchTab from './NetworkMatchTab';\r\nimport SpendDocumentBuyProcessTab from './SpendDocumentBuyProcessTab'\r\nimport CategoryInsightsTab from './CategoryInsightsTab'\r\nimport CategoryOutOfScopeTab from './CategoryOutOfScopeTab'\r\nimport GlobalTab from './GlobalTab'\r\nimport VideoHelp from 'components/UI/VideoHelp'\r\nimport EnablementInsightTabFilters from 'components/Spend/EnablementInsight/EnablementInsightTabFilters'\r\nimport Button from 'UI/Button'\r\nimport { withRouter } from 'react-router';\r\nimport FaAngleRight from 'react-icons/lib/fa/angle-left'\r\n\r\n\r\nimport {\r\n enablementInsightSuccess,\r\n enablementInsightFailure,\r\n enablementInsightLoading,\r\n resetError,\r\n getEnablementDetails,\r\n getEnablementFiltersDetails,\r\n redirectFromEnablementTab\r\n ,redirectFromWizard\r\n} from 'actions/spendActions'\r\n\r\nclass EnablementInsightTabContainer extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.myRef = React.createRef()\r\n this.state = {\r\n tabId: 1,\r\n tabs: [],\r\n tabsWithoutCapIQ: [],\r\n tabsWithoutParentCapIQ: [],\r\n tabsWithoutCapIQAndParentCapIQ: [],\r\n isCapIQLicesend: false,\r\n classificationData: [],\r\n\r\n filterData: {\r\n buyerOption: [],\r\n businessUnitOption: [],\r\n erpSystemOption: [],\r\n l4IndustryOption: [],\r\n erpCodeOption: [],\r\n erpDescOption: [],\r\n sicCodeOption: [],\r\n sicDescOption: [],\r\n goodsOption: [],\r\n invoiceCountryOption: [],\r\n legalInvoiceOption: [],\r\n },\r\n\r\n inputParam: {\r\n DMC_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.DMC_ID : 0\r\n , VS_ID: this.props.spendDetails !== undefined && this.props.spendDetails.currentActiveRequest !== undefined ? this.props.spendDetails.currentActiveRequest.VS_ID : 0,\r\n User_Email: this.props.spendDetails.currentActiveRequest !== undefined &&\r\n this.props.spendDetails.currentActiveRequest.SAPRequester === this.props.user.user.Email ? this.props.user.user.Email : this.props.spendDetails.currentActiveRequest.SAPRequester\r\n },\r\n filterValues: {}\r\n }\r\n\r\n this.dispatchTabChange = this.dispatchTabChange.bind(this)\r\n this.intializeSupplierTabs = this.intializeSupplierTabs.bind(this)\r\n this.setFilters = this.setFilters.bind(this)\r\n this.redirect = this.redirect.bind(this)\r\n }\r\n\r\n setFilters(value) {\r\n this.setState({ filterValues: value }, this.intializeSupplierTabs)\r\n }\r\n\r\n componentDidMount() {\r\n this.props.redirectFromWizard(false);\r\n this.intializeSupplierTabs();\r\n //this.loadFiltersData();\r\n // this.setState({ isCapIQLicesend: this.props.user.user.applicationFeatures.findIndex(a => a.Action === this.props.capIQ.capIQAction) > -1 ? true : false })\r\n }\r\n\r\n intializeSupplierTabs() {\r\n\r\n const tabs = [\r\n // {\r\n // id: 1,\r\n // label: \"Enablement Recommendations\",\r\n // component: (\r\n
\r\n \r\n\r\n
\r\n\r\n \r\n option.value === this.state.enablementInsightFilters.dedupStats\r\n )}\r\n onChange={value => this.handleDedupeStatsChange(value)}\r\n options={this.state.dedupeStatsOption}\r\n isSearchable={false}\r\n //isDisabled={this.props.spendDetails.isLoading}\r\n noOptionsMessage={() => null} />\r\n
\r\n\r\n {this.props.content.dedupddlText}
\r\n \r\n option.value === this.state.enablementInsightFilters.enabledCustomer\r\n )}\r\n onChange={value => this.handleEnabledCustomerChange(value)}\r\n options={this.state.enabledCustomer}\r\n isSearchable={false}\r\n //isDisabled={this.props.spendDetails.isLoading}\r\n noOptionsMessage={() => null} />\r\n
\r\n\r\n {this.props.content.possiblyEnabledCustddlText}
\r\n \r\n option.value === this.state.enablementInsightFilters.transactingCustomer\r\n )}\r\n onChange={value => this.handleTransactCustomerChange(value)}\r\n options={this.state.transactingCustomer}\r\n isSearchable={false}\r\n //isDisabled={this.props.spendDetails.isLoading}\r\n noOptionsMessage={() => null} />\r\n
\r\n\r\n {this.props.content.transactingCustddlText}
\r\n \r\n JSON.stringify(option.value) === JSON.stringify(this.state.enablementInsightFilters.metricsType)\r\n )}\r\n onChange={value => this.handleMetricsTypeChange(value)}\r\n options={this.state.metricsTypeOption}\r\n isSearchable={false}\r\n //isDisabled={this.props.spendDetails.isLoading}\r\n noOptionsMessage={() => null} />\r\n
\r\n {this.props.content.metricsType}
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n - \r\n
- {this.props.content.metricsTypeToolTip} \r\n
- {this.props.content.metricsTypeToolTipUl1} \r\n
- {this.props.content.metricsTypeToolTipUl2} \r\n
- {this.props.content.metricsTypeToolTipUl3} \r\n
- {this.props.content.metricsTypeToolTipUl4}
\r\n
\r\n
\r\n \r\n
\r\n
\r\n\r\n \r\n\r\n
\r\n\r\n \r\n this.handleBuyerRegionChange(value)}\r\n options={this.state.buyerOption}\r\n disabled={this.props.spendDetails.isLoading}\r\n display=\"chip\"\r\n />\r\n
\r\n\r\n {this.props.content.buyerRegionddlText}
\r\n \r\n this.handleBusinessUnitChange(value)}\r\n options={this.state.businessUnitOption}\r\n disabled={this.props.spendDetails.isLoading}\r\n />\r\n
\r\n\r\n {this.props.content.businessUnitddlText}
\r\n \r\n this.handleErpSystemChange(value)}\r\n options={this.state.erpSystemOption}\r\n noOptionsMessage={() => null} />\r\n
\r\n\r\n {this.props.content.erpSystemddlText}
\r\n \r\n this.handleL4IndustryChange(value)}\r\n options={this.state.l4IndustryOption}\r\n disabled={this.props.spendDetails.isLoading}\r\n placeholder={this.props.content.l4IndustryddlPlaceHolder}\r\n />\r\n
\r\n\r\n {this.props.content.l4IndustryddlText}
\r\n \r\n this.handleErpCodeChange(value)}\r\n options={this.state.erpCodeOption}\r\n placeholder= {this.props.content.erpTier1ddlPlaceHolder}\r\n />\r\n
\r\n\r\n {this.props.content.erpTier1ddlText}
\r\n \r\n this.handleErpDescChange(value)}\r\n options={this.state.erpDescOption}\r\n placeholder= {this.props.content.erpTier2ddlPlaceHolder}\r\n />\r\n
\r\n\r\n {this.props.content.erpTier2ddlText}
\r\n \r\n\r\n
\r\n\r\n \r\n this.handleSicCodeChange(value)}\r\n options={this.state.sicCodeOption}\r\n noOptionsMessage={() => null} />\r\n
\r\n\r\n {this.props.content.sicddlText}
\r\n \r\n this.handleSicDescChange(value)}\r\n options={this.state.sicDescOption}\r\n noOptionsMessage={() => null} />\r\n
\r\n\r\n\r\n {this.props.content.sicDescddlText}
\r\n \r\n this.handleInvoiceCountryChange(value)}\r\n options={this.state.invoiceCountryOption}\r\n noOptionsMessage={() => null}\r\n placeholder= {this.props.content.invOrgCountryddlPlaceHolder}\r\n />\r\n
\r\n\r\n\r\n {this.props.content.invOrgCountryddlText}
\r\n \r\n this.handleLegalInvoiceChange(value)}\r\n options={this.state.legalInvoiceOption}\r\n noOptionsMessage={() => null} />\r\n
\r\n\r\n {this.props.content.eInvoiceddlText}
\r\n \r\n\t\t\t\t\t\t\t\t option.value === this.state.enablementInsightFilters.directSpend\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\tonChange={value => this.handleDirectSpendChange(value)}\r\n\t\t\t\t\t\t\t\t\toptions={this.state.directSpendOptions}\r\n\t\t\t\t\t\t\t\t\tisDisabled={this.props.spendDetails.isLoading}\r\n\t\t\t\t\t\t\t\t\tisSearchable={false}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t
\r\n\r\n {this.props.content.directSpendText}
\r\n\t\t\t\t\t\t\t\t\r\n this.handleGoodsChange(value)}\r\n options={this.state.goodsOption}\r\n noOptionsMessage={() => null} />\r\n
\r\n\r\n {this.props.content.goodsddlText}
\r\n \r\n this.handleAribaNetworkEligibleChange(value)}\r\n options={this.state.aribaNetworkEligibleOption}\r\n noOptionsMessage={() => null} />\r\n
\r\n\r\n {this.props.content.sapNwEligibleddlText}
\r\n \r\n\t\t\t\t\t{this.state.isFilterChanges===true ?{this.props.content.pendingChanges}:''}\r\n\t\t\t\t
\r\n\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => {\r\n return {\r\n content: state.content.enablementInsight,\r\n //content: state.content.subLeverCalculations,\r\n ui: state.content.ui,\r\n currency: decodeURIComponent(state.valueStory.Currency),\r\n userData: state.valueStory,\r\n spendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n benchMarkCalculations: state.benchMarksData,\r\n allContent: state.content,\r\n language: state.language,\r\n spendDetails: state.spendDetails,\r\n user: state.default\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n return {\r\n enablementInsightSuccess: message => dispatch(enablementInsightSuccess(message)),\r\n enablementInsightFailure: error => dispatch(enablementInsightFailure(error)),\r\n enablementInsightLoading: bool => dispatch(enablementInsightLoading(bool)),\r\n resetError: error => dispatch(resetError(error)),\r\n getEnablementDetails: (data) => dispatch(getEnablementDetails(data)),\r\n getEnablementFiltersDetails: (data) => dispatch(getEnablementFiltersDetails(data)),\r\n redirectFromEnablementTab: (flag) => dispatch(redirectFromEnablementTab(flag)),\r\n redirectFromWizard: (flag) => dispatch(redirectFromWizard(flag))\r\n }\r\n}\r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(EnablementInsightTabContainer));","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport EnablementInsightTabContainer from 'components/Spend/EnablementInsight/EnablementInsightTabContainer'\r\n\r\nclass EnablementInsightContainer extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = { \r\n }\r\n this.redirect = this.redirect.bind(this)\r\n }\r\n \r\n redirect(){\r\n this.props.dispatchTabChange(1)\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n {(this.props.content.title)}{
\r\n {this.props.content.subTitle}
\r\n \r\n
\r\n \r\n {
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n content: state.content.spendAnalysis.defineScope\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EnablementInsightContainer)\r\n\r\n\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Control, Errors } from 'react-redux-form'\r\nimport Popup from \"reactjs-popup\";\r\n\r\n// Actions\r\nimport {\r\n\tautoSave,\r\n\tresetMessage,\r\n\tresetError\r\n} from 'actions/userActions'\r\n\r\n// UI\r\nimport Radio from 'react-mdl/lib/Radio'\r\nimport Textfield from 'react-mdl/lib/Textfield'\r\n\r\nclass SpendReport extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = { render: false }\r\n\r\n\t\tthis.save = this.save.bind(this)\r\n\r\n\t}\r\n\r\n\t// Save state to backend before user sends report\r\n\tsave() {\r\n\t\tlet token = localStorage.getItem('jwtToken')\r\n\r\n\t\tif (this.props.user.user && token) {\r\n\t\t\tthis.props.autoSave(this.props.userData, this.props.user.userprofile.Roles[0].indexOf(\"BusinessCaseRole\") > -1)\r\n\t\t}\r\n\t}\r\n\r\n\tshouldComponentUpdate(nextProps, nextState) {\r\n\t\treturn nextState.render ? true : false\r\n\t}\r\n\r\n\tcomponentWillMount() {\r\n\t\tthis.props.resetMessage()\r\n\t\tthis.props.resetError()\r\n\r\n\t\tlet flag = localStorage.getItem('enablementInsightFlag')\r\n\t\tif(flag == \"true\"){\r\n\t\t\tthis.setState({ enablementInsightFlag: true })\r\n\t\t}else{\r\n\t\t\tthis.setState({ enablementInsightFlag: false })\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentWillUnmount() {\r\n\t\tthis.props.resetMessage()\r\n\t\tthis.props.resetError()\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\t//this.updateAllCalculations()\r\n\t\tthis.save()\r\n\t\tthis.setState({\r\n\t\t\trender: true\r\n\t\t})\r\n\t}\r\n\r\n\trender() {\r\n\t\tvar _applicationFeatures = this.props.user.user.applicationFeatures\r\n\t\tvar displayAllReports = (item, _props) => {\r\n\t\t\tif (item.reportAction === undefined && item.reportAction === null) {\r\n\t\t\t\treturn null;\r\n\t\t\t}\r\n\r\n\t\t\tvar Checked = true;\r\n\t\t\tvar obj = Object.keys(item).map(function (childitem) {\r\n\t\t\t\tif (_applicationFeatures.findIndex(a => a.Action === (item[childitem].reportAction)) > -1) {\r\n\t\t\t\t\tlet iconpath = \"images/\" + item[childitem].icon;\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t(item[childitem].reportId == 9 && !_props.user.userprofile.Roles[0].includes(\"Standard Internal User\")) ? null :\r\n\t\t\t\t\t\t(item[childitem].reportId == 1 && _props.user.userprofile.Roles[0].includes(\"Standard Customer User\")) ? null :\r\n\t\t\t\t\t\t(item[childitem].reportId == 2 && _props.user.userprofile.Roles[0].includes(\"Standard Customer User\")) ? null :\r\n\t\t\t\t\t\t(item[childitem].reportId == 5 && _props.user.userprofile.Roles[0].includes(\"Standard Customer User\")) ? null :\r\n\t\t\t\t\t\t(item[childitem].reportId == 6 && _props.user.userprofile.Roles[0].includes(\"Standard Customer User\")) ? null :\r\n\t\t\t\t\t\t(item[childitem].reportId == 7 && _props.user.userprofile.Roles[0].includes(\"Standard Customer User\")) ? null :\r\n\t\t\t\t\t\t(item[childitem].reportId == 8 && _props.user.userprofile.Roles[0].includes(\"Standard Customer User\")) ? null :\r\n\t\t\t\t\t\t(item[childitem].reportId == 9 && _props.user.userprofile.Roles[0].includes(\"Standard Customer User\")) ? null :\r\n\t\t\t\t\t\titem[childitem].isActiveReport !== undefined &&\r\n\t\t\t\t\t\t\titem[childitem].isActiveReport === true ?\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t: \r\n\r\n\t\t\t\t\t) // return ends\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\treturn null;\r\n\t\t\t\t}\r\n\t\t\t});//object map end\r\n\t\t\treturn obj;\r\n\r\n\r\n\t\t};\r\n\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t{item[childitem].title}
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t _props.handleRadioButtonClick(e.target.value)}>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{Checked = false}\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t
\r\n\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tlanguage: state.language,\r\n\t\tuser: state.default,\r\n\t\tvalidation: state.content.validation,\r\n\t\tsubLeverCalculationContent: state.content.subLeverCalculations.subLeverCalculation,\r\n\t\tspendAsPercentageOfRevenue: state.spendAsPercentageOfRevenue,\r\n\t\tWACC: state.valueStory.BusinessValueToYou[0].ValueDriver[3].SubLever[1].UserInput[4].UserInput,\r\n\t\tNPV: state.valueStory.BusinessValueFromSap[0].NPV,\r\n\t\tROI: state.valueStory.BusinessValueFromSap[0].ROIValue,\r\n\t\tROIData: state.valueStory.BusinessValueFromSap[0].ROI,\r\n\t\tvalueOfDelayedInvestment: state.valueStory.BusinessValueFromSap[0].ValueOfDelayedInvestment,\r\n\t\tpaybackPeriod: state.valueStory.BusinessValueFromSap[0].Payback,\r\n\t\tuserData: state.valueStory,\r\n\t\tbusinessValueFromSAPAribaData: state.valueStory.BusinessValueFromSap[0],\r\n\t\tcalculateROIData: state.valueStory.BusinessValueFromSap[0].ROI,\r\n\t\tcontent: state.content.spendAnalysis.spendReport,\r\n\t\tallReports: state.content.reports\r\n\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tautoSave: (ValueStory, isBusinessCaseAccess) => dispatch(autoSave(ValueStory, isBusinessCaseAccess)),\r\n\t\tresetMessage: () => dispatch(resetMessage()),\r\n\t\tresetError: () => dispatch(resetError())\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SpendReport)\r\n\r\n\r\n","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport { Form, actions } from 'react-redux-form'\r\n\r\n// Actions\r\nimport {\r\n\treportSubmit,\r\n\treportSubmitSuccess,\r\n\treportSubmitFailure,\r\n\treplacePlaceholders,\r\n\tdownloadReport,\r\n\tresetError,\r\n\tresetMessage\r\n} from 'actions/userActions'\r\n\r\n// Components\r\nimport SpendReport from '../Menu/SpendReport';\r\n// UI\r\nimport Button from 'UI/Button'\r\nimport VideoHelp from 'components/UI/VideoHelp'\r\n\r\nclass NextStepsContainer extends Component {\r\n\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.state = {\r\n\t\t\treportType: '1'\r\n\t\t}\r\n\r\n\r\n\t\tthis.handleRadioButtonClick = this.handleRadioButtonClick.bind(this)\r\n\t\tthis.handleReportSubmit = this.handleReportSubmit.bind(this)\r\n\t\tthis.downloadFile = this.downloadFile.bind(this)\r\n\r\n\t}\r\n\r\n\thandleRadioButtonClick(value) {\r\n\t\tthis.setState({\r\n\t\t\treportType: value\r\n\t\t})\r\n\r\n\t\tthis.props.resetMessage()\r\n\t}\r\n\r\n\thandleReportSubmit(formValues) {\r\n\t\tif (this.state.reportType == 2 || this.state.reportType == 3 || this.state.reportType == 6)\r\n\t\t\tthis.props.reportSubmitSuccess(this.props.reportContent.waitMessage)\r\n\t\tthis.props.resetError()\r\n\t\tlet values = Object.assign({}, formValues)\r\n\t\tvalues.Type = this.state.reportType\r\n\t\tvalues.Language = this.props.language.toUpperCase()\r\n\t\tvar content = this.props.reportContent\r\n\t\tthis.props.reportSubmit(values) //Build Report Using Template files\r\n\t\t\t.then((response) => {\r\n\t\t\t\tif (response.status !== undefined && response.status === 200) {\r\n\t\t\t\t\t//this.props.reportSubmitSuccess('Still generating report. Please be patient.')\r\n\t\t\t\t\tthis.props.replacePlaceholders(values, response.data.Result) //Replace placeholders after generating Report Using Template files\r\n\t\t\t\t\t\t.then((response) => {\r\n\t\t\t\t\t\t\tif (response.status !== undefined && response.status === 200) {\r\n\t\t\t\t\t\t\t\tthis.props.downloadReport(values, response.data.Result) //Download Report\r\n\t\t\t\t\t\t\t\t\t.then((response) => {\r\n\t\t\t\t\t\t\t\t\t\tif (response.status !== undefined && response.status === 200) {\r\n\t\t\t\t\t\t\t\t\t\t\tthis.downloadFile(response)\r\n\t\t\t\t\t\t\t\t\t\t\tthis.props.reportSubmitSuccess(content['200'])\r\n\t\t\t\t\t\t\t\t\t\t\t//document.getElementById('report.Email').blur()\r\n\t\t\t\t\t\t\t\t\t\t\t//this.formDispatch(actions.reset('report.Email'))\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\t\t\t\tthis.props.reportSubmitFailure(response.response.data.Message)\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t}).catch((error) => {\r\n\t\t\t\t\t\t\t\t\t\tthis.props.reportSubmitFailure(error.response.data.Message)\r\n\t\t\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\t\tthis.props.reportSubmitFailure(response.response.data.Message)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}).catch((error) => {\r\n\t\t\t\t\t\t\tthis.props.reportSubmitFailure(error.response.data.Message)\r\n\t\t\t\t\t\t})\r\n\t\t\t\t}\r\n\t\t\t\telse if (response.response.status == 400 && response.response.data.Message == 'requestfileNotPresent') {\r\n\t\t\t\t\tthis.props.reportSubmitFailure(this.props.reportContent.requestfileNotPresent)\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthis.props.reportSubmitFailure(response.response.data.Message)\r\n\t\t\t\t}\r\n\t\t\t}).catch((error) => {\r\n\t\t\t\tthis.props.reportSubmitFailure(error.response.data.Message)\r\n\t\t\t})\r\n\t}\r\n\r\n\tdownloadFile(response) {\r\n\t\tconst byteArrays = [];\r\n\t\tconst byteCharacters = atob(response.data);\r\n\r\n\t\tfor (let offset = 0; offset < byteCharacters.length; offset += 512) {\r\n\t\t\tconst slice = byteCharacters.slice(offset, offset + 512);\r\n\t\t\tconst byteNumbers = new Array(slice.length);\r\n\t\t\tfor (let i = 0; i < slice.length; i++) {\r\n\t\t\t\tbyteNumbers[i] = slice.charCodeAt(i);\r\n\t\t\t}\r\n\r\n\t\t\tconst byteArray = new Uint8Array(byteNumbers);\r\n\t\t\tbyteArrays.push(byteArray);\r\n\t\t}\r\n\r\n\t\tvar blob = new Blob(byteArrays);\r\n\r\n\t\tvar [, filename] = response.headers['content-disposition'].split('filename=');\r\n\t\tfilename = filename.replace(/ /g, \"_\").replace(/\"/g, \"\")\r\n\r\n\t\tif (navigator.msSaveBlob) {\r\n\t\t\tnavigator.msSaveBlob(blob, filename);\r\n\t\t}\r\n\t\telse {\r\n\t\t\tvar link = document.createElement(\"a\");\r\n\t\t\tlink.href = URL.createObjectURL(blob);\r\n\t\t\tlink.setAttribute('visibility', 'hidden');\r\n\t\t\tlink.download = filename\r\n\t\t\tdocument.body.appendChild(link);\r\n\t\t\tlink.click();\r\n\t\t\tdocument.body.removeChild(link);\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentWillMount() {\r\n\t\tvar reportTypeArray = [];\r\n\t\tvar _applicationFeatures = this.props.user.user.applicationFeatures\r\n\t\tvar item = this.props.allReports.reportTypes\r\n\t\t//if (item.reportAction != undefined && item.reportAction != null) {\t\t\t\r\n\t\tvar obj = Object.keys(item).map(function (childitem) {\r\n\t\t\tif (_applicationFeatures.findIndex(a => a.Action === (item[childitem].reportAction)) > -1) {\r\n\t\t\t\treportTypeArray.push(item[childitem].reportId)\r\n\t\t\t}\r\n\t\t});\r\n\t\tlet flag = localStorage.getItem('enablementInsightFlag')\r\n\t\tif (flag == \"true\") {\r\n\t\t\tthis.setState({ reportType: 5 })\r\n\t\t}\r\n\t\telse if (reportTypeArray.length > 0) {\r\n\t\t\tthis.setState({ reportType: reportTypeArray[0] })\r\n\t\t}\r\n\r\n\t\t// this.props.valueStoryCurrentMenu('Next Steps');\r\n\t\t// this.props.showValueStoryMenu(true);\r\n\t\twindow.scrollTo(0, 0)\r\n\t}\r\n\r\n\tcomponentWillUnmount() {\r\n\t\tthis.props.resetError();\r\n\t\tthis.props.resetMessage();\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t{/* \r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{this.state.enablementInsightFlag ? displayAllReports(this.props.allReports.enablementReportTypes, this.props) : displayAllReports(this.props.allReports.reportTypes, this.props)}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
*/}\r\n\t\t\t\r\n\t\t\t\t\t\t{displayAllReports(this.props.allReports.reportTypes, this.props)}\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tcontent: state.content.nextSteps,\r\n\t\treportContent: state.content.menu.getReport,\r\n\t\tvalidation: state.content.validation,\r\n\t\tuserData: state.valueStory,\r\n\t\tuser: state.default,\r\n\t\tallReports: state.content.reports,\r\n\t\tlanguage: state.language,\r\n\t\tcontentSpendReport: state.content.spendAnalysis.spendReport,\r\n\t}\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\t//setMutualActionPlan: (mutualActionPlan) => dispatch(setMutualActionPlan(mutualActionPlan)),\r\n\t\treportSubmit: (formValues) => dispatch(reportSubmit(formValues)),\r\n\t\treportSubmitSuccess: (user) => dispatch(reportSubmitSuccess(user)),\r\n\t\treportSubmitFailure: (error) => dispatch(reportSubmitFailure(error)),\r\n\t\treplacePlaceholders: (formValues, fileName) => dispatch(replacePlaceholders(formValues, fileName)),\r\n\t\tdownloadReport: (formValues, fileName) => dispatch(downloadReport(formValues, fileName)),\r\n\t\tresetError: () => dispatch(resetError()),\r\n\t\tresetMessage: () => dispatch(resetMessage())\r\n\t}\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(NextStepsContainer)","import axios from 'axios'\r\nimport { ROOT_URL } from 'Constants'\r\nimport {\r\n getDetailedFileLoading,\r\n getDetailedFileSuccess,\r\n addSelectedColumnLoading,\r\n addSelectedColumnSuccess,\r\n getSelectedColumnLoading,\r\n getSelectedColumnSuccess,\r\n getDetailedFileFileRecordsInsertedLoading,\r\n getDetailedFileRecordsInsertedSuccess,\r\n getDetailedFileFileRecordsInsertedFailure\r\n} from'./spendActions'\r\n\r\nconst getSccLoadDataAPI = `${ROOT_URL}/SCC/GetSCCLoadData`\r\nconst addSccSelectedColumnAPI = `${ROOT_URL}/SCC/AddSCCColumnsForRequest`\r\nconst getSccSelectedColumnAPI = `${ROOT_URL}/SCC/GetSCCColumnsForRequest`\r\nconst getSCCMasterColumnsConfigurationAPI = `${ROOT_URL}/SCC/GetSCCMasterColumnsConfiguration`\r\nconst uploadSccTabDataAPI = `${ROOT_URL}/SCC/updateSCCTabData`\r\n\r\nexport function getSccLoadData(DMCId, VSId, userEmail) {\r\n return (dispatch) => {\r\n dispatch(getDetailedFileLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DMCId: DMCId, VSId: VSId, Email: userEmail },\r\n url: getSccLoadDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getDetailedFileSuccess(false))\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n }\r\n \r\n export function addSelectedColumnForScc(DMCId, VSId, USER_ID, COLUMNSOrFAVId) {\r\n return (dispatch) => {\r\n dispatch(addSelectedColumnLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n let payload = {\r\n DmcId: DMCId, VsId: VSId, UserId: USER_ID\r\n };\r\n payload[\"Columns\"] = COLUMNSOrFAVId;\r\n return axios({\r\n method: 'post',\r\n data: payload,\r\n url: addSccSelectedColumnAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(addSelectedColumnSuccess(false))\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n }\r\n \r\n export function getSccSelectedColumn(DMCId, VSId, USER_ID) {\r\n return (dispatch) => {\r\n dispatch(getSelectedColumnLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: { DmcId: DMCId, VsId: VSId, UserId: USER_ID },\r\n url: getSccSelectedColumnAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getSelectedColumnSuccess(false))\r\n return response\r\n }).catch((error) => {\r\n return error\r\n })\r\n }\r\n }\r\n \r\n export function getSCCMasterColumnsConfiguration() {\r\n return (dispatch) => {\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n url: getSCCMasterColumnsConfigurationAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n })\r\n }\r\n }\r\n \r\n export function uploadSccTabData(records) {\r\n return (dispatch) => {\r\n dispatch(getDetailedFileFileRecordsInsertedLoading(true))\r\n let token = localStorage.getItem('jwtToken')\r\n return axios({\r\n method: 'post',\r\n data: records,\r\n url: uploadSccTabDataAPI,\r\n headers: {\r\n 'Authorization': `AribaBearer ${token}`\r\n }\r\n }).then((response) => {\r\n dispatch(getDetailedFileFileRecordsInsertedLoading(false))\r\n dispatch(getDetailedFileRecordsInsertedSuccess(true))\r\n return response\r\n }).catch((error) => {\r\n dispatch(getDetailedFileFileRecordsInsertedFailure(error))\r\n return error\r\n })\r\n }\r\n }\r\n ","import React, { Component } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport * as XLSX from 'xlsx';\r\nimport TextfilterRenderer from 'UI/TextFilterRenderer';\r\nimport ReactDataGrid from 'react-data-grid';\r\nimport { path } from 'Constants'\r\nimport _, { cloneDeep } from 'lodash';\r\n\r\n\r\nimport {\r\n valueStoryCurrentMenu,\r\n showValueStoryMenu\r\n} from 'actions/userActions'\r\n\r\nimport {\r\n getSccLoadData,\r\n getSCCMasterColumnsConfiguration,\r\n uploadSccTabData,\r\n addSelectedColumnForScc,\r\n getSccSelectedColumn\r\n} from 'actions/sccActions'\r\n\r\nimport {\r\n setValueStoryDmciDetails,\r\n setResultSummaryDetails,\r\n setTopDetails,\r\n resetError,\r\n clearCurrentActiveRequest,\r\n getCapIQDataBlank,\r\n defineScopeLoading,\r\n selectedEnablementWaveDetails,\r\n UpdateComment\r\n} from 'actions/spendActions'\r\n\r\nimport {\r\n formatThousands\r\n} from 'utils/Utils'\r\nimport Button from 'UI/Button';\r\n\r\n\r\nimport { CustomGridSccE, PopupE } from 'UI/CustomComponents/Controls';\r\nimport EnablementWavePopUp from '../Spend/EnablementWavePopUp'\r\nimport { Toolbar, Data, Filters, Editors, Menu } from \"react-data-grid-addons\";\r\nconst selectors = Data.Selectors;\r\nconst { DropDownEditor } = Editors;\r\n// const dropDownEnablementRmdValues = [\"Already Transacting\", \"Relationship Exists\", \"Enterprise – Supplier Dedicated Specialist\", \"Enterprise – Integration Candidate\",\r\n// \"Enterprise – Integration Ready Candidate\", \"Enterprise – Integration\", \"Enterprise – Portal\", \"Out of Scope – Category Not Eligible\"]\r\n//updated with spend files dropdown values\r\nconst dropDownEnablementRmdValues = ['Already Transacting','Relationship Exists','Enterprise - Supplier Dedicated Specialist (Integration & Catalog)',\r\n 'Enterprise - Integration Ready & Catalog Candidate','Enterprise - Integration Ready Candidate','Enterprise - Integration & Catalog Candidate',\r\n 'Enterprise - Integration & Catalog,Enterprise - Integration Candidate','Enterprise - Integration','Enterprise - Portal & Catalog Candidate',\r\n 'Enterprise - Portal & Catalog','Enterprise - Portal','Managed Standard Account','On Going Standard Account',\r\n 'Out of Scope - Category Not Eligible']\r\nconst dropDownEnablementRmdEditor = \r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t{this.props.contentSpendReport.subTitle}{
\r\n\t\t\t\t\t{this.props.contentSpendReport.description}
\r\n\t\t\t\t\r\n
\r\n \r\n {(this.state.isLoading) ?\r\n \r\n : null\r\n }\r\n {(this.state.isError === 'Yes') ?\r\n
\r\n {this.state.responseMsg}
\r\n : {this.state.responseMsg}
\r\n }\r\n \r\n
\r\n {this.props.sccTabJsonFile.subTitle}
\r\n {this.props.sccTabJsonFile.subHeader}
\r\n \r\n (this.customGridRef = ref)}\r\n columns={this.state.columns}\r\n columnSelect={this.state.columnSelect}\r\n sccExcelColumns={this.state.sccExcelColumns}\r\n headerToColumn = {this.state.headerToColumn}\r\n filteredSummationArray = {this.state.filteredSummationArray}\r\n data={this.state.data}\r\n keyColumn={\"REF_NUM\"}\r\n minHeight={500}\r\n exportFromScc={true}\r\n scc={true}\r\n exportFileName='scc'\r\n currentFilter={true}\r\n handleChange={this.handleChange}\r\n headerRowHeight={70}\r\n onSave={this.saveData}\r\n onColumnSelection={this.onColumnSelection}\r\n />\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n\t\t\t\t
\r\n\t\t\t-1? '8%' : '2%', paddingTop: '20px'}}>\r\n\t\t\t\t\t\t{/*
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t
*/}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{this.props.content.spendAnalysis.title}/ {this.state.tabs.length > 0 ? this.state.tabs[this.state.tabId - 1].label : ''}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{this.props.content.spendAnalysis.title}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t -1, \"spend-width-2\": this.actions.indexOf(routes.businessValue) === -1 })}>\r\n\t\t\t\t\t\t{/* Hiding this as per ticket AV-709\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t
*/}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{this.props.content.spendAnalysis.title}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t props.handleMouseEnter(e)} onMouseLeave={props.handleMouseLeave}>\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\r\n\t\t\t
\r\n\t\t)\r\n\t}\r\n\telse {\r\n\t\treturn null;\r\n\t}\r\n}\r\n\r\nexport default ValueMenuItemsExpanded\r\n\r\nValueMenuItemsExpanded.defaultProps = {\r\n\taccountMenuExpanded: false,\r\n\tadminMenuExpanded: false,\r\n\tlanguageMenuExpanded: false\r\n}\r\n\r\nValueMenuItemsExpanded.propTypes = {\r\n\taccountMenuExpanded: PropTypes.bool.isRequired,\r\n\thandleMenuAction: PropTypes.func.isRequired,\r\n\tadminMenuExpanded: PropTypes.func.isRequired,\r\n\tlanguageMenuExpanded: PropTypes.func.isRequired\r\n}\r\n","import React, { PureComponent } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport ScrollArea from 'react-scrollbar'\r\n\r\nimport { valueStoryReset } from 'actions/fetchValueStory'\r\n\r\n// Utils\r\nimport classnames from 'classnames'\r\n\r\n// Components\r\nimport ValueMenuItems from './ValueMenuItems'\r\n\r\n// UI\r\nimport { modalStyle, path, routes, changeModalStyle, changeModalContentStyle } from 'Constants'\r\nimport ValueMenuItemsExpanded from './ValueMenuItemsExpanded';\r\n\r\n// Actions\r\nimport {\r\n valueStoryCurrentMenu,\r\n syncMenuAndButton\r\n}\r\n from 'actions/userActions'\r\nimport {\r\n pendingChanges\r\n} from 'actions/spendActions'\r\n\r\nimport Modal from 'reboron/OutlineModal'\r\nimport Button from 'UI/Button'\r\n\r\n// Settings\r\nconst autoHeightModalStyle = Object.assign({}, modalStyle)\r\n\r\nconst valueStoryModalStyle = Object.assign({}, modalStyle)\r\nautoHeightModalStyle.height = 'auto'\r\nvalueStoryModalStyle.maxWidth = '1024px'\r\nvalueStoryModalStyle.height = 'auto'\r\n\r\nconst modalContentStyle = {\r\n padding: '70px',\r\n height: '50%',\r\n overflowY: 'auto',\r\n background: 'white'\r\n}\r\n\r\nclass ValueMenuContainer extends PureComponent {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n expanded: false,\r\n menuItem: ''\r\n }\r\n\r\n this.showMenu = this.showMenu.bind(this)\r\n this.handleSelectedMenuItem = this.handleSelectedMenuItem.bind(this)\r\n this.showModal = this.showModal.bind(this)\r\n this.hideModal = this.hideModal.bind(this)\r\n this.closeModal = this.closeModal.bind(this)\r\n this.setWrapperRef = this.setWrapperRef.bind(this);\r\n this.handleClickOutside = this.handleClickOutside.bind(this);\r\n this.handleMouseEnter = this.handleMouseEnter.bind(this);\r\n this.handleMouseLeave = this.handleMouseLeave.bind(this);\r\n }\r\n\r\n handleSelectedMenuItem(e, menuItem) {\r\n window.scrollTo({top: 0, behavior: 'smooth'})\r\n if (this.props.change == null) {\r\n this.props.valueStoryCurrentMenu(menuItem);\r\n }\r\n else {\r\n e.preventDefault()\r\n switch (menuItem) {\r\n case 'Company':\r\n this.setState({ menuItem: routes.discovery })\r\n break\r\n case 'Priorities':\r\n this.setState({ menuItem: routes.areaOfInterest })\r\n break\r\n case 'Solutions':\r\n this.setState({ menuItem: routes.skus })\r\n break\r\n case 'Business Case':\r\n this.setState({ menuItem: routes.businessValue })\r\n break\r\n case 'Next Steps':\r\n this.setState({ menuItem: routes.nextSteps })\r\n break\r\n default:\r\n break\r\n }\r\n this.showModal(\"terms\")\r\n }\r\n }\r\n\r\n showModal(action) {\r\n this.refs[action].show()\r\n }\r\n\r\n hideModal(action) {\r\n this.refs[action].hide()\r\n }\r\n\r\n closeModal(action) {\r\n this.props.pendingChanges(null)\r\n this.refs[action].hide()\r\n this.props.history.push(this.state.menuItem)\r\n }\r\n\r\n handleMenuExpand() {\r\n this.setState({\r\n expanded: !this.state.expanded\r\n })\r\n }\r\n\r\n showMenu() {\r\n return this.props.user !== null &&\r\n this.props.user.user !== null &&\r\n this.props.user.user.applicationFeatures !== null &&\r\n this.props.user.user.applicationFeatures !== undefined &&\r\n this.props.userData !== null\r\n }\r\n\r\n componentDidMount() {\r\n document.addEventListener('mousedown', this.handleClickOutside);\r\n }\r\n\r\n componentWillUnmount() {\r\n document.removeEventListener('mousedown', this.handleClickOutside);\r\n }\r\n\r\n /**\r\n * Set the wrapper ref\r\n */\r\n setWrapperRef(node) {\r\n this.wrapperRef = node;\r\n }\r\n\r\n /**\r\n * Alert if clicked on outside of element\r\n */\r\n handleClickOutside(event) {\r\n if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {\r\n this.setState({\r\n expanded: false\r\n })\r\n }\r\n }\r\n\r\n handleMouseEnter=(e)=>{\r\n const selectedButton = e.target.innerText; \r\n\t\tthis.props.syncMenuAndButton(e.target.parentNode.id == '' ? selectedButton : e.target.parentNode.id);\t\t\r\n\t}\r\n\r\n\thandleMouseLeave=()=>{\r\n\t\tthis.props.syncMenuAndButton('')\t\t\r\n\t}\r\n\r\n componentWillMount() {\r\n this.setState({\r\n selectedMenuItem: this.props.currentMenuItem //this.props.content.menuItems[0].name\r\n })\r\n }\r\n\r\n render() {\r\n var instance = this\r\n\r\n return this.props.displayValueStoryMenu ? (\r\n \r\n \r\n \r\n {\r\n this.props.content.menuItems.map(function (childMenuitem) {\r\n return (\r\n
\r\n \r\n\r\n {instance.state.expanded ?\r\n
\r\n )\r\n })}\r\n \r\n {instance.state.expanded ?\r\n \r\n }\r\n
\r\n \r\n\r\n \r\n \r\n
:\r\n {this.props.content.collapseSideBar}
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {this.props.tabMessage}\r\n
\r\n \r\n
\r\n \r\n this.closeModal(\"terms\")}\r\n color /> \r\n this.hideModal(\"terms\")}\r\n color /> \r\n
\r\n Sorry! There was an error loading the content.
\r\n\t\t}\r\n\t\tvar publictest = (path) => {\r\n\t\t\tthis.setCurrentPath(`/${path}`)\r\n\t\t\treturnLoading...
\r\n\t\t} else {\r\n\t\t\treturn (\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t (\r\n\t\t\t\t\t\t {\r\n\t\t\t\t\t\t\t\tthis.hideMenu(this.state.menuVisible)\r\n\t\t\t\t\t\t\t\tthis.hideLanguageSelector(this.state.languageSelectorVisible)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}>\r\n\t\t\t\t\t\t\t
\t\t\t\t\t\t\r\n\t\t\t\t\t)} />\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t -1 ? YourSpendContainer : DiscoveryAndYourSpendContainer}\r\n\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\tLogout in {(Math.floor(this.state.timeoutCounter/60)).toString().padStart(2, '0')}:{(this.state.timeoutCounter - Math.floor(this.state.timeoutCounter/60) * 60).toString().padStart(2, '0')}\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t this.expiredAlertOnOk(\"expiredAlert\")}\r\n\t\t\t\t\t\t\t\tcolor />\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t this.renewSession(\"expiredAlert\")}\r\n\t\t\t\t\t\t\t\tcolor />\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t