feat: adding accesslock plugin to MFE

src/courseware/course/sequence/AccessLock/AccessLock.jsx

@@ -0,0 +1,59 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useNavigate } from 'react-router-dom';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faLock } from '@fortawesome/free-solid-svg-icons';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import CompleteIcon from '../sequence-navigation/CompleteIcon';
+import { Button } from '@openedx/paragon';
+import messages from './messages';
+
+const AccessLock = ({
+  courseId
+}) => {
+  const intl = useIntl();
+  const handleClick = () => {};
+
+  const Check = <CompleteIcon size="md" className="mr-2" />;
+  const DisplayPrice = () => {
+    return (<>
+    <span>{intl.formatMessage(messages['learn.accessLock.upgrade.buttonText'])}</span>
+    <span className='large-weight'>$118.15 </span>
+    <span style= {{ textDecoration: 'line-through' }}>($139)</span>
+    </>)
+  };
+  return (
+    <>
+          <h3>
+            <FontAwesomeIcon icon={faLock} />
+            {intl.formatMessage(messages['learn.accessLock.content.locked'])}
+          </h3>
+          <p>
+            {intl.formatMessage(messages['learn.accessLock.upgrade'])}
+          </p>
+      <div className="d-flex flex-grow-1 justify-between items-start">
+        <div>
+          <p>
+            {intl.formatMessage(messages['learn.accessLock.upgrade.header'])}
+          </p>
+          <ul className="list-unstyled mr-4">
+            <li>{Check}{intl.formatMessage(messages['learn.accessLock.upgrade.benefitOne'])}</li>
+            <li>{Check}{intl.formatMessage(messages['learn.accessLock.upgrade.benefitTwo'])}</li>
+            <li>{Check}{intl.formatMessage(messages['learn.accessLock.upgrade.benefitThree'])}</li>
+            <li>{Check}{intl.formatMessage(messages['learn.accessLock.upgrade.benefitFour'])}</li>
+          </ul>
+        </div>
+        <div className='d-flex items-right pl-6'>
+          <p>
+            <Button variant="primary" onClick={handleClick}> <DisplayPrice /></Button>
+          </p>
+      </div>
+      </div>
+    </>
+  );
+};
+AccessLock.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+export default AccessLock;

src/courseware/course/sequence/AccessLock/AccessLock.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+  render, screen, fireEvent, initializeMockApp,
+} from '../../../../setupTest';
+import AssignmentLock from './AccessLock';
+
+const mockNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
+describe('Assignment Lock', () => {
+  const mockData = {
+    courseId: 'test-course-id',
+    prereqSectionName: 'test-prerequisite-section-name',
+    prereqId: 'test-prerequisite-id',
+    sequenceTitle: 'test-sequence-title',
+  };
+
+  beforeAll(async () => {
+    await initializeMockApp();
+  });
+
+  it('displays sequence title along with lock icon', () => {
+    const { container } = render(<AssignmentLock {...mockData} />, { wrapWithRouter: true });
+
+    const lockIcon = container.querySelector('svg');
+    expect(lockIcon).toHaveClass('fa-lock');
+    expect(lockIcon.parentElement).toHaveTextContent(mockData.sequenceTitle);
+  });
+
+});

src/courseware/course/sequence/AccessLock/index.js

@@ -0,0 +1 @@
+export { default } from './AccessLock';

src/courseware/course/sequence/AccessLock/messages.ts

@@ -0,0 +1,46 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'learn.accessLock.content.locked': {
+    id: 'learn.accessLock.content.locked',
+    defaultMessage: 'The content you are trying to access is locked',
+    description: 'Message shown to indicate that a piece of content is unavailable and has a prerequisite.',
+  },
+  'learn.accessLock.upgrade': {
+    id: 'learn.accessLock.upgrade',
+    defaultMessage: "Upgrade to gain access to locked features like this one and get the most out of your course.",
+    description: '',
+  },
+  'learn.accessLock.upgrade.header': {
+    id: 'learn.accessLock.upgrade.header',
+    defaultMessage: 'When you upgrade, you get:',
+    description: '',
+  },
+  'learn.accessLock.upgrade.benefitOne': {
+    id: 'learn.accessLock.upgrade.benefitOne',
+    defaultMessage: 'Feedback and graded assignments',
+    description: '',
+  },
+  'learn.accessLock.upgrade.benefitTwo': {
+    id: 'learn.accessLock.upgrade.benefitTwo',
+    defaultMessage: 'Shareable certificate upon completion',
+    description: '',
+  },
+  'learn.accessLock.upgrade.benefitThree': {
+    id: 'learn.accessLock.upgrade.benefitThree',
+    defaultMessage: 'Lifetime access to course materials',
+    description: '',
+  },
+  'learn.accessLock.upgrade.benefitFour': {
+    id: 'learn.accessLock.upgrade.benefitFour',
+    defaultMessage: 'Instructor support',
+    description: '',
+  },
+  'learn.accessLock.upgrade.buttonText': {
+    id: 'learn.accessLock.upgrade.buttonText',
+    defaultMessage: 'Upgrade for ',
+    description: '',
+  },
+});
+
+export default messages;

