Merge pull request #20848 from edx/LEARNER-7155/update-entitlement-support-view

Update enrollment support view

lms/djangoapps/support/static/support/jsx/entitlements/components/Main/Main.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 
 import { Button, StatusAlert } from '@edx/paragon';
-import SearchContainer from '../Search/SearchContainer.jsx';
-import EntitlementSupportTableContainer from '../Table/EntitlementSupportTableContainer.jsx';
-import EntitlementFormContainer from '../EntitlementForm/container.jsx';
+import SearchContainer from '../Search/SearchContainer';
+import EntitlementSupportTableContainer from '../Table/EntitlementSupportTableContainer';
+import EntitlementFormContainer from '../EntitlementForm/container';
 
 const Main = props => (
   <div className="entitlement-support-wrapper">
@@ -21,6 +22,7 @@ const Main = props => (
       isFormOpen={props.isFormOpen}
       ecommerceUrl={props.ecommerceUrl}
       openCreationForm={props.openCreationForm}
+      entitlements={props.entitlements}
     />
   </div>
 );
@@ -29,6 +31,7 @@ const MainContent = (props) => {
   if (props.isFormOpen) {
     return <EntitlementFormContainer />;
   }
+
   return (
     <div>
       <div className="actions">
@@ -39,23 +42,32 @@ const MainContent = (props) => {
           onClick={props.openCreationForm}
         />
       </div>
-      <EntitlementSupportTableContainer ecommerceUrl={props.ecommerceUrl} />
+      {
+          props.entitlements.length > 0 ?
+            <EntitlementSupportTableContainer ecommerceUrl={props.ecommerceUrl} /> : null
+      }
     </div>
   );
 };
 
+const mapStateToProps = state => ({
+  entitlements: state.entitlements,
+});
+
 Main.propTypes = {
   errorMessage: PropTypes.string.isRequired,
   dismissErrorMessage: PropTypes.func.isRequired,
   openCreationForm: PropTypes.func.isRequired,
   ecommerceUrl: PropTypes.string.isRequired,
   isFormOpen: PropTypes.bool.isRequired,
+  entitlements: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
 MainContent.propTypes = {
   openCreationForm: PropTypes.func.isRequired,
   ecommerceUrl: PropTypes.string.isRequired,
   isFormOpen: PropTypes.bool.isRequired,
+  entitlements: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
-export default Main;
+export default connect(mapStateToProps, null)(Main);

lms/djangoapps/support/static/support/jsx/entitlements/components/Search/Search.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InputText } from '@edx/paragon';
+import { Button, InputText } from '@edx/paragon';
 import PropTypes from 'prop-types';
 
 
@@ -28,12 +28,12 @@ class Search extends React.Component {
         <InputText
           name="username"
           label="Search by Username"
+          className="search-field"
           value={this.state.username}
           onChange={this.handleUsernameChange}
-        />
-        <input
-          type="submit"
-          hidden
+          inputGroupAppend={
+            <Button className={['btn', 'btn-primary', 'ml-2', 'search-button']} label="Search" type="submit" />
+          }
         />
       </form>
     );

lms/djangoapps/support/static/support/jsx/entitlements/data/actions/entitlement.js

@@ -13,6 +13,10 @@ const fetchEntitlementsFailure = error =>
   dispatch =>
     dispatch(displayError('Error Getting Entitlements', error));
 
+const emptyEntitlementsFailure = error =>
+  dispatch =>
+    dispatch(displayError('No Entitlements Found', error));
+
 const fetchEntitlements = username =>
   (dispatch) => {
     getEntitlements(username)
@@ -23,7 +27,13 @@ const fetchEntitlements = username =>
       throw new Error(response);
     })
     .then(
-      json => dispatch(fetchEntitlementsSuccess(camelize(json.results))),
+      (json) => {
+        if (json.count === 0) {
+          dispatch(emptyEntitlementsFailure(''));
+        } else {
+          dispatch(fetchEntitlementsSuccess(camelize(json.results)));
+        }
+      },
       error => dispatch(fetchEntitlementsFailure(error)),
     );
   };

openedx/features/course_experience/static/course_experience/js/currency.js

@@ -1,4 +1,3 @@
-import whichCountry from 'which-country';
 import 'jquery.cookie';
 import $ from 'jquery'; // eslint-disable-line import/extensions