commit

.eslintignore

@@ -0,0 +1,5 @@
+build
+registerServiceWorker.js
+reportWebVitals.js
+src/utils/timeline.js
+src

.gitignore

@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.eslintcache
+
+# /src/_constants/configs.js
+# /src/_constants/config.js
+/package-lock.json
+/docker-compose.yml
+/yarn.lock

.prettierrc

@@ -0,0 +1,20 @@
+{
+  "arrowParens": "always",
+  "bracketSameLine": false,
+  "bracketSpacing": true,
+  "semi": true,
+  "singleQuote": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "as-needed",
+  "trailingComma": "all",
+  "singleAttributePerLine": false,
+  "htmlWhitespaceSensitivity": "css",
+  "vueIndentScriptAndStyle": false,
+  "proseWrap": "preserve",
+  "insertPragma": false,
+  "printWidth": 80,
+  "requirePragma": false,
+  "tabWidth": 2,
+  "useTabs": false,
+  "embeddedLanguageFormatting": "auto"
+}

Dockerfile

@@ -0,0 +1,14 @@
+FROM node:16
+
+# Set working directory
+WORKDIR /var/www
+
+# get latest nodejs
+RUN curl -sL https://deb.nodesource.com/setup_14.x | bash -
+RUN apt-get install -y nodejs
+
+# Install Yarn
+#RUN npm install --global yarn
+
+#npm install
+#RUN bash -c "cd /var/www/src; npm install"

docker-compose.yml.example

@@ -0,0 +1,35 @@
+version: '3.5'
+services:
+  #Nginx Service
+  agent-landingpage-nginx:
+    image: nginx:alpine
+    container_name: agent-landingpage-nginx
+    restart: unless-stopped
+    tty: true
+    ports:
+      - "19995:80"
+      - "19915:443"
+    volumes:
+      - ./:/var/www
+      - ./nginx/conf.d:/etc/nginx/conf.d
+    networks:
+      - app-network
+  #Node Service
+  agent-landingpage-web:
+    image: node:16
+    container_name: agent-landingpage-web
+    build:
+      context: .
+      dockerfile: ./Dockerfile
+    restart: unless-stopped
+    tty: true
+    working_dir: /var/www
+    volumes:
+      - ./:/var/www
+    networks:
+      - app-network
+#Docker Networks
+networks:
+  app-network:
+    name: gk.internal
+    external: true

nginx/conf.d/vhost.conf

@@ -0,0 +1,15 @@
+server {
+    listen 80;
+    server_name se_dev.sundayenglish.com;
+    index index.html;
+    error_log  /var/log/nginx/error.log;
+    access_log /var/log/nginx/access.log;
+    root /var/www/build;
+
+    location / {
+        try_files $uri $uri/ /index.html$is_args$args;
+        gzip_static on;
+    }
+
+    client_max_body_size 128m;
+}

package.json

@@ -0,0 +1,78 @@
+{
+    "name": "sunday-english",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@material-ui/core": "3.9.2",
+        "@material-ui/icons": "3.0.2",
+        "@testing-library/jest-dom": "^5.11.4",
+        "@testing-library/react": "^11.1.0",
+        "@testing-library/user-event": "^12.1.10",
+        "axios": "^0.21.1",
+        "chart.js": "^2.9.4",
+        "chartjs-plugin-datalabels": "1.0.0",
+        "classnames": "^2.3.1",
+        "date-fns": "^2.22.1",
+        "dayjs": "^1.10.4",
+        "history": "^4.10.1",
+        "html-react-parser": "^1.2.4",
+        "jquery": "^3.6.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "moment-duration-format": "2.2.2",
+        "node-sass": "9.0.0",
+        "qs": "^6.9.6",
+        "query-string": "^7.1.1",
+        "react": "^17.0.1",
+        "react-apple-login": "^1.1.3",
+        "react-chartjs-2": "^2.11.1",
+        "react-datepicker": "^4.1.1",
+        "react-dom": "^17.0.1",
+        "react-facebook-login": "^4.1.1",
+        "react-google-login": "^5.2.2",
+        "react-js-pagination": "^3.0.3",
+        "react-lazyload": "^3.2.0",
+        "react-markdown": "^8.0.5",
+        "react-redux": "^7.2.2",
+        "react-router-dom": "^5.2.0",
+        "react-router-hash-link": "^2.4.3",
+        "react-scripts": "4.0.3",
+        "react-slick": "^0.30.3",
+        "react-social-login": "^3.4.12",
+        "react-uikit3": "^0.14.0",
+        "redux": "^4.0.5",
+        "redux-persist": "^6.0.0",
+        "redux-thunk": "^2.3.0",
+        "sass": "^1.32.8",
+        "sheetjs-style": "^0.15.8",
+        "styled-components": "^5.3.3",
+        "text-selection-react": "^1.1.8",
+        "web-vitals": "^1.0.1",
+        "xlsx": "^0.18.5"
+    },
+    "scripts": {
+        "start": "react-scripts --max_old_space_size=4096 start",
+        "build": "react-scripts --max_old_space_size=4096 build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject",
+        "lint": "eslint src",
+        "format": "prettier --write ./src"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "css-loader": "^5.1.1",
+        "prettier": "^2.2.1",
+        "style-loader": "^2.0.0"
+    }
+}