src/courseware/course/sequence/Unit/UnitSuspense.jsx

@@ -6,6 +6,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { useModel } from '@src/generic/model-store';
 import PageLoading from '@src/generic/PageLoading';
 import { GatedUnitContentMessageSlot } from '../../../../plugin-slots/GatedUnitContentMessageSlot';
+import { AccessLockContentMessageSlot } from '../../../../plugin-slots/AccessLockContentMessageSlot';
 
 import messages from '../messages';
 import HonorCode from '../honor-code';
@@ -26,9 +27,9 @@ const UnitSuspense = ({
 
   return (
     <>
-      {shouldDisplayContentGating && (
+      {(shouldDisplayContentGating || unit.accessRestricted) && (
         <Suspense fallback={<PageLoading srMessage={formatMessage(messages.loadingLockedContent)} />}>
-          <GatedUnitContentMessageSlot courseId={courseId} />
+          {unit.accessRestricted ?  <AccessLockContentMessageSlot courseId={courseId} /> : <GatedUnitContentMessageSlot courseId={courseId} />}
         </Suspense>
       )}
       {shouldDisplayHonorCode && (

src/courseware/data/utils.js

@@ -144,6 +144,7 @@ export function normalizeSequenceMetadata(sequence) {
       contentType: unit.type,
       graded: unit.graded,
       containsContentTypeGatedContent: unit.contains_content_type_gated_content,
+      accessRestricted: unit?.access_restricted || false
     })),
   };
 }

src/plugin-slots/AccessLockContentMessageSlot/README.md

@@ -0,0 +1,70 @@
+# Gated Unit Content Message Slot
+
+### Slot ID: `org.openedx.frontend.learning.access_lock_content_message.v1`
+
+### Slot ID Aliases
+* `access_lock_content_message_slot`
+
+### Props:
+* `courseId` - String identifier for the current course
+
+## Description
+
+This slot is used to customize the message displayed when course content is gated or locked for learners who haven't upgraded to a verified track. It appears when a unit contains content that requires a paid enrollment (such as graded assignments) and the learner is on the audit track.
+
+The default implementation shows a `LockPaywall` component that displays an upgrade message with benefits of upgrading, including access to graded assignments, certificates, and full course features.
+
+This slot is conditionally rendered only when `contentTypeGatingEnabled` is true and the unit `containsContentTypeGatedContent`.
+
+## Example
+
+The following `env.config.jsx` will replace the default paywall message with a custom gated content component.
+
+![Gated unit message example](./images/gated-unit-message-example.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learning.access_lock_content_message.v1': {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widgetId: 'default_contents',
+          widget: {
+            id: 'custom_gated_message',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ({ courseId }) => (
+              <div className="alert alert-warning" role="alert">
+                <div className="d-flex align-items-center mb-3">
+                  <i className="fa fa-lock fa-2x me-3" aria-hidden="true"></i>
+                  <div>
+                    <h4 className="alert-heading mb-1">Premium Content</h4>
+                    <p className="mb-0">This content is available to verified learners only.</p>
+                  </div>
+                </div>
+                <hr />
+                <p className="mb-3">
+                  Upgrade your enrollment for course {courseId} to access:
+                </p>
+                <ul className="mb-3">
+                  <li>✅ Graded assignments and quizzes</li>
+                  <li>🏆 Verified certificate upon completion</li>
+                  <li>💬 Full discussion forum access</li>
+                  <li>📱 Mobile app offline access</li>
+                </ul>
+                <button className="btn btn-success">
+                  Upgrade Now
+                </button>
+              </div>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/AccessLockContentMessageSlot/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import AccessLock from '../../courseware/course/sequence/AccessLock';
+
+
+export const AccessLockContentMessageSlot = ({
+  courseId,
+} : AccessLockContentMessageSlotProps) => (
+  <PluginSlot
+    id="org.openedx.frontend.learning.access_lock_content_message.v1"
+    idAliases={['access_lock_content_message_slot']}
+    pluginProps={{
+      courseId,
+    }}
+  >
+    <AccessLock courseId={courseId} />
+  </PluginSlot>
+);
+
+interface AccessLockContentMessageSlotProps {
+  courseId: string;
+}

src/plugin-slots/README.md

@@ -11,6 +11,7 @@
 * [`org.openedx.frontend.learning.course_outline_tab_notifications.v1`](./CourseOutlineTabNotificationsSlot/)
 * [`org.openedx.frontend.learning.course_recommendations.v1`](./CourseRecommendationsSlot/)
 * [`org.openedx.frontend.learning.gated_unit_content_message.v1`](./GatedUnitContentMessageSlot/)
+* [`org.openedx.frontend.learning.access_lock_content_message.v1`](./AccessLockContentMessageSlot/)
 * [`org.openedx.frontend.learning.next_unit_top_nav_trigger.v1`](./NextUnitTopNavTriggerSlot/)
 * [`org.openedx.frontend.learning.notification_tray.v1`](./NotificationTraySlot/)
 * [`org.openedx.frontend.learning.notification_widget.v1`](./NotificationWidgetSlot/)