feat: UI updates around api changes

src/containers/SelectSessionModal/constants.js

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export const LEAVE_OPTION = 'leave';

src/containers/SelectSessionModal/hooks.js

@@ -7,6 +7,7 @@ import { StrictDict } from 'utils';
 
 import { hooks as appHooks, thunkActions } from 'data/redux';
 import * as module from './hooks';
+import { LEAVE_OPTION } from './constants';
 import messages from './messages';
 
 export const state = StrictDict({
@@ -19,6 +20,7 @@ export const useSelectSessionModalData = () => {
   const {
     entitlementessions,
     isFulfilled,
+    uuid,
   } = appHooks.useCardEntitlementData(selectedCardId);
   const { title: courseTitle } = appHooks.useCardCourseData(selectedCardId);
   const { formatMessage } = useIntl();
@@ -38,9 +40,12 @@ export const useSelectSessionModalData = () => {
   const updateCallback = appHooks.useUpdateSelectSessionModalCallback;
 
   const handleSelection = ({ target: { value } }) => setSelectedSession(value);
-  const handleSubmit = () => dispatch(
-    thunkActions.app.updateEntitlementSession(selectedCardId, selectedSession),
-  );
+  const handleSubmit = () => {
+    if (selectedSession === LEAVE_OPTION) {
+      return dispatch(thunkActions.requests.leaveEntitlementSession({ uuid }));
+    }
+    return dispatch(thunkActions.requests.updateEntitlementEnrollment({ uuid, courseId: selectedSession }));
+  };
 
   return {
     showModal: selectedCardId != null,

src/containers/SelectSessionModal/hooks.test.js

@@ -5,6 +5,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { MockUseState } from 'testUtils';
 import { hooks as appHooks, thunkActions } from 'data/redux';
 
+import { LEAVE_OPTION } from './constants';
 import messages from './messages';
 import * as hooks from './hooks';
 
@@ -23,14 +24,16 @@ jest.mock('data/redux', () => ({
     },
   },
   thunkActions: {
-    app: {
-      updateEntitlementSession: jest.fn((...args) => ({ updateEntitlementSession: args })),
+    requests: {
+      updateEntitlementEnrollment: jest.fn((...args) => ({ updateEntitlementSession: args })),
+      leaveEntitlementSession: jest.fn((...args) => ({ leaveEntitlementSession: args })),
     },
   },
 }));
 
 const state = new MockUseState(hooks);
 const selectedCardId = 'test-selected-card-id';
+const uuid = 'test-uuid';
 
 const selectSessionData = {
   cardId: selectedCardId,
@@ -43,6 +46,7 @@ const entitlementData = {
     { startDate: '3/4/2000', endDate: '3/4/2020', cardId: 'session-id-3' },
   ],
   isFullfilled: false,
+  uuid,
 };
 
 const cardCourseData = {
@@ -107,10 +111,14 @@ describe('SelectSessionModal hooks', () => {
           state.mockVal(state.keys.selectedSession, testValue);
           runHook({});
           expect(out.handleSubmit()).toEqual(dispatch(
-            thunkActions.app.updateEntitlementSession(
-              selectedCardId,
-              testValue,
-            ),
+            thunkActions.requests.updateEntitlementEnrollment({ courseId: testValue, uuid }),
+          ));
+        });
+        it('dispatches leaveEntitlementSession if LEAVE_OPTION is selected', () => {
+          state.mockVal(state.keys.selectedSession, LEAVE_OPTION);
+          runHook({});
+          expect(out.handleSubmit()).toEqual(dispatch(
+            thunkActions.requests.leaveEntitlementSession({ uuid }),
           ));
         });
       });

src/containers/SelectSessionModal/index.jsx

@@ -12,6 +12,7 @@ import { nullMethod } from 'hooks';
 import { dateFormatter } from 'utils';
 
 import useSelectSessionModalData from './hooks';
+import { LEAVE_OPTION } from './constants';
 import messages from './messages';
 
 export const SelectSessionModal = () => {
@@ -53,7 +54,7 @@ export const SelectSessionModal = () => {
             </Form.Radio>
           ))}
           {showLeaveOption && (
-            <Form.Radio value="leave">
+            <Form.Radio value={LEAVE_OPTION}>
               {formatMessage(messages.leaveSessionOption)}
             </Form.Radio>
           )}