Abstract-Tech · laithmassoud · Aug 2, 2022 · Aug 3, 2022 · Aug 10, 2022 · Aug 11, 2022
diff --git a/.env.development b/.env.development
@@ -1,21 +1,21 @@
 NODE_ENV='development'
-PORT=8080
+PORT=3000
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
-BASE_URL='http://localhost:8080'
+BASE_URL='http://localhost:3000'
 CREDENTIALS_BASE_URL='http://localhost:18150'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
-LMS_BASE_URL='http://localhost:18000'
-LOGIN_URL='http://localhost:18000/login'
-LOGOUT_URL='http://localhost:18000/logout'
-LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
-LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LMS_BASE_URL='http://lilac-derex.localhost'
+LOGIN_URL='http://lilac-derex.localhost/login'
+LOGOUT_URL='http://lilac-derex.localhost/logout'
+LOGO_URL=http://lilac-derex.localhost/static/edx-simple-theme/images/logo.svg
+LOGO_TRADEMARK_URL=http://lilac-derex.localhost/static/images/logo.png
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
-MARKETING_SITE_BASE_URL='http://localhost:18000'
+MARKETING_SITE_BASE_URL='http://lilac-derex.localhost'
 ORDER_HISTORY_URL='http://localhost:1996/orders'
-REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
+REFRESH_ACCESS_TOKEN_ENDPOINT='http://lilac-derex.localhost/login_refresh'
 SEGMENT_KEY=''
 SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
diff --git a/package.json b/package.json
@@ -35,20 +35,25 @@
     "url": "https://github.com/edx/frontend-template-application/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/brand": "git+https://git@github.com/edx/brand-edx.org#master",
     "@edx/frontend-component-footer": "10.1.4",
     "@edx/frontend-component-header": "2.2.4",
+    "@edx/frontend-enterprise": "4.2.3",
     "@edx/frontend-platform": "1.8.4",
     "@edx/paragon": "13.17.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-brands-svg-icons": "5.11.2",
     "@fortawesome/free-regular-svg-icons": "5.11.2",
     "@fortawesome/free-solid-svg-icons": "5.11.2",
     "@fortawesome/react-fontawesome": "0.1.14",
+    "axios": "^0.27.2",
     "babel-polyfill": "6.26.0",
+    "lodash": "^4.17.21",
     "prop-types": "15.7.2",
     "react": "16.12.0",
     "react-dom": "16.12.0",
+    "react-helmet": "^6.1.0",
+    "react-markdown": "^4.2.2",
     "react-redux": "7.1.3",
     "react-router": "5.1.2",
     "react-router-dom": "5.1.2",

diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,7 @@
       <title>Application Template | <%= process.env.SITE_NAME %></title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
       <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
   </head>
   <body>

