Merge pull request #371 from openedx/kiram15/ENT-7959

Add Budget Distribution Selection in View and Edit modes
openedx · Dec 12, 2023 · f00e83f · f00e83f
2 parents 1541f15 + bd8d2d2
commit f00e83f
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 12 deletions.
diff --git a/src/Configuration/Provisioning/ProvisioningForm/PolicyForm/ProvisioningFormPolicyType.jsx b/src/Configuration/Provisioning/ProvisioningForm/PolicyForm/ProvisioningFormPolicyType.jsx
@@ -64,7 +64,14 @@ const ProvisioningFormPolicyType = ({ index }) => {
         className="mt-3.5"
       >
         <Form.Label>{POLICY_TYPE.LABEL}</Form.Label>
-        <ProvisioningFormHelpText />
+        <p className="text-gray">
+          {(submittedFormPolicyType === POLICY_TYPE.OPTIONS.ADMIN_SELECTS.VALUE)
+            && POLICY_TYPE.OPTIONS.ADMIN_SELECTS.DESCRIPTION}
+          {(submittedFormPolicyType === POLICY_TYPE.OPTIONS.LEARNER_SELECTS.VALUE)
+            && POLICY_TYPE.OPTIONS.LEARNER_SELECTS.DESCRIPTION}
+          <ProvisioningFormHelpText />
+        </p>
+        {!submittedFormPolicyType && (
         <Form.RadioSet
           name={`display-policy-type-${index}`}
           onChange={handleChange}
@@ -80,13 +87,13 @@ const ProvisioningFormPolicyType = ({ index }) => {
                 data-testid={DESCRIPTION}
                 data-description={DESCRIPTION}
                 isInvalid={isFormFieldInvalid}
-                disabled={isEditMode}
               >
                 {DESCRIPTION}
               </Form.Radio>
             ))
           }
         </Form.RadioSet>
+        )}
         {isFormFieldInvalid && (
           <Form.Control.Feedback
             type="invalid"

diff --git a/src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/PolicyContainer.jsx b/src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/PolicyContainer.jsx
@@ -4,6 +4,7 @@ import PolicyDescription from './PolicyDescription';
 import PolicyDetail from './PolicyDetail';
 import PolicyDetailHeader from './PolicyDetailHeader';
 import PolicyLimitsDetail from './PolicyLimitsDetail';
+import PolicyDistributionDetail from './PolicyDistributionDetail';
 import { selectProvisioningContext } from '../../data/utils';
 
 const PolicyContainer = () => {
@@ -14,6 +15,7 @@ const PolicyContainer = () => {
       <PolicyDetail index={index} />
       <PolicyDescription description={policy.accountDescription} />
       <AssociatedCatalogDetail index={index} />
+      <PolicyDistributionDetail policyType={policy.policyType} />
       <PolicyLimitsDetail index={index} />
     </Stack>
   ));

diff --git a/...onfiguration/Provisioning/SubsidyDetailView/PolicyDetailView/PolicyDistributionDetail.jsx b/...onfiguration/Provisioning/SubsidyDetailView/PolicyDetailView/PolicyDistributionDetail.jsx
@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import PROVISIONING_PAGE_TEXT from '../../data/constants';
+import ProvisioningFormHelpText from '../../ProvisioningForm/ProvisioningFormHelpText';
+
+const PolicyDistributionDetail = ({ policyType }) => {
+  const { FORM: { POLICY_TYPE } } = PROVISIONING_PAGE_TEXT;
+
+  return (
+    <div className="mb-1 mt-3">
+      <h3>{POLICY_TYPE.TITLE}</h3>
+      <div className="ml-3">
+        <p className="mb-1 mt-3">{POLICY_TYPE.LABEL}</p>
+        <p className="text-gray">
+          {(policyType === POLICY_TYPE.OPTIONS.ADMIN_SELECTS.VALUE)
+            && POLICY_TYPE.OPTIONS.ADMIN_SELECTS.DESCRIPTION}
+          {(policyType === POLICY_TYPE.OPTIONS.LEARNER_SELECTS.VALUE)
+            && POLICY_TYPE.OPTIONS.LEARNER_SELECTS.DESCRIPTION}
+          <ProvisioningFormHelpText />
+        </p>
+      </div>
+    </div>
+  );
+};
+
+PolicyDistributionDetail.propTypes = {
+  policyType: PropTypes.number,
+};
+
+PolicyDistributionDetail.defaultProps = {
+  policyType: null,
+};
+
+export default PolicyDistributionDetail;
diff --git a/src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/PolicyLimitsDetail.jsx b/src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/PolicyLimitsDetail.jsx
@@ -9,7 +9,7 @@ const PolicyLimitsDetail = ({ index }) => {
   const [formData] = selectProvisioningContext('formData');
 
   return (
-    <div className="mb-1 mt-3">
+    <div className="ml-4 mb-1 mt-3">
       <h3>{FORM.LEARNER_CAP.TITLE}</h3>
       <div className="ml-3">
         <p className="mb-1 mt-3">{FORM.LEARNER_CAP.SUB_TITLE}</p>
@@ -20,10 +20,12 @@ const PolicyLimitsDetail = ({ index }) => {
       {formData.policies[index].perLearnerCap ? (
         <div className="ml-3">
           <h4 className="mb-1 mt-4.5">{FORM.LEARNER_CAP_DETAIL.TITLE}</h4>
-          <h5 className="mb-1 mt-3">{FORM.LEARNER_CAP_DETAIL.OPTIONS.perLearnerSpendCap.title}</h5>
-          <p className="text-gray-500">
-            {formatCurrency(formData.policies[index].perLearnerCapAmount)}
-          </p>
+          <div className="ml-3">
+            <h5 className="mb-1 mt-3">{FORM.LEARNER_CAP_DETAIL.OPTIONS.perLearnerSpendCap.title}</h5>
+            <p className="text-gray">
+              {formatCurrency(formData.policies[index].perLearnerCapAmount)}
+            </p>
+          </div>
         </div>
       ) : null}
     </div>

diff --git a/...figuration/Provisioning/SubsidyDetailView/PolicyDetailView/tests/PolicyContainer.test.jsx b/...figuration/Provisioning/SubsidyDetailView/PolicyDetailView/tests/PolicyContainer.test.jsx
@@ -27,6 +27,7 @@ describe('PolicyContainer', () => {
     expect(screen.getByText('Budget details')).toBeInTheDocument();
     expect(screen.getByText('I love Executive Education Only')).toBeInTheDocument();
     expect(screen.getByText('Executive Education')).toBeInTheDocument();
+    expect(screen.getByText('Learner selects content or LMS')).toBeInTheDocument();
     expect(screen.getByText('Create learner spend limits?')).toBeInTheDocument();
     expect(screen.getByText('Per learner spend limit ($)')).toBeInTheDocument();
     expect(screen.getByText('$2,500')).toBeInTheDocument();

diff --git a/...Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/tests/PolicyDetail.test.jsx b/...Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/tests/PolicyDetail.test.jsx
@@ -28,7 +28,7 @@ describe('PolicyDetail', () => {
     expect(screen.getByText('Budget details')).toBeInTheDocument();
     expect(screen.getByText('Display name')).toBeInTheDocument();
     expect(screen.getByText('I love Executive Education Only')).toBeInTheDocument();
-    expect(screen.getByText('Budget starting balance ($)')).toBeInTheDocument();
+    expect(screen.getByText('Budget starting balance')).toBeInTheDocument();
     expect(screen.getByText('Not editable')).toBeTruthy();
     expect(screen.getByText('$2,500')).toBeInTheDocument();
   });

diff --git a/...n/Provisioning/SubsidyDetailView/PolicyDetailView/tests/PolicyDistributionDetail.test.jsx b/...n/Provisioning/SubsidyDetailView/PolicyDetailView/tests/PolicyDistributionDetail.test.jsx
@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import PolicyDistributionDetail from '../PolicyDistributionDetail';
+import { initialStateValue, ProvisioningContext } from '../../../../testData/Provisioning';
+
+describe('PolicyDistributionDetail', () => {
+  it('renders Learner selects option', () => {
+    const value = {
+      ...initialStateValue,
+      formData: {
+        ...initialStateValue.formData,
+        policies: [
+          {
+            policyType: 'PerLearnerSpendCreditAccessPolicy',
+          },
+        ],
+      },
+    };
+    const policyType = 'PerLearnerSpendCreditAccessPolicy';
+    render(
+      <ProvisioningContext value={value}>
+        <PolicyDistributionDetail policyType={policyType} />
+      </ProvisioningContext>,
+    );
+    expect(screen.getByText('Budget distribution mode')).toBeInTheDocument();
+    expect(screen.getByText('How is content selected?')).toBeInTheDocument();
+    expect(screen.getByText('Learner selects content or LMS')).toBeInTheDocument();
+    expect(screen.getByText('Not editable')).toBeInTheDocument();
+  });
+  it('renders Admin selects option', () => {
+    const value = {
+      ...initialStateValue,
+      formData: {
+        ...initialStateValue.formData,
+        policies: [
+          {
+            policyType: 'AssignedLearnerCreditAccessPolicy',
+          },
+        ],
+      },
+    };
+    const policyType = 'AssignedLearnerCreditAccessPolicy';
+    render(
+      <ProvisioningContext value={value}>
+        <PolicyDistributionDetail policyType={policyType} />
+      </ProvisioningContext>,
+    );
+    expect(screen.getByText('Admin selects content')).toBeInTheDocument();
+    expect(screen.getByText('Not editable')).toBeInTheDocument();
+  });
+});
diff --git a/src/Configuration/Provisioning/SubsidyDetailView/tests/SubsidyDetailView.test.jsx b/src/Configuration/Provisioning/SubsidyDetailView/tests/SubsidyDetailView.test.jsx
@@ -137,7 +137,7 @@ describe('SubsidyDetailView', () => {
     expect(screen.getByText('Budget details')).toBeInTheDocument();
     expect(screen.getByText('Open Courses')).toBeInTheDocument();
     expect(screen.getByText('Display name')).toBeInTheDocument();
-    expect(screen.getByText('Budget starting balance ($)')).toBeInTheDocument();
+    expect(screen.getByText('Budget starting balance')).toBeInTheDocument();
     expect(screen.getByText('$5,000')).toBeInTheDocument();
     expect(screen.getByText('Catalog')).toBeInTheDocument();
     expect(screen.getByText('Limits')).toBeInTheDocument();

diff --git a/src/Configuration/Provisioning/data/constants.js b/src/Configuration/Provisioning/data/constants.js
@@ -104,9 +104,9 @@ const PROVISIONING_PAGE_TEXT = {
       OPTIONS: {
         displayName: 'Display name',
         totalAccountValue: {
-          title: 'Budget starting balance ($)',
-          subtitle: 'The contracted USD value available through the budget.',
-          dynamicSubtitle: (budgetType) => `The contracted USD value available through the budget redeemable for ${budgetType} enrollment.`,
+          title: 'Budget starting balance',
+          subtitle: 'The total contracted USD value available through the budget.',
+          dynamicSubtitle: (budgetType) => `The total contracted USD value available through the budget redeemable for ${budgetType} enrollment.`,
         },
       },
       ERROR: {

diff --git a/src/Configuration/testData/constants.js b/src/Configuration/testData/constants.js
@@ -206,6 +206,7 @@ export const sampleSinglePolicyPredefinedCatalogQueryFormData = {
       accountValue: '250000',
       perLearnerCap: true,
       perLearnerCapAmount: '2000',
+      policyType: 'PerLearnerSpendCreditAccessPolicy',
     },
   ],
   enterpriseUUID: uuidv4(),