squash me

src/Configuration/Provisioning/ProvisioningForm/CustomCatalog/ProvisioningFormCustomCatalogDropdown.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Form, Button } from '@edx/paragon';
 import { v4 as uuidv4 } from 'uuid';
 import PROVISIONING_PAGE_TEXT from '../../data/constants';
@@ -40,7 +40,6 @@ const ProvisioningFormCustomCatalogDropdown = () => {
 
   const handleClick = (e) => {
     // TODO: In the future the index will have to be brought in for custom catalogs.
-    const index = 0;
     const currentTarget = e.currentTarget;
     setPredefinedQueryType(undefined, index);
     setCatalogUuid(currentTarget.getAttribute('data-cataloguuid'), index);

src/Configuration/Provisioning/ProvisioningForm/CustomCatalog/ProvisioningFormDefineCustomCatalogHeader.jsx

@@ -28,7 +28,7 @@ const ProvisioningFormDefineCustomCatalogHeader = ({ index }) => {
         </Hyperlink>
       </ActionRow>
       {
-        // Only render the warning header if we plan to display a catalog selector drop-down. 
+        // Only render the warning header if we plan to display a catalog selector drop-down.
         !formData.policies[index].customCatalog && (
           <Stack direction="horizontal">
             <Icon src={Warning} className="align-self-start" />

src/Configuration/Provisioning/ProvisioningForm/PolicyForm/ProvisioningFormCatalog.jsx

@@ -6,7 +6,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { useContextSelector } from 'use-context-selector';
 import PROVISIONING_PAGE_TEXT from '../../data/constants';
 import useProvisioningContext from '../../data/hooks';
-import { generateBudgetDisplayName, getCamelCasedConfigAttribute, indexOnlyPropType } from '../../data/utils';
+import { generateBudgetDisplayName, indexOnlyPropType } from '../../data/utils';
 import { ProvisioningContext } from '../../ProvisioningContext';
 
 // TODO: Replace URL for hyperlink to somewhere to display catalog content information
@@ -27,7 +27,6 @@ const ProvisioningFormCatalog = ({ index }) => {
     hasEdits,
   } = contextData;
   const isFormFieldInvalid = policies[index]?.predefinedQueryType === false;
-  const camelCasedQueries = getCamelCasedConfigAttribute('PREDEFINED_CATALOG_QUERIES');
 
   let submittedFormAssociatedCatalog;
   if (isEditMode && !multipleFunds) {
@@ -39,7 +38,6 @@ const ProvisioningFormCatalog = ({ index }) => {
   }
 
   const [value, setValue] = useState(submittedFormAssociatedCatalog || null);
-  const customCatalogSelected = value === CATALOG.OPTIONS.custom;
   if (multipleFunds === undefined) {
     return null;
   }

src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormSubmissionButton.jsx

@@ -171,9 +171,9 @@ const ProvisioningFormSubmissionButton = () => {
       const { customAttributes } = error;
       if (customAttributes) {
         logError(
-          'Alert Error: ' +
-          `${API_ERROR_MESSAGES.ENTERPRISE_CUSTOMER_CATALOG_CREATION[customAttributes.httpErrorStatus]} ` +
-          `${error}`
+          'Alert Error: '
+          + `${API_ERROR_MESSAGES.ENTERPRISE_CUSTOMER_CATALOG_CREATION[customAttributes.httpErrorStatus]} `
+          + `${error}`,
         );
         redirectOnError(
           customAttributes.httpErrorStatus,
@@ -264,7 +264,7 @@ const ProvisioningFormSubmissionButton = () => {
     complete: BUTTON.success,
     error: BUTTON.error,
   };
-  console.log(formData);  // TEST
+  console.log(formData); // TEST
   return (
     <ActionRow className="justify-content-start mt-5">
       <StatefulButton

src/Configuration/Provisioning/ProvisioningForm/tests/ProvisioningFormSubmissionButton.test.jsx

@@ -12,9 +12,9 @@ import {
   sampleSinglePolicyPredefinedCatalogQueryFormData,
 } from '../../../testData/constants';
 import {
-  //createCatalogs,
+  // createCatalogs,
   createPolicy,
-  createSubsidy
+  createSubsidy,
 } from '../../data/utils';
 
 const { CONFIGURATION: { SUB_DIRECTORY: { PROVISIONING } } } = ROUTES;
@@ -26,7 +26,7 @@ jest.mock('../../data/utils', () => {
   const originalModule = jest.requireActual('../../data/utils');
   return {
     ...originalModule,
-    //createCatalogs: jest.fn(),
+    // createCatalogs: jest.fn(),
     createPolicy: jest.fn(),
     createSubsidy: jest.fn(),
     determineInvalidFields: jest.fn().mockReturnValue([
@@ -94,7 +94,7 @@ describe('ProvisioningFormSubmissionButton', () => {
   });
   for (let i = 0; i < sampleDataSet.length; i++) {
     it(`calls handleSubmit complete state when clicked with ${Object.keys(sampleDataSet[i])} data`, async () => {
-      //createCatalogs.mockResolvedValue({ uuid: 'test-uuid' });
+      // createCatalogs.mockResolvedValue({ uuid: 'test-uuid' });
       createSubsidy.mockResolvedValue({ uuid: 'test-uuid' });
       createPolicy.mockResolvedValue({ uuid: 'test-uuid' });
       const value = {
@@ -114,7 +114,7 @@ describe('ProvisioningFormSubmissionButton', () => {
     error.customAttributes = {
       httpErrorStatus: 500,
     };
-    //createCatalogs.mockRejectedValue(error);
+    // createCatalogs.mockRejectedValue(error);
     const value = {
       ...initialStateValue,
       formData: sampleDataSet[0][Object.keys(sampleDataSet[0])],
@@ -131,7 +131,7 @@ describe('ProvisioningFormSubmissionButton', () => {
     error.customAttributes = {
       httpErrorStatus: 500,
     };
-    //createCatalogs.mockResolvedValue({ uuid: 'test-catalog-uuid' });
+    // createCatalogs.mockResolvedValue({ uuid: 'test-catalog-uuid' });
     createSubsidy.mockRejectedValue(error);
     const value = {
       ...initialStateValue,
@@ -149,7 +149,7 @@ describe('ProvisioningFormSubmissionButton', () => {
     error.customAttributes = {
       httpErrorStatus: 500,
     };
-    //createCatalogs.mockResolvedValue({ uuid: 'test-catalog-uuid' });
+    // createCatalogs.mockResolvedValue({ uuid: 'test-catalog-uuid' });
     createSubsidy.mockResolvedValue({ uuid: 'test-subsidy-uuid' });
     createPolicy.mockRejectedValue(error);
 

src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/AssociatedCatalogDetail.jsx

@@ -1,47 +1,29 @@
-import PropTypes from 'prop-types';
 import CustomCatalogDetail from './CustomCatalogDetail';
 import PROVISIONING_PAGE_TEXT from '../../data/constants';
+import { indexOnlyPropType, selectProvisioningContext } from '../../data/utils';
 
-const { FORM: { CATALOG } } = PROVISIONING_PAGE_TEXT;
+const { FORM } = PROVISIONING_PAGE_TEXT;
 
-// finds the catalog in associatedCatalog string,
-// e.g. "9c1fd12b-2365-4100-8e3e-01d2ff1414e0 - Executive Education budget"
-// returns "Executive Education"
-function getCatalogType(associatedCatalog) {
-  let catalogType = null;
-  if (associatedCatalog) {
-    if (associatedCatalog.includes(CATALOG.OPTIONS.openCourses)) {
-      catalogType = CATALOG.OPTIONS.openCourses;
-    } else if (associatedCatalog.includes(CATALOG.OPTIONS.executiveEducation)) {
-      catalogType = CATALOG.OPTIONS.executiveEducation;
-    } else if (associatedCatalog.includes(CATALOG.OPTIONS.everything)) {
-      catalogType = CATALOG.OPTIONS.everything;
-    } else {
-      catalogType = CATALOG.OPTIONS.custom;
-    }
-  }
-  return catalogType;
-}
-
-const AssociatedCatalogDetail = ({ associatedCatalog }) => {
-  const catalogType = getCatalogType(associatedCatalog);
+const AssociatedCatalogDetail = ({ index }) => {
+  const [formData] = selectProvisioningContext('formData');
 
   return (
     <div className="mb-1 mt-3">
-      <h3>{CATALOG.TITLE}</h3>
+      <h3>{FORM.CATALOG.TITLE}</h3>
       <div className="mb-1 ml-3 mt-3">
-        <h4>{CATALOG.SUB_TITLE}</h4>
+        <h4>{FORM.CATALOG.SUB_TITLE}</h4>
         <p className="small">
-          {catalogType}
+          {FORM.CATALOG.OPTIONS[formData.policies[index].predefinedQueryType]}
         </p>
-        {(catalogType === CATALOG.OPTIONS.custom) && <CustomCatalogDetail catalogTitle={associatedCatalog} />}
+        {
+          (formData.policies[index].predefinedQueryType === FORM.CATALOG.OPTIONS.custom)
+             && <CustomCatalogDetail catalogTitle={formData.policies[index].catalogTitle} />
+        }
       </div>
     </div>
   );
 };
 
-AssociatedCatalogDetail.propTypes = {
-  associatedCatalog: PropTypes.string.isRequired,
-};
+AssociatedCatalogDetail.propTypes = indexOnlyPropType;
 
 export default AssociatedCatalogDetail;

src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/CustomCatalogDetail.jsx

@@ -60,9 +60,9 @@ const CustomCatalogDetail = ({ catalogTitle }) => {
   return (
     !isLoading ? (
       <div className="mb-1 mt-4.5">
-        <h4>{CUSTOM_CATALOG.HEADER.DEFINE.TITLE}</h4>
+        <h4>{CUSTOM_CATALOG.DETAIL_HEADER.TITLE}</h4>
         <div className="mb-1 ml-3 mt-3">
-          <h5>{CUSTOM_CATALOG.OPTIONS.enterpriseCatalogQuery.title}</h5>
+          <h5>{CUSTOM_CATALOG.OPTIONS.enterpriseCatalog.title}</h5>
           <p className="small">
             {catalogTitle}
           </p>

src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/PolicyContainer.jsx

@@ -4,35 +4,19 @@ import PolicyDescription from './PolicyDescription';
 import PolicyDetail from './PolicyDetail';
 import PolicyDetailHeader from './PolicyDetailHeader';
 import PolicyLimitsDetail from './PolicyLimitsDetail';
+import { selectProvisioningContext } from '../../data/utils';
 
-function getBudgetDisplayName(subsidyTitle, catalogTitle) {
-  let budgetDisplayName;
-  if (subsidyTitle && catalogTitle) {
-    const associatedCatalog = catalogTitle.split(' - ')[1];
-    budgetDisplayName = `${subsidyTitle} - ${associatedCatalog}`;
-  }
-  return budgetDisplayName;
-}
-
-const PolicyContainer = ({ data }) => {
-  const { subsidy, policies, catalogs } = data;
-  const renderPolicy = policies.map((policy) => catalogs.map(catalog => {
-    if (catalog.uuid === policy.catalog_uuid) {
-      return (
-        <Stack key={policy.catalog_uuid} gap={48}>
-          <PolicyDetailHeader policiesLength={policies.length} accountType={catalog.title} />
-          <PolicyDetail
-            displayName={getBudgetDisplayName(subsidy.title, catalog.title)}
-            spendLimit={policy.spend_limit}
-          />
-          <PolicyDescription description={policy.description} />
-          <AssociatedCatalogDetail associatedCatalog={catalog.title} />
-          <PolicyLimitsDetail perLearnerLimit={policy.per_learner_spend_limit} />
-        </Stack>
-      );
-    }
-    return null;
-  }));
+const PolicyContainer = () => {
+  const [formData] = selectProvisioningContext('formData');
+  const renderPolicy = formData.policies.map((policy, index) => (
+    <Stack key={policy.catalogUuid} gap={48}>
+      <PolicyDetailHeader index={index} />
+      <PolicyDetail index={index} />
+      <PolicyDescription description={policy.accountDescription} />
+      <AssociatedCatalogDetail index={index} />
+      <PolicyLimitsDetail index={index} />
+    </Stack>
+  ));
   return renderPolicy;
 };
 

src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/PolicyDescription.jsx

@@ -1,18 +1,16 @@
 import PropTypes from 'prop-types';
 import PROVISIONING_PAGE_TEXT from '../../data/constants';
 
-const PolicyDescription = ({ description }) => {
-  const { FORM: { ACCOUNT_DESCRIPTION } } = PROVISIONING_PAGE_TEXT;
+const { FORM } = PROVISIONING_PAGE_TEXT;
 
-  return (
-    <div className="mb-1 mt-3">
-      <h3>{ACCOUNT_DESCRIPTION.TITLE}</h3>
-      <p className="small">
-        {description}
-      </p>
-    </div>
-  );
-};
+const PolicyDescription = ({ description }) => (
+  <div className="mb-1 mt-3">
+    <h3>{FORM.ACCOUNT_DESCRIPTION.TITLE}</h3>
+    <p className="small">
+      {description}
+    </p>
+  </div>
+);
 
 PolicyDescription.propTypes = {
   description: PropTypes.string.isRequired,

src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/PolicyDetail.jsx

@@ -1,31 +1,34 @@
-import PropTypes from 'prop-types';
 import PROVISIONING_PAGE_TEXT from '../../data/constants';
-import { formatCurrency } from '../../data/utils';
+import {
+  formatCurrency,
+  generatePolicyName,
+  indexOnlyPropType,
+  selectProvisioningContext,
+} from '../../data/utils';
 
-const PolicyDetail = ({ displayName, spendLimit }) => {
-  const { FORM: { ACCOUNT_TYPE, ACCOUNT_DETAIL } } = PROVISIONING_PAGE_TEXT;
+const { FORM } = PROVISIONING_PAGE_TEXT;
+
+const PolicyDetail = ({ index }) => {
+  const [formData] = selectProvisioningContext('formData');
 
   return (
     <div className="mb-1 mt-3">
       <h3>Default</h3>
-      <h3>{ACCOUNT_DETAIL.TITLE}</h3>
+      <h3>{FORM.ACCOUNT_DETAIL.TITLE}</h3>
       <div className="mb-1 ml-3 mt-3">
-        <h4>{ACCOUNT_DETAIL.OPTIONS.displayName}</h4>
+        <h4>{FORM.ACCOUNT_DETAIL.OPTIONS.displayName}</h4>
         <p className="small">
-          {displayName}
+          {generatePolicyName(formData, index)}
         </p>
-        <h4>{ACCOUNT_DETAIL.OPTIONS.totalAccountValue.title}</h4>
+        <h4>{FORM.ACCOUNT_DETAIL.OPTIONS.totalAccountValue.title}</h4>
         <p className="small">
-          {formatCurrency(spendLimit)}
+          {formatCurrency(formData.policies[index].accountValue)}
         </p>
       </div>
     </div>
   );
 };
 
-PolicyDetail.propTypes = {
-  displayName: PropTypes.string.isRequired,
-  spendLimit: PropTypes.number.isRequired,
-};
+PolicyDetail.propTypes = indexOnlyPropType;
 
 export default PolicyDetail;

src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/PolicyDetailHeader.jsx

@@ -1,33 +1,22 @@
-import PropTypes from 'prop-types';
-import PROVISIONING_PAGE_TEXT, { PREDEFINED_QUERY_DISPLAY_NAMES } from '../../data/constants';
+import {
+  indexOnlyPropType,
+  selectProvisioningContext,
+  generateBudgetDisplayName,
+} from '../../data/utils';
 
-const PolicyDetailHeader = ({ accountType, policiesLength }) => {
-  const { FORM: { CATALOG } } = PROVISIONING_PAGE_TEXT;
-  const renderAccountType = () => {
-    let account;
-    if (policiesLength > 1 && accountType.includes(CATALOG.OPTIONS.executiveEducation)) {
-      account = `${PREDEFINED_QUERY_DISPLAY_NAMES.executiveEducation} budget`;
-    } else if (policiesLength > 1 && accountType.includes(CATALOG.OPTIONS.openCourses)) {
-      account = `${PREDEFINED_QUERY_DISPLAY_NAMES.openCourses} budget`;
-    } else {
-      account = 'Budget';
-    }
-    return account;
-  };
+const PolicyDetailHeader = ({ index }) => {
+  const [formData] = selectProvisioningContext('formData');
 
   return (
     <article className="mt-4.5">
       <div className="mb-1">
-        <h2>{renderAccountType()}</h2>
+        <h2>{generateBudgetDisplayName(formData.policies[index])}</h2>
         <hr />
       </div>
     </article>
   );
 };
 
-PolicyDetailHeader.propTypes = {
-  accountType: PropTypes.string.isRequired,
-  policiesLength: PropTypes.number.isRequired,
-};
+PolicyDetailHeader.propTypes = indexOnlyPropType;
 
 export default PolicyDetailHeader;