diff --git a/src/Components/About-us/AboutUs.jsx b/src/Components/About-us/AboutUs.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { Button } from "react-bootstrap";
+import { getConfig } from "@edx/frontend-platform";
+import { Container } from "@edx/paragon";
+
+const AboutUS = (data) => {
+  return (
+    <>
+      <div className="gray-continer">
+        <Container className="wrapper-continer">
+          <h2>What we do</h2>
+          <p>
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui
+            blanditiis praesentium voluptatum deleniti atque corrupti quos
+            dolores et quas molestias excepturi sint occaecati cupiditate non
+            provident, similique sunt in culpa qui officia deserunt mollitia
+            animi.
+          </p>
+          <p>
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui
+            blanditiis praesentium voluptatum deleniti atque corrupti quos
+            dolores et quas molestias excepturi sint occaecati cupiditate non
+            provident, similique sunt in culpa qui officia deserunt mollitia
+            animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis
+            est et expedita distinctio. Nam libero tempore, cum soluta nobis.
+          </p>
+          <a className="view-more" href={getConfig().LMS_BASE_URL + "/about"}>
+            Learn more
+          </a>
+        </Container>
+      </div>
+    </>
+  );
+};
+
+export default AboutUS;
diff --git a/src/Components/Course_About/Course_about.jsx b/src/Components/Course_About/Course_about.jsx
@@ -0,0 +1,160 @@
+import React, { useState, useEffect } from "react";
+import { Button, Container, Col } from "@edx/paragon";
+import Row from "react-bootstrap/Row";
+import axios from "axios";
+import TabItemComponent from "./TabItem";
+
+import { getConfig } from "@edx/frontend-platform";
+import { useParams } from "react-router";
+
+import TabsComponent from "./Tabs";
+
+const tabItems = [
+  {
+    id: 1,
+    title: "About",
+    section_class: "about",
+  },
+  {
+    id: 2,
+    title: "info",
+    section_class: "content",
+  },
+  {
+    id: 3,
+    title: "Syllabus",
+    section_class: "prerequisites",
+  },
+  {
+    id: 4,
+    title: "Instructors",
+    section_class: "course-staff",
+  },
+  {
+    id: 5,
+    title: "FAQs",
+    section_class: "faq",
+  },
+];
+
+const About = () => {
+  const params = useParams();
+  const [data, setData] = useState(null);
+  const [courseDetails, setCourseDetails] = useState(null);
+  const [active, setActive] = useState(1);
+
+  const Course =
+    getConfig().LMS_BASE_URL + "/api/courses/v1/courses/" + params.courseId;
+
+  const Enrolment =
+    getConfig().LMS_BASE_URL + "/api/enrollment/v1/course/" + params.courseId;
+
+  const update_data = async function () {
+    const [firstResponse, secondResponse] = await Promise.all([
+      axios.get(Course),
+      axios.get(Enrolment),
+    ]);
+
+    setData(firstResponse.data);
+
+    setCourseDetails(secondResponse.data);
+  };
+  useEffect(() => {
+    update_data();
+  }, []);
+
+  let date = (str) => {
+    let unformatData = new Date(str);
+    const options = {
+      day: "numeric",
+      month: "short",
+    };
+    return unformatData.toLocaleDateString("en-US", options);
+  };
+
+  return (
+    <main>
+      <div className="white-continer-claim">
+        <div className="wrapper-continer wrapper">
+          <div>
+            <span> {data?.org}</span>
+            <h2>{data?.name}</h2>
+          </div>
+          <div>{data?.short_description} </div>
+        </div>
+        <div className="wrapper-continer">
+          <div className="course-info-banner">
+            <span>
+              <strong> +/-2 months 2-4h</strong>
+              <br />
+              per week
+            </span>
+            <span>
+              <strong> Self-paced</strong>
+              <br />
+              Go at your own speed
+            </span>
+            <span>
+              {courseDetails?.course_modes[0].min_price == 0 ? (
+                <span>
+                  <strong>Free!</strong> <br /> 100% free course
+                </span>
+              ) : (
+                courseDetails?.course_modes[0].min_price +
+                courseDetails?.course_modes[0].currency
+              )}
+            </span>
+
+            <span>
+              Start: {date(data?.start)}
+              <br />
+              End: {date(data?.end)}
+            </span>
+            <Button className="enroll-button">Enroll</Button>
+          </div>
+          <div>
+            <img
+              className="course-image"
+              src={data?.media.image.large}
+              alt={data?.course_name}
+            />
+          </div>
+          <div className="tabs-container">
+            <div className="tabs">
+              {tabItems.map(({ id, title }) => (
+                <TabItemComponent
+                  key={title}
+                  title={title}
+                  onItemClicked={() => setActive(id)}
+                  isActive={active === id}
+                />
+              ))}
+            </div>
+            <div>
+              <Button className="enroll-button">
+                {" "}
+                Enroll now <br /> Starts {date(data?.start)}
+              </Button>
+            </div>
+          </div>
+
+          <div className="content">
+            {tabItems.map(({ id, section_class }) => {
+              return active === id ? (
+                <div
+                  key={id}
+                  className={`about-course-tabs ${section_class}`}
+                  dangerouslySetInnerHTML={{ __html: data?.overview }}
+                ></div>
+              ) : (
+                ""
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default About;
diff --git a/src/Components/Course_About/TabItem.jsx b/src/Components/Course_About/TabItem.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+const TabItemComponent = ({
+  title = "",
+  onItemClicked = () => console.error("You passed no action to the component"),
+  isActive = false,
+}) => {
+  return (
+    <div
+      className={isActive ? "tabitem" : "tabitem tabitem--inactive"}
+      onClick={onItemClicked}
+    >
+      {title}
+    </div>
+  );
+};
+
+export default TabItemComponent;
diff --git a/src/Components/Course_About/Tabs.jsx b/src/Components/Course_About/Tabs.jsx
@@ -0,0 +1,58 @@
+import { Button } from "@edx/paragon";
+import React, { useState } from "react";
+import TabItemComponent from "./TabItem";
+
+const tabItems = [
+  {
+    id: 1,
+    title: "About",
+    class: "about",
+  },
+  {
+    id: 2,
+    title: "info",
+    content: "step 2 content",
+  },
+  {
+    id: 3,
+    title: "Syllabus",
+    content: "prerequisites",
+  },
+  {
+    id: 4,
+    title: "Instructors",
+    content: "course-staff",
+  },
+  {
+    id: 5,
+    title: "FAQs",
+    content: "faq",
+  },
+];
+
+const TabsComponent = () => {
+  const [active, setActive] = useState(0);
+
+  return (
+    <div>
+      <div className="tabs">
+        {tabItems.map(({ id, icon, title }) => (
+          <TabItemComponent
+            key={title}
+            icon={icon}
+            title={title}
+            onItemClicked={() => setActive(id)}
+            isActive={active === id}
+          />
+        ))}
+      </div>
+      <div className="content">
+        {tabItems.map(({ id, content }) => {
+          return active === id ? content : "";
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default TabsComponent;