public/.htaccess

@@ -0,0 +1,6 @@
+RewriteEngine On
+RewriteBase /
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteCond %{REQUEST_FILENAME} !-l
+RewriteRule ^.*$ / [L,QSA]

public/assets/css/button.css

@@ -0,0 +1,75 @@
+.btn-line-blue{
+	padding: 0 25px;
+	height: 40px;
+	border-radius: 20px;
+	border: none;
+	background-image: linear-gradient(to right, #00b9b7 , #00e1a0);
+	font-size: 16px;
+	line-height: 40px;
+	color: #fff;
+	/* transition: 0.8s; */
+	font-family: 'Myriadpro-SemiBold';
+	/* min-width: 100px; */
+}
+
+.btn-line-blue.border-transparent{
+	border: 2px solid transparent;
+}
+.btn-line-blue:hover{
+	/* background-image: linear-gradient(to top, #00b9b7 , #00e1a0); */
+	transition: 0s;
+    background: #00C0B4;
+    color: #ffffff;
+}
+.btn-custom-hei{
+	height: 36px;
+	line-height: 36px;
+	border-radius: 18px;
+}
+.btn-line-blue.btn-p35{
+	padding: 0 35px;
+}
+
+.btn-primary {
+	padding: 0 32px;
+	height: 40px;
+	border-radius: 20px;
+	border: none;
+	font-size: 16px;
+	color: #fff;
+	font-family: 'Myriadpro-SemiBold';
+	background-color: var(--button-bg-color);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-width: 168px;
+	white-space: nowrap;
+}
+
+.btn-primary:hover {
+	background-color: #c07a05;
+}
+
+@media screen and (max-height: 700px) {
+	.btn-line-blue {
+	    padding: 0 15px;
+	    height: 32px;
+	    line-height: 32px;
+	    border-radius: 16px;
+	    border: none;
+	    font-size: 14px;
+	    background-image: linear-gradient(to right, #00e1a0 , #00b9b7);
+	    color: #fff;
+	    /* transition: 0.8s; */
+	    font-family: 'Myriadpro-SemiBold';
+	    /* min-width: 80px; */
+	}
+	.btn-line-blue.btn-p35{
+		padding: 0 25px;
+	}
+
+	.btn-primary {
+		height: 32px;
+		min-width: 150px;
+	}
+}

public/assets/css/change_password.css

@@ -0,0 +1,114 @@
+.header-change-password {
+    height: 20vh;
+    background-image: linear-gradient(to right, #03c6b8, #009393);
+    display: flex;
+    align-items: center;
+    min-height: 175px;
+}
+
+.header-change-password .logo {
+    width: 220px;
+    margin-left: 50px;
+}
+
+.header-change-password .logo img {
+    width: 100%;
+    object-fit: cover;
+}
+
+.change-password-container {
+    background: #e6e7e9;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 50px 20px;
+    height: 80vh;
+    min-height: 500px;
+}
+
+.form-change-password {
+    box-shadow: 0 1px 15px 0 rgba(21, 27, 38, .15);
+    background: #ffffff;
+    border: 0;
+    border-radius: 20px;
+    text-align: center;
+    width: 100%;
+    max-width: 750px;
+    max-height: 400px;
+}
+
+.form-change-password h2.title {
+    font-size: 18px;
+    color: #000000;
+    margin-top: 20px;
+    font-weight: 700;
+}
+
+.form-change-password form {
+    margin: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.form-change-password-input {
+    margin: 0 10px 15px 10px;
+    width: 100%;
+    max-width: 350px;
+}
+
+.form-change-password-input input {
+    height: 60px;
+    width: 100%;
+    line-height: 60px;
+    font-size: 18px;
+    box-sizing: border-box;
+    padding-left: 30px;
+    border-radius: 20px;
+    background: #e6e7e9;
+    border: 0;
+    outline: none;
+}
+
+.form-change-password-input.err input {
+    border: solid 1px #e22028;
+}
+
+.form-change-password-input button {
+    height: 60px;
+    width: 100%;
+    line-height: 60px;
+    font-size: 18px;
+    color: #ffffff;
+    font-weight: 700;
+    text-align: center;
+    border: 0;
+    border-radius: 20px;
+    outline: none;
+    background: #00b8b6;
+}
+
+.form-change-password-input .ico_input_right {
+    position: absolute;
+    top: 18px;
+    right: 20px;
+}
+
+.form-change-password-input .error-help {
+    margin-top: 10px;
+}
+
+.form-change-password-input.err .error-help img {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.form-change-password-input.err .error-help p {
+    font-size: 18px;
+    color: #e22028;
+    line-height: 31px;
+    margin: 0;
+    padding: 0 0 0 40px;
+}

public/assets/css/input.css

@@ -0,0 +1,194 @@
+.form-sunE-input {
+  margin: 20px 0 0;
+}
+
+.form-sunE-input input {
+  height: 44px;
+  width: 100%;
+  line-height: 44px;
+  font-size: 16px;
+  box-sizing: border-box;
+  padding-left: 60px;
+  border-radius: 22px;
+  outline: none;
+  border: 2px solid #fff;
+  box-shadow: 0 1px 8px 0 rgba(21, 27, 38, 0.15);
+}
+.form-sunE-input .ico_input {
+  position: absolute;
+  top: 7px;
+  left: 15px;
+  z-index: 1;
+}
+.width-22 {
+  width: 22px;
+}
+
+.form-sunE-input .ico_phone {
+  left: 18px;
+}
+.form-sunE-input .ico_top_3 {
+  top: 3px;
+}
+
+.form-sunE-input.ico_left_custom input {
+  padding-left: 60px;
+}
+
+.checkbox-gr input {
+  margin: -3px 5px 0 0;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #00b9b7;
+  font-size: 16px;
+}
+
+.err input {
+  border-color: #e22028;
+}
+
+.select-hidden {
+  display: none;
+  visibility: hidden;
+  padding-right: 10px;
+}
+
+.select {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  font-size: 16px;
+  color: #fff;
+  width: 100%;
+  height: 48px;
+  line-height: 48px;
+  border-radius: 24px;
+  border: none;
+  background-image: linear-gradient(to right, #00e1a0, #00b9b7);
+}
+
+.select-styled {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-image: linear-gradient(to right, #00e1a0, #00b9b7);
+  width: 100%;
+  height: 48px;
+  line-height: 48px;
+  border: none;
+  /* transition: all 0.2s ease-in; */
+  border-radius: 24px;
+  color: #fff;
+  font-size: 16px;
+  text-align: center;
+  font-family: "Myriadpro-Bold";
+  z-index: 10;
+  display: flex;
+}
+
+.select-styled:after {
+  content: "";
+  width: 32px;
+  height: 32px;
+  background: url("./../images/icon/ico_dropdown_border_white.png") 98% / 32px
+    no-repeat transparent;
+  position: absolute;
+  top: 8px;
+  right: 10px;
+}
+.select-styled.active:after {
+  border-color: transparent transparent #fff transparent;
+}
+.select-options {
+  display: none;
+  position: absolute;
+  padding: 24px 40px 0;
+  top: 24px;
+  right: 0;
+  left: 0;
+  z-index: 9;
+  margin: 0;
+  list-style: none;
+  background-color: #fff;
+  border-radius: 24px;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  border: none;
+  box-shadow: 0 1px 15px 0 rgba(21, 27, 38, 0.15);
+  max-height: calc(100vh - 100px);
+  overflow: auto;
+}
+.select-options li {
+  margin: 0;
+  text-indent: 15px;
+  transition: all 0.15s ease-in;
+  border-bottom: 1px solid #000;
+  text-align: center;
+  display: flex;
+}
+.select-options li:last-child {
+  border-bottom: none;
+}
+.select-options li[rel="hide"] {
+  display: none;
+}
+
+.select-options.left li {
+  text-align: left;
+}
+.select .image-selected {
+  margin-right: 1rem;
+}
+.select .image-option {
+  width: 30px;
+  height: 30px;
+  border-radius: 100%;
+  align-self: center;
+  display: flex;
+  border: 1px solid var(--primary-green);
+}
+
+.select .image-option.image-option-logo {
+  border: 1px solid var(--light-yellow);
+}
+
+.select .image-option img {
+  width: 26px;
+  height: 18px;
+  object-fit: contain;
+  margin: auto;
+}
+
+@media screen and (max-height: 700px) {
+  .select {
+    font-size: 13px;
+    height: 32px;
+    line-height: 32px;
+    border-radius: 16px;
+  }
+
+  .select-styled {
+    height: 32px;
+    line-height: 32px;
+    border-radius: 16px;
+    font-size: 14px;
+  }
+
+  .select-styled:after {
+    content: "";
+    width: 26px;
+    height: 26px;
+    top: 4px;
+    right: 5px;
+    background: url(./../images/icon/ico_dropdown_border_white.png) 96% / 26px
+      no-repeat transparent;
+  }
+  .select-options {
+    padding: 32px 32px 0;
+    top: 0;
+    border-radius: 18px;
+    max-height: calc(100vh - 90px);
+  }
+}