env.config.jsx for PSU

env.config.jsx

import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
import { Button, Col, Container, Row } from '@openedx/paragon';
import DetailedGrades from '@src/course-home/progress-tab/grades/detailed-grades/DetailedGrades';
import GradeSummary from '@src/course-home/progress-tab/grades/grade-summary/GradeSummary';
import React from 'react';

const progressWrapper = {
  op: PLUGIN_OPERATIONS.Wrap,
  widgetId: 'default_contents',
  wrapper: ({ component }) => (
    <div className="progress-tab-component">
      {component}
    </div>
  ),
};

const slotConfig = {
  'org.openedx.frontend.layout.header_logo.v1': {
    plugins: [
      {
        op: PLUGIN_OPERATIONS.Hide,
      },
    ],
  },
  'org.openedx.frontend.layout.header_desktop_secondary_menu.v2': {
    plugins: [
      {
        op: PLUGIN_OPERATIONS.Hide,
      },
    ],
  },
  'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {
    plugins: [
      {
        op: PLUGIN_OPERATIONS.Hide,
      },
    ],
  },
  'org.openedx.frontend.layout.learning_header_actions.v1': {
    plugins: [
      {
        op: PLUGIN_OPERATIONS.Hide,
      },
    ],
  },
  'org.openedx.frontend.layout.header_learning_help.v1': {
    plugins: [
      {
        op: PLUGIN_OPERATIONS.Hide,
      },
    ],
  },
  'org.openedx.frontend.layout.header_learning_user_menu_toggle.v1': {
    plugins: [
      {
        op: PLUGIN_OPERATIONS.Hide,
      },
      {
        op: PLUGIN_OPERATIONS.Insert,
        widget: {
          id: 'unit_title_plugin',
          type: DIRECT_PLUGIN,
          priority: 1,
          RenderWidget: () => (
            <Button variant="brand">
              My Courses
            </Button>
          ),
        },
      }
    ],
  },
  'org.openedx.frontend.learning.progress_tab_course_completion.v1': {
    keepDefault: true,
    plugins: [progressWrapper,],
  },
  'org.openedx.frontend.learning.progress_tab_course_grade.v1': {
    keepDefault: true,
    plugins: [progressWrapper,],
  },
  'org.openedx.frontend.learning.progress_tab_grade_breakdown.v1': {
    plugins: [
      {
        op: PLUGIN_OPERATIONS.Hide,
      },
      {
        op: PLUGIN_OPERATIONS.Insert,
        widget: {
          id: 'unit_title_plugin',
          type: DIRECT_PLUGIN,
          priority: 1,
          RenderWidget: () => (
            <div className="progress-tab-component">
              <GradeSummary />
              <DetailedGrades />
            </div>
          ),
        },
      }
    ]
  },
  'org.openedx.frontend.layout.footer.v1': {
    plugins: [
      {
        // Hide the default footer
        op: PLUGIN_OPERATIONS.Hide,
        widgetId: 'default_contents',
      },
      {
        // Insert a custom footer
        op: PLUGIN_OPERATIONS.Insert,
        widget: {
          id: 'custom_footer',
          type: DIRECT_PLUGIN,
          RenderWidget: () => (
            <footer>
              <Container className="bg-primary text-light">
                <Row className="py-5">
                  <Col md={3} className="mb-4 mb-md-0">
                    <div className="footer-logo mb-4">
                      <img
                        src="https://placeholderimage.co/195x36/transparent/f9fafb?text=PennState+Extension"
                        alt="PennState Extension"
                      />
                    </div>
                    <div className="footer-address text-light">
                      <p>College of Agricultural Sciences</p>
                      <p>The Pennsylvania State University</p>
                      <p>323 Agricultural Administration Building</p>
                      <p>University Park, PA 16802</p>
                    </div>
                    <div className="social-icons mt-4">
                      <a className="text-light" href="#">FaFacebookF </a>
                      <a className="text-light" href="#">FaLinkedinIn </a>
                      <a className="text-light" href="#"><span className="custom-x-icon">X</span></a> {/* Custom X icon */}
                      <a className="text-light" href="#">IoLogoYoutube </a>
                      <a className="text-light" href="#">FaInstagram </a>
                    </div>
                  </Col>

                  <Col md={1} className="mb-4 mb-md-0">
                    <h6 className="text-light">ABOUT EXTENSION</h6>
                    <ul className="list-unstyled">
                      <li><a className="text-light" href="#">About</a></li>
                      <li><a className="text-light" href="#">Leadership</a></li>
                      <li><a className="text-light" href="#">Careers</a></li>
                      <li><a className="text-light" href="#">Extension News</a></li>
                      <li><a className="text-light" href="#">Press</a></li>
                      <li><a className="text-light" href="#">County Offices</a></li>
                    </ul>
                  </Col>

                  <Col md={1} className="mb-4 mb-md-0">
                    <h6 className="text-light">CUSTOMER SERVICE</h6>
                    <ul className="list-unstyled">
                      <li><a className="text-light" href="#">Help Center</a></li>
                      <li><a className="text-light" href="#">Login Problems</a></li>
                      <li><a className="text-light" href="#">Manage Email Preferences</a></li>
                      <li><a className="text-light" href="#">Contact Us</a></li>
                      <li><a className="text-light" href="#">Company Benefits</a></li>
                    </ul>
                  </Col>

                  <Col md={1}>
                    <h6 className="text-light">OTHER PROGRAMS</h6>
                    <ul className="list-unstyled">
                      <li><a className="text-light" href="#">Pennsylvania</a></li>
                      <li><a className="text-light" href="#">Better Kid Care</a></li>
                      <li><a className="text-light" href="#">Master Gardeners</a></li>
                    </ul>
                  </Col>
                </Row>
              </Container>


              <Container className="bg-dark">

                <div className="d-flex flex-grow justify-content-around text-light">
                  <a className="text-light" href="#">YOUTH SAFETY</a>
                  <a className="text-light" href="#">PRIVACY AND LEGAL STATEMENTS</a>
                  <a className="text-light" href="#">VETERINARY ADVICE STATEMENT</a>
                  <a className="text-light" href="#">NON-DISCRIMINATION</a>
                  <a className="text-light" href="#">ACCESSIBILITY</a>
                  <span className="copyright">©2025 THE PENNSYLVANIA STATE UNIVERSITY</span>
                </div>

              </Container>

            </footer>
          ),
        },
      },
    ]
  }
};

const config = {
  pluginSlots: {
    ...slotConfig
  },
};

export default config;